/* ==========================================================================
   GENESIS SOLUTIONS - CSS DESIGN SYSTEM & STYLING
   ========================================================================== */

/* Import Google Fonts */
/* Pairing 4 "Geometric Precision": Sora (display) + DM Mono (badges/micro-copy) + Manrope (body).
   Inter/Outfit kept as fallbacks so reverting is trivial. */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&family=Sora:wght@400;500;600;700;800&display=swap');

:root {
  /* Colors */
  --brand-navy: #12233A;
  --brand-teal: #06959d;
  --brand-teal-light: #0d9488;
  --brand-teal-dark: #0f766e;
  --brand-teal-glow: #14b8a6;
  --brand-teal-bg: rgba(6, 149, 157, 0.08);
  /* Per-service accent colors (navy + teal remain the foundation) */
  --svc-web: #06959d;    /* web design — teal */
  --svc-brand: #6d5ae6;  /* branding — violet */
  --svc-print: #f26d5b;  /* print — coral */
  --svc-seo: #1fa35b;    /* local SEO — emerald */
  --svc-care: #2e7cd6;   /* website care — blue */
  --dark-obsidian: #0f172a;
  --dark-charcoal: #1e293b;
  --slate-light: #f8fafc;
  --slate-border: #e2e8f0;

  /* Text */
  --text-dark: var(--brand-navy);
  --text-slate: #334155;
  --text-muted: #64748b;

  /* Fonts */
  /* Pairing 4 "Geometric Precision" (active):
       headings = Sora, body = Manrope, badges/micro-copy = DM Mono.
     To revert to the previous look: --font-headings:'Outfit'; --font-body:'Inter'. */
  --font-headings: 'Sora', 'Outfit', sans-serif;
  --font-body: 'Manrope', 'Inter', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-outfit: 'Outfit', sans-serif;

  /* Brief-spec bright teal accent (used for Wix-style highlights) */
  --brand-teal-bright: #08b0ba;

  /* Layout & Animation */
  --card-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
  --card-shadow-hover: 0 20px 40px -15px rgba(6, 149, 157, 0.18);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
}

/* ======== BASE STYLES ======== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: #ffffff;
  color: var(--text-slate);
  line-height: 1.7;
  font-size: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-headings);
  color: var(--text-dark);
  font-weight: 700;
  line-height: 1.25;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-smooth);
}

/* ======== NAVBAR (GLASSMORPHISM) ======== */
.navbar {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  padding: 12px 0;
  transition: var(--transition-smooth);
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 42px;
  width: auto;
  object-fit: contain;
  transition: var(--transition-smooth);
}

.navbar-nav .nav-link {
  color: var(--text-slate) !important;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 8px 16px !important;
  border-radius: var(--border-radius-sm);
  transition: var(--transition-smooth);
}

.navbar-nav .nav-link:hover {
  color: var(--brand-teal) !important;
  background-color: var(--brand-teal-bg);
}

.navbar-nav .nav-link.active {
  color: var(--brand-teal) !important;
  font-weight: 600;
  background-color: var(--brand-teal-bg);
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    background-color: #ffffff;
    border-radius: var(--border-radius-md);
    box-shadow: var(--card-shadow);
    padding: 1.5rem;
    margin-top: 1rem;
    border: 1px solid var(--slate-border);
  }

  .navbar-nav .nav-link {
    padding: 10px 16px !important;
    margin-bottom: 4px;
  }
}

/* ======== HERO SECTION ======== */
.hero-gradient-bg {
  position: relative;
  background-color: #ffffff;
  /* Dotted grid texture combined with soft radial color accents */
  background-image:
    radial-gradient(rgba(6, 149, 157, 0.08) 1.5px, transparent 1.5px),
    radial-gradient(circle at 85% 15%, rgba(6, 149, 157, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 15% 85%, rgba(13, 148, 136, 0.06) 0%, transparent 45%);
  background-size: 24px 24px, 100% 100%, 100% 100%;
  padding: 140px 0 100px;
  overflow: hidden;
}

.hero-gradient-bg .container {
  position: relative;
  z-index: 5;
}

/* Drifting ambient color spheres behind the text */
.hero-glow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
}

.blob-1 {
  top: 10%;
  right: 15%;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(6, 149, 157, 0.3) 0%, transparent 70%);
  animation: driftBlob1 18s ease-in-out infinite;
}

.blob-2 {
  bottom: 5%;
  left: 10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(13, 148, 136, 0.2) 0%, transparent 70%);
  animation: driftBlob2 22s ease-in-out infinite;
}

@keyframes driftBlob1 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-40px, 30px) scale(1.15);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes driftBlob2 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(30px, -40px) scale(0.9);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

.gradient-text {
  background: linear-gradient(120deg, var(--brand-teal) 0%, var(--brand-teal-light) 30%, #14b8a6 50%, var(--brand-teal-light) 70%, var(--brand-teal) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shineGradient 6s linear infinite;
}

@keyframes shineGradient {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 200% center;
  }
}

.local-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(6, 149, 157, 0.08) 0%, rgba(13, 148, 136, 0.08) 100%);
  border: 1px solid rgba(6, 149, 157, 0.2);
  color: var(--brand-teal-dark);
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 24px;
  animation: float 4s ease-in-out infinite;
  transition: var(--transition-smooth);
}

.local-badge:hover {
  transform: translateY(-2px) scale(1.03);
  background: linear-gradient(135deg, rgba(6, 149, 157, 0.12) 0%, rgba(13, 148, 136, 0.12) 100%);
  border-color: rgba(6, 149, 157, 0.35);
}

.hero-subtitle {
  font-size: 1.2rem;
  color: var(--text-slate);
  max-width: 650px;
  margin-bottom: 35px;
}

/* ======== PREMIUM BUTTONS ======== */
.btn-premium {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-teal) 100%);
  color: #ffffff !important;
  border: none;
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--border-radius-sm);
  box-shadow: 0 4px 12px rgba(18, 35, 58, 0.15);
  transition: var(--transition-smooth);
}

.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -6px rgba(14, 128, 115, 0.35);
  background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-teal-dark) 100%);
}

.btn-premium-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--brand-teal-dark) !important;
  border: 2px solid var(--brand-teal-light);
  padding: 12px 30px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--border-radius-sm);
  transition: var(--transition-smooth);
}

.btn-premium-outline:hover {
  background-color: var(--brand-teal-bg);
  border-color: var(--brand-teal-dark);
  transform: translateY(-2px);
}

/* ======== PRODUCT & SERVICE CARDS ======== */
.service-card {
  background: #ffffff;
  border: 1px solid var(--slate-border);
  border-radius: var(--border-radius-md);
  padding: 40px 30px;
  box-shadow: var(--card-shadow);
  transition: var(--transition-smooth);
  height: 100%;
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--brand-teal), var(--brand-teal-light));
  opacity: 0;
  transition: var(--transition-smooth);
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(6, 149, 157, 0.25);
  box-shadow: var(--card-shadow-hover);
}

.service-card:hover::before {
  opacity: 1;
}

.service-icon-box {
  width: 64px;
  height: 64px;
  border-radius: var(--border-radius-sm);
  background-color: var(--brand-navy);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: 24px;
  transition: var(--transition-smooth);
}

.service-card:hover .service-icon-box {
  background-color: var(--brand-teal);
  color: #ffffff;
  transform: rotate(5deg) scale(1.05);
}

.service-card h3 {
  font-size: 1.35rem;
  margin-bottom: 16px;
  color: var(--text-dark);
}

.service-card p {
  color: var(--text-slate);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.service-bullets {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.service-bullets li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: var(--text-slate);
}

.service-bullets li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  color: var(--brand-teal);
  font-size: 0.8rem;
  top: 2px;
}

/* ======== HOW IT WORKS / TIMELINE ======== */
.timeline-card {
  background: #ffffff;
  border-left: 4px solid var(--brand-teal);
  padding: 24px 30px;
  box-shadow: var(--card-shadow);
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
  transition: var(--transition-smooth);
}

.timeline-card:hover {
  transform: translateX(6px);
  box-shadow: var(--card-shadow-hover);
}

.timeline-number {
  font-family: var(--font-headings);
  font-size: 2rem;
  font-weight: 800;
  color: var(--brand-teal-light);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: 8px;
}

/* ======== ABOUT PAGE CUSTOMS ======== */
.about-image-wrapper {
  position: relative;
}

.about-image-wrapper::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  right: -20px;
  bottom: -20px;
  border: 3px solid var(--brand-teal-light);
  border-radius: var(--border-radius-md);
  z-index: -1;
}

.founder-card {
  border: 1px solid var(--slate-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--border-radius-md);
  padding: 40px;
  background-color: #ffffff;
}

/* ======== CONTACT FORM CARD ======== */
.contact-card-info {
  background: linear-gradient(135deg, var(--dark-obsidian) 0%, var(--dark-charcoal) 100%);
  color: #ffffff;
  border-radius: var(--border-radius-md);
  padding: 40px;
  height: 100%;
}

.contact-card-info h3 {
  color: #ffffff;
}

.contact-info-link {
  display: flex;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.8) !important;
  margin-bottom: 20px;
  font-size: 1rem;
}

.contact-info-link:hover {
  color: var(--brand-teal-glow) !important;
  transform: translateX(4px);
}

.contact-info-link i {
  font-size: 1.25rem;
  color: var(--brand-teal-glow);
  width: 24px;
}

.contact-form-wrapper {
  background: #ffffff;
  border: 1px solid var(--slate-border);
  border-radius: var(--border-radius-md);
  box-shadow: var(--card-shadow);
  padding: 40px;
}

.form-control-premium {
  background-color: var(--slate-light);
  border: 1px solid var(--slate-border);
  border-radius: var(--border-radius-sm);
  padding: 12px 16px;
  font-size: 0.95rem;
  color: var(--text-dark);
  transition: var(--transition-smooth);
}

.form-control-premium:focus {
  background-color: #ffffff;
  border-color: var(--brand-teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(6, 149, 157, 0.15);
}

/* ======== SECTION DECORATIONS & UTILITIES ======== */
.section-padding {
  padding: 100px 0;
}

.bg-slate {
  background-color: var(--slate-light);
}

.bg-navy-accent {
  background-color: var(--brand-navy) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  position: relative;
}

.bg-navy-accent h2,
.bg-navy-accent h3,
.bg-navy-accent h4,
.bg-navy-accent .fw-bold,
.bg-navy-accent .fw-semibold {
  color: #ffffff !important;
}

.bg-navy-accent p,
.bg-navy-accent .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

.bg-navy-accent .local-badge {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.bg-navy-accent .local-badge:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.bg-navy-accent i.text-teal {
  color: #14b8a6 !important;
}

.section-title-wrapper {
  margin-bottom: 60px;
}

.section-title-wrapper h2 {
  font-size: 2.25rem;
  margin-bottom: 16px;
}

.section-title-wrapper p {
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.05rem;
}

/* ======== FOOTER ======== */
.footer-dark {
  background-color: var(--brand-navy);
  color: rgba(255, 255, 255, 0.85);
  padding: 60px 0 30px;
  font-size: 0.95rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-dark p {
  color: rgba(255, 255, 255, 0.78);
}

.footer-dark a {
  color: rgba(255, 255, 255, 0.85);
}

/* Bootstrap's .text-muted is a dark gray — unreadable on the dark footer.
   Override so the copyright line stays legible. */
.footer-dark .text-muted {
  color: rgba(255, 255, 255, 0.6) !important;
}

.footer-dark a:hover {
  color: var(--brand-teal-glow);
}

.footer-logo {
  height: 36px;
  margin-bottom: 20px;
}

.footer-social-icons {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.footer-social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  transition: var(--transition-smooth);
}

.footer-social-icon:hover {
  background-color: var(--brand-teal);
  transform: translateY(-2px);
}

/* ======== KEYFRAMES ======== */
@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-6px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* ======== FADE & UTILITIES ======== */
.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Simple responsive modifications */
@media (max-width: 767.98px) {
  .section-padding {
    padding: 60px 0;
  }

  .section-title-wrapper {
    margin-bottom: 40px;
  }

  .section-title-wrapper h2 {
    font-size: 1.85rem;
  }

  .hero-gradient-bg {
    padding: 100px 0 60px;
  }

  .gradient-text {
    font-size: 2.2rem;
  }
}

/* ======== TERMS & PRIVACY PAGES ======== */
.section.container {
  padding: 80px 15px;
}

.terms-content h2,
.privacy-content h2 {
  font-family: var(--font-headings);
  font-size: 1.5rem;
  color: var(--text-dark);
  margin-top: 30px;
  margin-bottom: 12px;
  font-weight: 700;
}

.terms-content p,
.privacy-content p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-slate);
  margin-bottom: 20px;
}

/* ======== INTERACTIVE BROWSER COCKPIT & MOCKUP ======== */
.browser-mockup {
  background: #ffffff;
  border: 1px solid var(--slate-border);
  border-radius: var(--border-radius-md);
  box-shadow: 0 30px 60px -15px rgba(18, 35, 58, 0.15);
  overflow: hidden;
  position: relative;
  text-align: left;
  z-index: 10;
  transition: var(--transition-smooth);
}

.browser-mockup:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 40px 80px -20px rgba(14, 128, 115, 0.2);
}

.browser-header {
  background-color: #f1f5f9;
  border-bottom: 1px solid var(--slate-border);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.browser-dots {
  display: flex;
  gap: 6px;
}

.browser-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.browser-dot.red { background-color: #ef4444; }
.browser-dot.yellow { background-color: #eab308; }
.browser-dot.green { background-color: #22c55e; }

.browser-address {
  flex-grow: 1;
  background-color: #ffffff;
  border: 1px solid var(--slate-border);
  border-radius: var(--border-radius-sm);
  padding: 4px 14px;
  font-size: 0.75rem;
  color: var(--text-slate);
  font-family: monospace;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.browser-body {
  background-color: #ffffff;
  padding: 24px;
  min-height: 250px;
}

/* Mockup cockpit dashboards */
.mockup-dashboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mockup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 12px;
}

.mockup-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.mockup-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
}

.indicator-green {
  background-color: #dcfce7;
  color: #15803d;
}

.indicator-blue {
  background-color: #e0f2fe;
  color: #0369a1;
}

/* Floating interactive dashboard cards */
.floating-badge-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 15;
}

.floating-badge {
  position: absolute;
  background: #ffffff;
  border: 1px solid var(--slate-border);
  border-radius: var(--border-radius-sm);
  box-shadow: 0 10px 25px -5px rgba(18, 35, 58, 0.1);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-navy);
  pointer-events: auto;
  transition: var(--transition-smooth);
}

.floating-badge i {
  font-size: 1rem;
}

.badge-ssl {
  top: 15%;
  right: -25px;
  border-left: 3px solid var(--brand-teal);
  animation: floatSlow1 5s ease-in-out infinite;
}

.badge-speed {
  bottom: 20%;
  left: -35px;
  border-left: 3px solid #0284c7;
  animation: floatSlow2 6s ease-in-out infinite;
}

.badge-backup {
  bottom: 10%;
  right: -20px;
  border-left: 3px solid #16a34a;
  animation: floatSlow1 7s ease-in-out infinite;
}

@keyframes floatSlow1 {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}

@keyframes floatSlow2 {
  0% { transform: translateY(0px); }
  50% { transform: translateY(8px); }
  100% { transform: translateY(0px); }
}

/* ======== SHOWROOM STYLE CARDS ======== */
.showroom-card {
  background: #ffffff;
  border: 1px solid var(--slate-border);
  border-radius: var(--border-radius-md);
  box-shadow: var(--card-shadow);
  padding: 30px;
  transition: var(--transition-smooth);
  height: 100%;
}

.showroom-card:hover {
  transform: translateY(-8px);
  border-color: var(--brand-teal);
  box-shadow: var(--card-shadow-hover);
}

.showroom-preview-frame {
  height: 150px;
  background-color: var(--slate-light);
  border: 1px solid var(--slate-border);
  border-radius: var(--border-radius-sm);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  color: var(--brand-teal);
  transition: var(--transition-smooth);
}

.showroom-card:hover .showroom-preview-frame {
  background-color: var(--brand-teal-bg);
  transform: scale(1.02);
}

.showroom-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--brand-navy);
}

/* ======== PLAN COMPARISON TOGGLER ======== */
.plan-toggle-container {
  display: inline-flex;
  background-color: #f1f5f9;
  padding: 6px;
  border-radius: 30px;
  margin-bottom: 40px;
}

.plan-toggle-btn {
  border: none;
  background: transparent;
  color: var(--text-slate);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 24px;
  border-radius: 20px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.plan-toggle-btn.active {
  background-color: #ffffff;
  color: var(--brand-navy);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Hide care features dynamically by class */
.care-feature-line {
  transition: var(--transition-smooth);
}

.care-hidden .care-feature-line {
  opacity: 0.25;
  text-decoration: line-through;
}

.pricing-amount span.price-monthly-text {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ======== ABOUT & VALUES CUSTOM STYLING ======== */
.about-hero-bg {
  position: relative;
  background-color: #ffffff;
  background-image:
    radial-gradient(rgba(6, 149, 157, 0.06) 1.5px, transparent 1.5px),
    radial-gradient(circle at 10% 20%, rgba(6, 149, 157, 0.08) 0%, transparent 35%),
    radial-gradient(circle at 90% 80%, rgba(13, 148, 136, 0.05) 0%, transparent 40%);
  background-size: 24px 24px, 100% 100%, 100% 100%;
}

.about-mvp-card {
  background: #ffffff;
  border: 1px solid var(--slate-border);
  border-top: 4px solid var(--brand-teal-light);
  border-radius: var(--border-radius-md);
  padding: 35px 30px;
  box-shadow: var(--card-shadow);
  transition: var(--transition-smooth);
  height: 100%;
}

.about-mvp-card:hover {
  transform: translateY(-6px);
  border-top-color: var(--brand-teal);
  box-shadow: var(--card-shadow-hover);
}

.about-mvp-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-teal-bg);
  color: var(--brand-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
  transition: var(--transition-smooth);
}

.about-mvp-card:hover .about-mvp-icon {
  background-color: var(--brand-teal);
  color: #ffffff;
  transform: scale(1.08) rotate(5deg);
}

.value-card {
  background: #ffffff;
  border: 1px solid var(--slate-border);
  border-radius: var(--border-radius-md);
  padding: 30px 24px;
  box-shadow: var(--card-shadow);
  transition: var(--transition-smooth);
  height: 100%;
  text-align: center;
  position: relative;
}

.value-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, var(--brand-teal), #14b8a6);
  transform: scaleX(0);
  transition: var(--transition-smooth);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}

.value-card:hover::after {
  transform: scaleX(1);
}

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

.value-icon-box {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--brand-teal-bg);
  color: var(--brand-teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 20px;
  transition: var(--transition-smooth);
}

.value-card:hover .value-icon-box {
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-teal) 100%);
  color: #ffffff;
  transform: rotateY(180deg);
}

.values-grid-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/* Local badge variation for about section */
.about-local-badge {
  background-color: var(--brand-teal-bg);
  color: var(--brand-teal-dark);
  border: 1px solid rgba(6, 149, 157, 0.15);
  font-size: 0.8rem;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 12px;
}

/* ==========================================================================
   PHASE 1: DESIGN SYSTEM EXPANSION (1-WEEK LAUNCH & GRAPHIC SUITE)
   ========================================================================== */

/* 1-Week Speed & Launch Badges */
.badge-launch-speed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(6, 149, 157, 0.12) 0%, rgba(20, 184, 166, 0.18) 100%);
  border: 1px solid rgba(6, 149, 157, 0.3);
  color: var(--brand-navy);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 16px;
  border-radius: 30px;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 15px rgba(6, 149, 157, 0.1);
}

.badge-launch-speed i {
  color: var(--brand-teal);
  font-size: 0.95rem;
  animation: pulse-glow 2s infinite ease-in-out;
}

@keyframes pulse-glow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.85; }
}

.pill-deliverable {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  display: inline-block;
}

/* 3-Step Process Stepper */
.process-step-card {
  background: #ffffff;
  border: 1px solid var(--slate-border);
  border-radius: var(--border-radius-md);
  padding: 32px 28px;
  position: relative;
  height: 100%;
  transition: var(--transition-smooth);
  box-shadow: var(--card-shadow);
}

.process-step-card:hover {
  transform: translateY(-8px);
  border-color: var(--brand-teal);
  box-shadow: var(--card-shadow-hover);
}

.step-number-badge {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-teal) 100%);
  color: #ffffff;
  font-family: var(--font-headings);
  font-weight: 800;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(6, 149, 157, 0.25);
  margin-bottom: 20px;
}

.step-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand-navy);
  margin-bottom: 12px;
}

.step-card-text {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 0;
  line-height: 1.6;
}

/* Graphic Design & Web Service Cards */
.service-pillar-card {
  background: #ffffff;
  border: 1px solid var(--slate-border);
  border-radius: var(--border-radius-md);
  padding: 32px;
  transition: var(--transition-smooth);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--card-shadow);
  position: relative;
  overflow: hidden;
}

.service-pillar-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-navy) 0%, var(--brand-teal) 100%);
  opacity: 0.8;
}

.service-pillar-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(6, 149, 157, 0.4);
}

.service-pillar-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--brand-teal-bg);
  color: var(--brand-teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 20px;
  transition: var(--transition-smooth);
}

.service-pillar-card:hover .service-pillar-icon {
  background: var(--brand-teal);
  color: #ffffff;
  transform: scale(1.05);
}

.deliverables-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 24px 0;
}

.deliverables-list li {
  font-size: 0.92rem;
  color: var(--text-slate);
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.deliverables-list li i {
  color: var(--brand-teal);
  font-size: 0.85rem;
}

/* Graphic Showcase Card Specs */
.graphic-spec-box {
  background: #f8fafc;
  border-radius: 12px;
  padding: 16px;
  border: 1px dashed #cbd5e1;
  margin-top: auto;
}

/* Graphic Design Mockup Card Frame */
.design-mockup-frame {
  border-radius: var(--border-radius-md);
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
  padding: 20px;
  color: #ffffff;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.design-mockup-frame .frame-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.design-mockup-frame .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.design-mockup-frame .dot-red { background: #ef4444; }
.design-mockup-frame .dot-yellow { background: #f59e0b; }
.design-mockup-frame .dot-green { background: #10b981; }

.design-mockup-frame .frame-title {
  font-size: 0.8rem;
  color: #94a3b8;
  margin-left: auto;
  font-family: monospace;
}

/* Button & Utility Adjustments */
.btn-launch-primary {
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-teal) 100%);
  color: #ffffff !important;
  font-weight: 600;
  padding: 14px 30px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 20px rgba(6, 149, 157, 0.25);
  border: none;
  transition: var(--transition-smooth);
}

.btn-launch-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(6, 149, 157, 0.35);
  color: #ffffff !important;
}

.btn-launch-secondary {
  background: #ffffff;
  color: var(--brand-navy) !important;
  border: 1px solid var(--slate-border);
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
  transition: var(--transition-smooth);
}

.btn-launch-secondary:hover {
  border-color: var(--brand-teal);
  color: var(--brand-teal-dark) !important;
  transform: translateY(-2px);
  box-shadow: var(--card-shadow);
}

/* ==========================================================================
   PHASE 2: WIX-STYLE SECTION SYSTEM  (prefix: .wx-)
   Alternating full-bleed sections, feature-row rhythm, big rounded cards,
   pure-CSS product mockups, signature before/after slider, trust marquee.
   ========================================================================== */

/* ---- Section shells & alternating backgrounds ------------------------- */
.wx-section {
  padding: 104px 0;
  position: relative;
  overflow: hidden;
}

.wx-bg-white { background: #ffffff; }

.wx-bg-tint {
  background:
    radial-gradient(circle at 85% 10%, rgba(6, 149, 157, 0.10) 0%, transparent 45%),
    radial-gradient(circle at 12% 90%, rgba(8, 176, 186, 0.08) 0%, transparent 45%),
    var(--slate-light);
}

.wx-bg-soft {
  background: linear-gradient(160deg, #f8fafc 0%, #eef5f6 45%, #ffffff 100%);
}

.wx-bg-navy {
  background:
    radial-gradient(circle at 85% 15%, rgba(8, 176, 186, 0.22) 0%, transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(6, 149, 157, 0.16) 0%, transparent 45%),
    linear-gradient(150deg, var(--dark-obsidian) 0%, var(--brand-navy) 55%, #0b1b30 100%);
  color: rgba(255, 255, 255, 0.82);
}
.wx-bg-navy h1, .wx-bg-navy h2, .wx-bg-navy h3, .wx-bg-navy h4 { color: #ffffff; }
.wx-bg-navy .wx-lead { color: rgba(255, 255, 255, 0.78); }

/* ---- Section heading blocks ------------------------------------------- */
.wx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-teal-dark);
  margin-bottom: 16px;
}
.wx-bg-navy .wx-eyebrow { color: var(--brand-teal-glow); }

.wx-heading {
  font-family: var(--font-headings);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  color: var(--brand-navy);
  margin-bottom: 18px;
}
.wx-bg-navy .wx-heading { color: #ffffff; }

.wx-lead {
  font-family: var(--font-body);
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 560px;
  margin-bottom: 0;
}
.wx-section-head { max-width: 680px; margin: 0 auto 64px; text-align: center; }
.wx-section-head .wx-lead { margin-left: auto; margin-right: auto; }

/* ---- HERO ------------------------------------------------------------- */
.wx-hero {
  position: relative;
  padding: 118px 0 96px;
  background:
    radial-gradient(rgba(6, 149, 157, 0.07) 1.5px, transparent 1.5px),
    radial-gradient(circle at 88% 12%, rgba(8, 176, 186, 0.14) 0%, transparent 42%),
    radial-gradient(circle at 8% 88%, rgba(6, 149, 157, 0.08) 0%, transparent 46%),
    #ffffff;
  background-size: 26px 26px, 100% 100%, 100% 100%, 100% 100%;
  overflow: hidden;
}
.wx-hero h1 {
  font-family: var(--font-headings);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  font-size: clamp(2.5rem, 5.4vw, 4rem);
  color: var(--brand-navy);
  margin-bottom: 22px;
}
.wx-hero-sub {
  font-size: 1.22rem;
  line-height: 1.55;
  color: var(--text-slate);
  max-width: 520px;
  margin-bottom: 34px;
}
.wx-hero-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.wx-text-link {
  font-weight: 700;
  color: var(--brand-navy) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.wx-text-link:hover { color: var(--brand-teal-dark) !important; border-bottom-color: var(--brand-teal); }

/* Bigger, rounder Wix-style primary button variant */
.btn-wx {
  background: var(--brand-navy);
  color: #ffffff !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.02rem;
  padding: 16px 34px;
  border-radius: var(--border-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  box-shadow: 0 10px 24px -8px rgba(18, 35, 58, 0.45);
  transition: var(--transition-smooth);
}
.btn-wx:hover {
  background: var(--brand-teal);
  color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -10px rgba(6, 149, 157, 0.5);
}
.btn-wx-light { background: #ffffff; color: var(--brand-navy) !important; }
.btn-wx-light:hover { background: var(--brand-teal-glow); color: var(--brand-navy) !important; }

/* ---- SIGNATURE BEFORE / AFTER SLIDER ---------------------------------- */
.wx-ba {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3.15;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 80px -24px rgba(18, 35, 58, 0.35);
  border: 1px solid var(--slate-border);
  user-select: none;
  --pos: 52%;
}
.wx-ba__pane { position: absolute; inset: 0; overflow: hidden; }
.wx-ba__pane--after { clip-path: inset(0 0 0 var(--pos)); }
.wx-ba__pane--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.wx-ba__label {
  position: absolute;
  top: 14px;
  z-index: 6;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 30px;
  backdrop-filter: blur(4px);
}
.wx-ba__label--before { left: 14px; background: rgba(15, 23, 42, 0.62); color: #e2e8f0; }
.wx-ba__label--after { right: 14px; background: rgba(6, 149, 157, 0.9); color: #ffffff; }

.wx-ba__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 3px;
  background: #ffffff;
  transform: translateX(-50%);
  z-index: 7;
  box-shadow: 0 0 0 1px rgba(18, 35, 58, 0.12);
}
.wx-ba__grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(18, 35, 58, 0.28);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-teal-dark);
  font-size: 0.9rem;
  cursor: ew-resize;
}
.wx-ba__range {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 8;
}

/* ---- Mini website mockups used inside the slider & feature rows -------- */
.wx-mini {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
}
.wx-mini__bar {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  flex-shrink: 0;
}
.wx-mini__bar i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.wx-mini__bar .d1 { background: #ff5f57; }
.wx-mini__bar .d2 { background: #febc2e; }
.wx-mini__bar .d3 { background: #28c840; }
.wx-mini__url {
  margin-left: 10px;
  font-size: 0.6rem;
  font-family: monospace;
  padding: 2px 10px;
  border-radius: 20px;
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wx-mini__body { flex-grow: 1; padding: 16px; overflow: hidden; }

/* "Before" — generic bland template */
.wx-mini--before { background: #ececee; }
.wx-mini--before .wx-mini__bar { background: #dcdce0; }
.wx-mini--before .wx-mini__url { background: #cfcfd4; color: #8b8b93; }
.wx-mini--before .wx-mini__body { padding: 0; }
.bland-nav { height: 34px; background: #c9c9cf; display: flex; align-items: center; gap: 14px; padding: 0 16px; }
.bland-nav span { width: 34px; height: 7px; border-radius: 3px; background: #a9a9b1; }
.bland-hero { height: 92px; background: #d7d7dc; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; }
.bland-hero .l { width: 58%; height: 10px; border-radius: 4px; background: #b3b3ba; }
.bland-hero .s { width: 40%; height: 7px; border-radius: 4px; background: #c2c2c8; }
.bland-hero .b { width: 78px; height: 20px; border-radius: 4px; background: #9a9aa2; margin-top: 4px; }
.bland-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 16px; }
.bland-grid div { height: 46px; border-radius: 5px; background: #dfdfe4; }

/* "After" — Genesis-built vibrant site */
.wx-mini--after { background: #ffffff; }
.wx-mini--after .wx-mini__bar { background: #f1f5f9; }
.wx-mini--after .wx-mini__url { background: #ffffff; color: var(--brand-teal-dark); border: 1px solid var(--slate-border); }
.wx-mini--after .wx-mini__body { padding: 0; }
.gen-nav {
  height: 34px;
  background: var(--brand-navy);
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
}
.gen-nav .logo { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, var(--brand-teal-glow), var(--brand-teal)); }
.gen-nav span { width: 30px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.5); }
.gen-nav .cta { margin-left: auto; width: 52px; height: 18px; border-radius: 20px; background: var(--brand-teal); }
.gen-hero {
  height: 118px;
  background:
    radial-gradient(circle at 80% 20%, rgba(8,176,186,0.18), transparent 60%),
    linear-gradient(135deg, #ffffff, #eef6f7);
  padding: 16px 18px;
  display: flex; flex-direction: column; justify-content: center; gap: 9px;
}
.gen-hero .h { width: 74%; height: 13px; border-radius: 5px; background: var(--brand-navy); }
.gen-hero .h2 { width: 52%; height: 13px; border-radius: 5px; background: linear-gradient(90deg, var(--brand-teal), var(--brand-teal-bright)); }
.gen-hero .p { width: 60%; height: 6px; border-radius: 3px; background: #b4c0cc; }
.gen-hero .b { width: 84px; height: 22px; border-radius: 6px; background: var(--brand-navy); margin-top: 4px; }
.gen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 18px; }
.gen-grid div {
  height: 40px; border-radius: 8px; background: #ffffff;
  border: 1px solid var(--slate-border);
  box-shadow: 0 6px 14px -8px rgba(6,149,157,0.4);
  position: relative;
}
.gen-grid div::before {
  content: ''; position: absolute; top: 8px; left: 8px;
  width: 14px; height: 14px; border-radius: 5px;
  background: var(--brand-teal-bg);
}

/* Live Genesis-built preview embedded in the compare slider's "after" pane.
   Renders the real demo at a desktop viewport, scaled down like a thumbnail. */
.wx-mini__body--live { padding: 0 !important; position: relative; overflow: hidden; background: #101415; }
.wx-mini--before .wx-mini__body--live { background: #ffffff; }
.wx-mini__live {
  position: absolute; top: 0; left: 0;
  width: 357.14%; height: 357.14%;     /* 1 / 0.28 so scale brings it back to 100% */
  border: 0;
  transform: scale(0.28);
  transform-origin: top left;
  pointer-events: none;                /* let the drag handle receive events */
}

/* ---- TRUST MARQUEE (horizontal scroll strip) -------------------------- */
.wx-marquee {
  border-top: 1px solid var(--slate-border);
  border-bottom: 1px solid var(--slate-border);
  background: #ffffff;
  padding: 22px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.wx-marquee__track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: wxMarquee 34s linear infinite;
}
.wx-marquee:hover .wx-marquee__track { animation-play-state: paused; }
.wx-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--brand-navy);
  background: var(--slate-light);
  border: 1px solid var(--slate-border);
  border-radius: 30px;
  padding: 11px 22px;
  white-space: nowrap;
}
.wx-chip i { color: var(--brand-teal); font-size: 1rem; }
@keyframes wxMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 9px)); }
}

/* ---- FEATURE ROWS ----------------------------------------------------- */
.wx-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.wx-row + .wx-row { margin-top: 108px; }
.wx-row--reverse .wx-row__visual { order: 2; }
.wx-row--reverse .wx-row__copy { order: 1; }

.wx-row__copy .wx-heading { font-size: clamp(1.7rem, 3.2vw, 2.35rem); }
.wx-row__list { list-style: none; padding: 0; margin: 22px 0 30px; }
.wx-row__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.98rem;
  color: var(--text-slate);
  padding: 7px 0;
}
.wx-row__list li i {
  color: var(--brand-teal);
  background: var(--brand-teal-bg);
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem;
  flex-shrink: 0;
}
.wx-bg-navy .wx-row__list li { color: rgba(255,255,255,0.8); }
.wx-bg-navy .wx-row__list li i { background: rgba(8,176,186,0.16); color: var(--brand-teal-glow); }

/* Visual stage that holds a rounded product mockup */
.wx-stage {
  position: relative;
  border-radius: var(--border-radius-lg);
  padding: 34px;
  background: linear-gradient(150deg, #f1f6f7 0%, #e6f0f1 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.wx-bg-tint .wx-stage { background: linear-gradient(150deg, #ffffff 0%, #eef5f6 100%); }
.wx-bg-navy .wx-stage { background: linear-gradient(150deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); }
.wx-stage__frame {
  border-radius: var(--border-radius-md);
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 26px 50px -18px rgba(18, 35, 58, 0.3);
  border: 1px solid rgba(255,255,255,0.6);
  position: relative;
}
.wx-stage__frame .wx-mini { position: relative; }

/* Floating stat pill on a stage */
.wx-float {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border-radius: 14px;
  padding: 11px 16px;
  box-shadow: 0 16px 34px -12px rgba(18, 35, 58, 0.32);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--brand-navy);
  border: 1px solid var(--slate-border);
  animation: floatSlow1 6s ease-in-out infinite;
}
.wx-float i { color: var(--brand-teal); font-size: 1.1rem; }
.wx-float--tr { top: 8px; right: -14px; }
.wx-float--bl { bottom: 10px; left: -16px; animation-name: floatSlow2; }

/* ---- Brand board mockup (logo & identity row) ------------------------- */
.wx-board { padding: 22px; background: #fff; }
.wx-board__logo {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 18px; border-bottom: 1px solid var(--slate-border); margin-bottom: 18px;
}
.wx-board__mark {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg, var(--brand-navy), var(--brand-teal));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-headings); font-weight: 800; font-size: 1.4rem;
}
.wx-board__name { font-family: var(--font-headings); font-weight: 800; color: var(--brand-navy); font-size: 1.15rem; }
.wx-board__name small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); }
.wx-swatches { display: flex; gap: 10px; margin-bottom: 18px; }
.wx-swatch { flex: 1; height: 46px; border-radius: 10px; }
.wx-type-row { display: flex; align-items: baseline; gap: 14px; }
.wx-type-row .big { font-family: var(--font-headings); font-weight: 800; font-size: 2rem; color: var(--brand-navy); line-height: 1; }
.wx-type-row .desc { font-size: 0.72rem; color: var(--text-muted); }

/* ---- Search / local SEO mockup ---------------------------------------- */
.wx-serp { padding: 20px; background: #fff; }
.wx-serp__bar {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--slate-border); border-radius: 30px;
  padding: 9px 16px; margin-bottom: 18px; font-size: 0.8rem; color: var(--text-muted);
}
.wx-serp__bar i { color: var(--brand-teal); }
.wx-serp__result {
  border-radius: 12px; border: 1px solid var(--slate-border);
  padding: 12px 14px; margin-bottom: 12px; position: relative;
}
.wx-serp__result.is-you { border-color: var(--brand-teal); box-shadow: 0 10px 24px -12px rgba(6,149,157,0.5); background: var(--brand-teal-bg); }
.wx-serp__pin { color: var(--brand-teal); font-size: 0.8rem; margin-right: 6px; }
.wx-serp__title { font-weight: 700; color: var(--brand-navy); font-size: 0.9rem; }
.wx-serp__meta { font-size: 0.72rem; color: var(--text-muted); }
.wx-serp__stars { color: #f59e0b; font-size: 0.72rem; letter-spacing: 1px; }
.wx-serp__tag {
  position: absolute; top: 10px; right: 12px;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: var(--brand-teal); padding: 3px 8px; border-radius: 20px;
}

/* ---- Print / flyer mockup --------------------------------------------- */
.wx-print { display: flex; gap: 14px; padding: 22px; background: #fff; align-items: stretch; }
.wx-flyer {
  flex: 1.3; border-radius: 10px; overflow: hidden;
  background: linear-gradient(160deg, var(--brand-navy) 0%, #1b3b5c 100%);
  color: #fff; padding: 16px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 14px 30px -14px rgba(18,35,58,0.5);
}
.wx-flyer .k { font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-teal-glow); font-weight: 700; }
.wx-flyer .t { font-family: var(--font-headings); font-weight: 800; font-size: 1.15rem; line-height: 1.1; }
.wx-flyer .ln { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.28); }
.wx-flyer .ln.short { width: 55%; }
.wx-flyer .pricetag {
  margin-top: auto; align-self: flex-start;
  background: var(--brand-teal); color: #fff; font-weight: 800;
  font-family: var(--font-headings); font-size: 0.95rem; padding: 5px 12px; border-radius: 8px;
}
.wx-cards { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.wx-card-chip {
  flex: 1; border-radius: 10px; background: #fff; border: 1px solid var(--slate-border);
  box-shadow: var(--card-shadow); padding: 12px; display: flex; flex-direction: column; gap: 6px; justify-content: center;
}
.wx-card-chip .mk { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--brand-teal), var(--brand-navy)); }
.wx-card-chip .l { height: 5px; border-radius: 3px; background: #cbd5e1; }
.wx-card-chip .l.w1 { width: 70%; } .wx-card-chip .l.w2 { width: 45%; }

/* ---- Compact "everything" card grid ----------------------------------- */
.wx-suite-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.wx-scard {
  background: #ffffff;
  border: 1px solid var(--slate-border);
  border-radius: var(--border-radius-md);
  padding: 30px 26px;
  box-shadow: var(--card-shadow);
  transition: var(--transition-smooth);
}
.wx-scard:hover { transform: translateY(-6px); border-color: rgba(6,149,157,0.35); box-shadow: var(--card-shadow-hover); }
.wx-scard__icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--brand-teal-bg); color: var(--brand-teal-dark);
  display: flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 18px;
  transition: var(--transition-smooth);
}
.wx-scard:hover .wx-scard__icon { background: var(--brand-teal); color: #fff; transform: rotate(-4deg) scale(1.05); }
.wx-scard h3 { font-size: 1.16rem; margin-bottom: 8px; color: var(--brand-navy); }
.wx-scard p { font-size: 0.92rem; color: var(--text-muted); margin: 0; line-height: 1.55; }

/* ---- Portfolio preview cards ------------------------------------------ */
.wx-work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.wx-work {
  border-radius: var(--border-radius-md);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--slate-border);
  box-shadow: var(--card-shadow);
  transition: var(--transition-smooth);
}
.wx-work:hover { transform: translateY(-8px); box-shadow: var(--card-shadow-hover); border-color: rgba(6,149,157,0.3); }
.wx-work__thumb { height: 176px; position: relative; overflow: hidden; border-bottom: 1px solid var(--slate-border); }
.wx-work__thumb .wx-mini { position: absolute; inset: 0; }
.wx-work__body { padding: 20px 22px; }
.wx-work__body h4 { font-size: 1.05rem; color: var(--brand-navy); margin-bottom: 4px; }
.wx-work__body span { font-size: 0.82rem; color: var(--text-muted); }
.wx-work__tag {
  position: absolute; top: 12px; left: 12px; z-index: 4;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  background: rgba(255,255,255,0.92); color: var(--brand-navy); padding: 4px 10px; border-radius: 20px;
  box-shadow: 0 4px 10px rgba(18,35,58,0.14);
}

/* ---- CTA band --------------------------------------------------------- */
.wx-cta-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.wx-cta-inner .wx-heading { color: #fff; font-size: clamp(2rem, 4.5vw, 3rem); }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 991.98px) {
  .wx-row { grid-template-columns: 1fr; gap: 40px; }
  .wx-row--reverse .wx-row__visual { order: 0; }
  .wx-row + .wx-row { margin-top: 72px; }
  .wx-suite-grid { grid-template-columns: repeat(2, 1fr); }
  .wx-work-grid { grid-template-columns: 1fr; }
  .wx-hero { padding: 90px 0 64px; }
}
@media (max-width: 575.98px) {
  .wx-section { padding: 72px 0; }
  .wx-suite-grid { grid-template-columns: 1fr; }
  .wx-hero-cta { gap: 14px; }
  .wx-float { display: none; }
}

/* ==========================================================================
   PHASE 3: INTERIOR PAGE HELPERS  (services / about / contact)
   ========================================================================== */

/* Centered hero variant for interior pages */
.wx-hero--center { text-align: center; padding: 104px 0 84px; }
.wx-hero--center h1 { margin-left: auto; margin-right: auto; max-width: 15ch; }
.wx-hero--center .wx-hero-sub { margin-left: auto; margin-right: auto; }
.wx-hero--center .wx-hero-cta { justify-content: center; }
.wx-hero--center .badge-launch-speed { margin-left: auto; margin-right: auto; }
/* Portfolio showcase hero: cards lead, so keep the top tight */
.wx-hero--showcase { padding-top: 44px; }

/* Slim inline 3-step strip */
.wx-steps-strip {
  border-top: 1px solid var(--slate-border);
  border-bottom: 1px solid var(--slate-border);
  background: #ffffff;
  padding: 26px 0;
}
.wx-steps-strip .step-mini {
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.wx-steps-strip .step-mini h6 { margin: 0; color: var(--brand-navy); font-weight: 700; font-size: 0.98rem; }
.wx-steps-strip .step-mini span { font-size: 0.82rem; color: var(--text-muted); }

/* Founder / leadership cards */
.wx-founder {
  display: flex; flex-direction: column; height: 100%;
  background: #ffffff; border: 1px solid var(--slate-border);
  border-radius: var(--border-radius-md); box-shadow: var(--card-shadow);
  padding: 34px; transition: var(--transition-smooth);
}
.wx-founder:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-hover); border-color: rgba(6,149,157,0.3); }
.wx-founder__head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.wx-founder__avatar {
  width: 74px; height: 74px; border-radius: 50%; object-fit: cover; object-position: top center;
  flex-shrink: 0; border: 3px solid var(--brand-teal-bg);
}
.wx-founder__avatar--mono {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-navy), var(--brand-teal));
  color: #fff; font-family: var(--font-headings); font-weight: 800; font-size: 1.9rem; border: none;
}
.wx-founder__name { font-family: var(--font-headings); font-weight: 800; color: var(--brand-navy); font-size: 1.3rem; line-height: 1.1; margin-bottom: 3px; }
.wx-founder__role { color: var(--brand-teal-dark); font-weight: 600; font-size: 0.9rem; }
.wx-founder p { font-size: 0.93rem; color: var(--text-slate); line-height: 1.65; margin-bottom: 14px; }

/* Local roots visual (about) */
.wx-local {
  border-radius: var(--border-radius-md); overflow: hidden; background: #fff;
  box-shadow: 0 26px 50px -18px rgba(18,35,58,0.28); border: 1px solid var(--slate-border);
}
.wx-local__map {
  height: 200px; position: relative;
  background:
    radial-gradient(circle at 30% 40%, rgba(8,176,186,0.16) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(6,149,157,0.14) 0%, transparent 40%),
    linear-gradient(160deg, #12233A 0%, #1b3b5c 100%);
}
.wx-local__map::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}
.wx-local__pin {
  position: absolute; transform: translate(-50%, -100%);
  color: #fff; font-size: 0.62rem; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.wx-local__pin i { color: var(--brand-teal-glow); font-size: 1.4rem; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.4)); }
.wx-local__pin.is-primary i { color: #fff; font-size: 1.9rem; }
.wx-local__body { padding: 22px 24px; display: flex; flex-wrap: wrap; gap: 8px; }

/* Delivery-model plan cards (services) */
.wx-plan {
  background: #ffffff; border: 1px solid var(--slate-border);
  border-radius: var(--border-radius-md); box-shadow: var(--card-shadow);
  padding: 34px; height: 100%; transition: var(--transition-smooth); position: relative;
}
.wx-plan:hover { transform: translateY(-6px); box-shadow: var(--card-shadow-hover); }
.wx-plan--featured { border-color: rgba(6,149,157,0.45); box-shadow: var(--card-shadow-hover); }
.wx-plan__tag {
  position: absolute; top: 24px; right: 24px;
  background: var(--brand-teal); color: #fff; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 12px; border-radius: 20px;
}

@media (max-width: 767.98px) {
  .wx-steps-strip .step-mini { justify-content: flex-start; }
  .wx-hero--center h1 { max-width: 100%; }
  /* Pull the coverflow cards closer to the top on phones */
  .wx-hero--center { padding-top: 20px; }
}

/* ==========================================================================
   PAIRING 4 — DM Mono for badges & micro-copy (easy to remove to revert)
   ========================================================================== */
.wx-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.badge-launch-speed {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.wx-plan__tag,
.wx-work__tag,
.wx-serp__tag,
.wx-ba__label {
  font-family: var(--font-mono);
  font-weight: 500;
}

/* ==========================================================================
   PHASE 4: PORTFOLIO GALLERY  (Wix-style filterable grid of preview cards)
   ========================================================================== */

/* Reusable theme palettes for the mockups (add one alongside .psite/.plogo/.pprint) */
.pt-teal  { --pc-dark:#12233A; --pc-accent:#06959d; --pc-soft:#eef6f7; }
.pt-warm  { --pc-dark:#6b3410; --pc-accent:#d98a3a; --pc-soft:#fbf1e6; }
.pt-slate { --pc-dark:#1e293b; --pc-accent:#0284c7; --pc-soft:#eaf1f8; }
.pt-plum  { --pc-dark:#3b1a4a; --pc-accent:#8b2d8b; --pc-soft:#f3e9f5; }
.pt-green { --pc-dark:#14331f; --pc-accent:#2d7a4a; --pc-soft:#e8f4ec; }
.pt-rose  { --pc-dark:#5a1030; --pc-accent:#c02d6b; --pc-soft:#fbe9f0; }
.pt-amber { --pc-dark:#7a3d0a; --pc-accent:#e0821e; --pc-soft:#fdf1e3; }
.pt-sky   { --pc-dark:#0e3a4a; --pc-accent:#0ea5b7; --pc-soft:#e6f4f7; }
.pt-steel { --pc-dark:#26303b; --pc-accent:#5b7a99; --pc-soft:#eef1f5; }
.pt-gold  { --pc-dark:#1a2b4a; --pc-accent:#c9a24b; --pc-soft:#f6f1e6; }

/* Filter bar */
.wx-filter { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:52px; }
.wx-filter__btn {
  font-family:var(--font-mono); font-size:0.8rem; font-weight:500;
  padding:9px 20px; border-radius:30px; border:1px solid var(--slate-border);
  background:#fff; color:var(--brand-navy); cursor:pointer; transition:var(--transition-smooth);
}
.wx-filter__btn:hover { border-color:var(--brand-teal); color:var(--brand-teal-dark); }
.wx-filter__btn.active { background:var(--brand-navy); color:#fff; border-color:var(--brand-navy); }

/* Grid + cards */
.wx-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.wx-pcard { display:flex; flex-direction:column; }
.wx-pcard.is-hidden { display:none; }
.wx-pcard__frame {
  aspect-ratio:4/5; border-radius:var(--border-radius-md); overflow:hidden; background:#fff;
  border:1px solid var(--slate-border); box-shadow:var(--card-shadow); position:relative;
  transition:var(--transition-smooth);
}
.wx-pcard:hover .wx-pcard__frame { transform:translateY(-8px); box-shadow:var(--card-shadow-hover); border-color:rgba(6,149,157,0.3); }
.wx-pcard__tag {
  position:absolute; top:12px; left:12px; z-index:4;
  font-family:var(--font-mono); font-size:0.6rem; font-weight:500; text-transform:uppercase; letter-spacing:0.04em;
  background:rgba(255,255,255,0.92); color:var(--brand-navy); padding:4px 10px; border-radius:20px;
  box-shadow:0 4px 10px rgba(18,35,58,0.14);
}
.wx-pcard__cap { padding:16px 4px 0; }
.wx-pcard__kicker {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:0.66rem; font-weight:500;
  text-transform:uppercase; letter-spacing:0.05em; color:var(--brand-teal-dark); margin-bottom:6px;
}
.wx-pcard__kicker i { color:var(--brand-teal); }
.wx-pcard__cap h4 { font-size:1.05rem; color:var(--brand-navy); margin-bottom:3px; }
.wx-pcard__cap p { font-size:0.84rem; color:var(--text-muted); margin:0; line-height:1.45; }
.wx-pcard__cap span { font-size:0.84rem; color:var(--text-muted); }

/* Real screenshot filling a card frame (images are 4:5 = exact frame ratio, no crop) */
.wx-pcard__shot {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center; display:block;
}

/* Full-site website mockup */
.psite { position:absolute; inset:0; display:flex; flex-direction:column; background:#fff; }
.psite__bar { height:22px; background:#f1f5f9; display:flex; align-items:center; gap:4px; padding:0 10px; flex-shrink:0; }
.psite__bar i { width:6px; height:6px; border-radius:50%; background:#cbd5e1; }
.psite__nav { height:32px; background:var(--pc-dark,#12233A); display:flex; align-items:center; gap:8px; padding:0 14px; flex-shrink:0; }
.psite__nav .lg { width:18px; height:18px; border-radius:5px; background:var(--pc-accent,#06959d); }
.psite__nav .ln { width:26px; height:5px; border-radius:3px; background:rgba(255,255,255,0.4); }
.psite__nav .btn { margin-left:auto; width:44px; height:15px; border-radius:20px; background:var(--pc-accent,#06959d); }
.psite__hero { padding:20px 16px; background:linear-gradient(135deg,#fff,var(--pc-soft,#eef6f7)); display:flex; flex-direction:column; gap:8px; }
.psite__hero .h { width:82%; height:13px; border-radius:4px; background:var(--pc-dark,#12233A); }
.psite__hero .h.a { width:58%; background:var(--pc-accent,#06959d); }
.psite__hero .p { width:66%; height:6px; border-radius:3px; background:#c2ccd6; margin-top:2px; }
.psite__hero .b { width:70px; height:20px; border-radius:6px; background:var(--pc-dark,#12233A); margin-top:6px; }
.psite__strip { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding:14px 16px; }
.psite__strip div { aspect-ratio:1/1; border-radius:8px; background:var(--pc-soft,#eef6f7); border:1px solid rgba(0,0,0,0.05); }
.psite__foot { margin-top:auto; height:36px; background:var(--pc-dark,#12233A); }

/* Logo / brand-identity mockup */
.plogo { position:absolute; inset:0; display:flex; flex-direction:column; }
.plogo__stage { flex:1.5; display:flex; align-items:center; justify-content:center; background:var(--pc-soft,#eef6f7); }
.plogo__mark {
  width:78px; height:78px; border-radius:22px;
  background:linear-gradient(135deg,var(--pc-dark,#12233A),var(--pc-accent,#06959d));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-headings); font-weight:800; font-size:2.6rem;
  box-shadow:0 14px 30px -10px rgba(0,0,0,0.4);
}
.plogo__meta { flex:1; padding:20px 18px; background:#fff; display:flex; flex-direction:column; gap:14px; justify-content:center; }
.plogo__sw { display:flex; gap:8px; }
.plogo__sw span { flex:1; height:24px; border-radius:6px; }
.plogo__type { font-family:var(--font-headings); font-weight:800; color:var(--pc-dark,#12233A); font-size:1.7rem; letter-spacing:-0.01em; }

/* Print / collateral mockup */
.pprint { position:absolute; inset:0; background:var(--pc-soft,#eef6f7); display:flex; align-items:center; justify-content:center; gap:12px; padding:24px; }
.pprint__flyer {
  width:48%; aspect-ratio:3/4; border-radius:9px;
  background:linear-gradient(160deg,var(--pc-dark,#12233A),var(--pc-accent,#06959d));
  box-shadow:0 16px 30px -12px rgba(0,0,0,0.4); padding:14px; display:flex; flex-direction:column; gap:7px;
}
.pprint__flyer .k { width:42%; height:6px; border-radius:3px; background:rgba(255,255,255,0.65); }
.pprint__flyer .t { width:76%; height:11px; border-radius:4px; background:#fff; }
.pprint__flyer .t2 { width:56%; height:11px; border-radius:4px; background:#fff; }
.pprint__flyer .tag { margin-top:auto; width:46px; height:18px; border-radius:5px; background:#fff; }
.pprint__cards { width:34%; display:flex; flex-direction:column; gap:10px; }
.pprint__cards div { aspect-ratio:16/10; border-radius:7px; background:#fff; box-shadow:0 8px 16px -8px rgba(0,0,0,0.25); }

/* Industry tag (icon + label) sits on the mockup */
.wx-pcard__tag i { margin-right:6px; color:var(--brand-teal); }

/* "Any industry" CTA tile that fills a grid slot */
.wx-pcard--cta .wx-pcard__frame {
  background:
    radial-gradient(circle at 80% 15%, rgba(8,176,186,0.28) 0%, transparent 55%),
    linear-gradient(150deg, var(--dark-obsidian) 0%, var(--brand-navy) 100%);
  border:none; display:flex; align-items:center; justify-content:center; text-align:center; padding:34px;
}
.wx-pcard__cta-inner i.big { font-size:2.2rem; color:var(--brand-teal-glow); margin-bottom:16px; }
.wx-pcard__cta-inner h4 { color:#fff; font-family:var(--font-headings); font-weight:800; font-size:1.35rem; line-height:1.2; margin-bottom:12px; }
.wx-pcard__cta-inner p { color:rgba(255,255,255,0.75); font-size:0.9rem; line-height:1.55; margin-bottom:20px; }

@media (max-width: 991.98px) { .wx-gallery { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 575.98px) { .wx-gallery { grid-template-columns:1fr; max-width:340px; margin:0 auto; } }

/* ---- Filterable 3D coverflow carousel (portfolio showcase) ------------- */
.wx-showcase { margin-top:8px; }
.wx-deck-wrap { margin-top:14px; }
.wx-deck { position:relative; height:320px; max-width:980px; margin:0 auto; perspective:1900px; }
.wx-deck__stage { position:absolute; inset:0; transform-style:preserve-3d; touch-action:pan-y; cursor:grab; }
.wx-deck__stage.is-grabbing, .wx-deck__stage.is-grabbing .wx-deck__card { cursor:grabbing; }

/* ==========================================================================
   NAV — Services dropdown (jump straight to a section)
   ========================================================================== */
.wx-nav-dropdown {
  border: 1px solid var(--slate-border);
  border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgba(18, 35, 58, 0.28);
  padding: 8px;
  min-width: 264px;
}
.wx-nav-dropdown .dropdown-item {
  border-radius: 8px; font-size: 0.92rem; font-weight: 500; padding: 9px 12px;
  color: var(--brand-navy); display: flex; align-items: center; gap: 10px;
}
.wx-nav-dropdown .dropdown-item i { width: 18px; text-align: center; color: var(--brand-teal-dark); }
.wx-nav-dropdown .dropdown-item:hover, .wx-nav-dropdown .dropdown-item:focus {
  background: var(--brand-teal-bg); color: var(--brand-teal-dark);
}
.wx-nav-dropdown .dropdown-divider { margin: 6px; }
@media (min-width: 992px) {
  /* open on hover on desktop; mobile keeps tap-to-open */
  .navbar-nav .dropdown:hover > .wx-nav-dropdown { display: block; }
  .wx-nav-dropdown { margin-top: 0; }
}
/* anchored service sections land clear of the sticky navbar */
#web, #branding, #print, #seo, #care { scroll-margin-top: 88px; }

/* "Get Started" nav CTA button — compact version of btn-wx */
.btn-wx-nav { padding: 8px 18px; font-size: 0.9rem; }
@media (max-width: 991.98px) {
  .btn-wx-nav { display: inline-flex; width: auto; }
}
.wx-deck__card {
  --tx:0px; --ty:0px; --ry:0deg; --sc:1;
  position:absolute; top:50%; left:50%;
  width:240px; aspect-ratio:4/5;
  border-radius:16px; overflow:hidden; background:#fff;
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 30px 60px -22px rgba(18,35,58,0.45);
  transform: translate(-50%,-50%) translate(var(--tx),var(--ty)) rotateY(var(--ry)) scale(var(--sc));
  transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .5s ease, box-shadow .4s ease;
  opacity:0; will-change:transform, opacity; cursor:pointer;
}
.wx-deck__card img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; pointer-events:none; }
.wx-deck__card.is-gone { display:none; }
.wx-deck__card.p0  { --tx:0px;    --ry:0deg;   --sc:1.06; opacity:1; z-index:6; }
.wx-deck__card.pl1 { --tx:-202px; --ry:27deg;  --sc:.9;  opacity:1; z-index:5; }
.wx-deck__card.pr1 { --tx:202px;  --ry:-27deg; --sc:.9;  opacity:1; z-index:5; }
.wx-deck__card.pl2 { --tx:-378px; --ry:41deg;  --sc:.78; opacity:1; z-index:3; }
.wx-deck__card.pr2 { --tx:378px;  --ry:-41deg; --sc:.78; opacity:1; z-index:3; }
.wx-deck__card.hl  { --tx:-478px; --ry:52deg;  --sc:.6;  opacity:0; z-index:1; pointer-events:none; }
.wx-deck__card.hr  { --tx:478px;  --ry:-52deg; --sc:.6;  opacity:0; z-index:1; pointer-events:none; }
.wx-deck__card.p0:hover { --ty:-12px; box-shadow:0 46px 84px -20px rgba(6,149,157,0.5); }

.wx-deck__nav {
  position:absolute; top:50%; transform:translateY(-50%); z-index:20;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--slate-border);
  background:#fff; color:var(--brand-navy); cursor:pointer; box-shadow:var(--card-shadow);
  display:flex; align-items:center; justify-content:center; transition:var(--transition-smooth);
}
.wx-deck__nav:hover { background:var(--brand-navy); color:#fff; border-color:var(--brand-navy); }
.wx-deck__nav--prev { left:2px; }
.wx-deck__nav--next { right:2px; }
.wx-deck__cap { text-align:center; margin-top:24px; font-family:var(--font-mono); font-size:0.8rem; color:var(--text-muted); min-height:1.2em; }
.wx-deck__cap strong { color:var(--brand-navy); font-weight:600; }

@media (max-width: 991.98px) {
  .wx-deck { height:300px; }
  .wx-deck__card { width:196px; }
  .wx-deck__card.pl2, .wx-deck__card.pr2 { opacity:0; z-index:1; pointer-events:none; }
  .wx-deck__card.pl1 { --tx:-154px; --ry:28deg; }
  .wx-deck__card.pr1 { --tx:154px;  --ry:-28deg; }
}
@media (max-width: 575.98px) {
  /* Tighter deck so the cards sit closer to the top on phones */
  .wx-showcase { margin-top:0; }
  .wx-deck-wrap { margin-top:6px; }
  .wx-deck { height:250px; }
  .wx-deck__card { width:164px; }
  .wx-deck__card.pl1 { --tx:-102px; --ry:30deg; --sc:.84; }
  .wx-deck__card.pr1 { --tx:102px;  --ry:-30deg; --sc:.84; }
  .wx-deck__nav { width:40px; height:40px; }
  .wx-deck__nav--prev { left:-6px; } .wx-deck__nav--next { right:-6px; }
}
@media (prefers-reduced-motion: reduce) { .wx-deck__card { transition:opacity .3s ease; } }

/* ---- "View live site" overlay on cards that have a demo ---------------- */
.wx-pcard__live {
  position:absolute; inset:0; z-index:7;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(18,35,58,0.55); color:#fff;
  font-family:var(--font-body); font-weight:700; font-size:0.92rem;
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.wx-pcard[data-demo] { cursor:pointer; }
.wx-pcard[data-demo]:hover .wx-pcard__live { opacity:1; }
/* On the carousel, only the centered card shows/uses the overlay */
.wx-deck__card .wx-pcard__live { display:none; }
.wx-deck__card.p0[data-demo] { cursor:pointer; }
.wx-deck__card.p0 .wx-pcard__live { display:flex; }
.wx-deck__card.p0[data-demo]:hover .wx-pcard__live { opacity:1; }

/* ---- Live-site preview modal ------------------------------------------ */
body.wx-noscroll { overflow:hidden; }
.wx-modal { position:fixed; inset:0; z-index:3000; display:none; } /* above Bootstrap sticky-top (1020) */
.wx-modal.is-open { display:block; }
.wx-modal__backdrop { position:absolute; inset:0; background:rgba(15,23,42,0.62); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.wx-modal__panel {
  position:absolute; inset:3vh 3vw; background:#fff; border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 40px 90px -20px rgba(0,0,0,0.55);
  animation:wxModalIn .3s cubic-bezier(.4,0,.2,1);
}
@keyframes wxModalIn { from { opacity:0; transform:translateY(14px) scale(.99); } to { opacity:1; transform:none; } }
.wx-modal__bar { display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--slate-border); background:var(--slate-light); flex-shrink:0; }
.wx-modal__dots { display:flex; gap:6px; }
.wx-modal__dots i { width:11px; height:11px; border-radius:50%; display:block; }
.wx-modal__dots i:nth-child(1) { background:#ff5f57; }
.wx-modal__dots i:nth-child(2) { background:#febc2e; }
.wx-modal__dots i:nth-child(3) { background:#28c840; }
.wx-modal__title { font-family:var(--font-mono); font-size:0.8rem; color:var(--brand-navy); font-weight:500; margin-left:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wx-modal__actions { margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0; }
.wx-modal__open { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-weight:600; font-size:0.82rem; color:#fff !important; background:var(--brand-navy); padding:9px 15px; border-radius:8px; text-decoration:none; transition:var(--transition-smooth); }
.wx-modal__open:hover { background:var(--brand-teal); color:#fff !important; }
.wx-modal__close { width:36px; height:36px; border-radius:50%; border:1px solid var(--slate-border); background:#fff; color:var(--brand-navy); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--transition-smooth); }
.wx-modal__close:hover { background:var(--brand-navy); color:#fff; }
.wx-modal__frame { flex-grow:1; width:100%; border:0; background:#fff; }
@media (max-width: 575.98px) {
  .wx-modal__panel { inset:0; border-radius:0; }
  .wx-modal__open span { display:none; }
}

/* ==========================================================================
   PROJECT INTAKE FORM (/start.html)
   ========================================================================== */
.intake-section { padding-top: 32px; margin-top: 32px; border-top: 1px solid var(--slate-border); }
.intake-section:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.intake-section__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.intake-section__num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand-navy); color: #fff;
  font-family: var(--font-mono); font-weight: 600; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
}
.intake-section__title { font-family: var(--font-headings); font-weight: 700; font-size: 1.2rem; color: var(--brand-navy); margin: 0 0 2px; }
.intake-section__sub { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

/* Checkbox "cards" */
.intake-check {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 14px; border: 1px solid var(--slate-border); border-radius: var(--border-radius-md);
  background: #fff; cursor: pointer; transition: var(--transition-smooth);
  font-size: 0.9rem; color: var(--brand-navy); margin: 0;
}
.intake-check--sm { padding: 8px 12px; font-size: 0.85rem; }
.intake-check:hover { border-color: var(--brand-teal); background: var(--brand-teal-bg); }
.intake-check input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--brand-teal-dark); cursor: pointer; }
.intake-check span i { color: var(--brand-teal-dark); margin-right: 4px; width: 18px; text-align: center; }
.intake-check:has(input:checked) { border-color: var(--brand-teal-dark); background: var(--brand-teal-bg); box-shadow: inset 0 0 0 1px var(--brand-teal-dark); font-weight: 600; }

/* ==========================================================================
   PER-SERVICE ACCENT COLORS — reusable across services.html AND the homepage.
   Add to a section:  class="wx-section … svc-accent acc-brand"
   Navy + teal still frame the site; the accent only tints the eyebrow,
   the check bullets, the "explore" link, and any suite-card icons.
   ========================================================================== */
.acc-web   { --acc: var(--svc-web); }
.acc-brand { --acc: var(--svc-brand); }
.acc-print { --acc: var(--svc-print); }
.acc-seo   { --acc: #34d081; }   /* brighter emerald — SEO sections sit on navy */
.acc-care  { --acc: var(--svc-care); }

.svc-accent .wx-eyebrow { color: var(--acc); }
.svc-accent .wx-row__list li i { color: var(--acc); }
.svc-accent .wx-text-link { color: var(--acc) !important; }
.svc-accent .wx-scard__icon { color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent); }
.svc-accent .wx-scard:hover .wx-scard__icon { background: var(--acc); color: #fff; }

/* ==========================================================================
   FAST-LAUNCH EFFECT  (homepage "A faster path to launch" section)
   Looping rocket lift-off + exhaust trail + speed streaks + a "zip" underline.
   ========================================================================== */
.wx-launchpad { position: relative; width: 96px; height: 82px; margin: 0 auto 4px; }
.wx-launchpad__rocket {
  position: absolute; left: 50%; bottom: 4px;
  font-size: 1.7rem; color: var(--brand-teal);
  transform: translateX(-50%) rotate(-45deg);
  animation: wx-liftoff 2.8s cubic-bezier(.45, 0, .2, 1) infinite;
}
.wx-launchpad__rocket::after {   /* exhaust trail */
  content: ''; position: absolute; left: 50%; top: 100%;
  width: 3px; height: 22px; transform: translateX(-50%);
  background: linear-gradient(var(--brand-teal-glow), rgba(20, 184, 166, 0));
  border-radius: 3px;
}
.wx-launchpad__streak {
  position: absolute; bottom: 12px; width: 2px; height: 13px; border-radius: 2px;
  background: var(--brand-teal-glow); opacity: 0;
}
.wx-launchpad__streak.a { left: calc(50% - 13px); animation: wx-streak 2.8s ease-in infinite; }
.wx-launchpad__streak.b { left: calc(50% + 11px); animation: wx-streak 2.8s ease-in .12s infinite; }

@keyframes wx-liftoff {
  0%, 8%  { transform: translateX(-50%) translateY(0) rotate(-45deg); opacity: 0; }
  18%     { opacity: 1; }
  72%     { transform: translateX(-50%) translateY(-56px) rotate(-45deg); opacity: 1; }
  100%    { transform: translateX(-50%) translateY(-78px) rotate(-45deg); opacity: 0; }
}
@keyframes wx-streak {
  0%, 14% { opacity: 0; transform: translateY(0); }
  24%     { opacity: .8; }
  55%     { opacity: 0; transform: translateY(20px); }
  100%    { opacity: 0; transform: translateY(20px); }
}

/* "zip" underline under the word "launch" */
.wx-launchword { position: relative; }
.wx-launchword::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--brand-teal-glow), transparent);
  transform: scaleX(0); transform-origin: left; opacity: 0;
  animation: wx-zip 2.8s ease-in-out infinite;
}
@keyframes wx-zip {
  0%   { transform: scaleX(0); transform-origin: left; opacity: 0; }
  20%  { opacity: 1; }
  55%  { transform: scaleX(1); transform-origin: left; opacity: 1; }
  70%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wx-launchpad__rocket { animation: none; opacity: 1; }
  .wx-launchpad__streak { display: none; }
  .wx-launchword::after { animation: none; transform: scaleX(1); opacity: .55; }
}

/* ==========================================================================
   HERO DYNAMIC BACKGROUND (homepage) — aurora blobs that fade in, drift,
   and parallax on scroll. Uses the brand + service-accent hues.
   ========================================================================== */
.wx-hero__bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.wx-hero > .container { position: relative; z-index: 1; }
.wx-hero__par { position: absolute; will-change: transform; }
.wx-hero__par.p1 { top: -150px; right: -70px; }
.wx-hero__par.p2 { bottom: -180px; left: -110px; }
.wx-hero__par.p3 { top: 26%; left: 50%; }
.wx-hero__blob { display: block; border-radius: 50%; filter: blur(64px); opacity: 0; will-change: transform, opacity; }
.wx-hero__blob.b1 { width: 520px; height: 520px; background: radial-gradient(circle, rgba(6,149,157,0.30), transparent 68%);   animation: wx-blobin 1.3s ease .15s forwards, wx-drift 20s ease-in-out 1.5s infinite; }
.wx-hero__blob.b2 { width: 460px; height: 460px; background: radial-gradient(circle, rgba(109,90,230,0.20), transparent 68%); animation: wx-blobin 1.3s ease .35s forwards, wx-drift 26s ease-in-out 1.7s infinite reverse; }
.wx-hero__blob.b3 { width: 380px; height: 380px; background: radial-gradient(circle, rgba(242,109,91,0.15), transparent 68%);  animation: wx-blobin 1.3s ease .55s forwards, wx-drift 23s ease-in-out 1.9s infinite; }
@keyframes wx-blobin { from { opacity: 0; } to { opacity: 1; } }
@keyframes wx-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(30px, -24px) scale(1.05); }
  66%      { transform: translate(-26px, 18px) scale(0.97); }
}
@media (max-width: 767.98px) {
  .wx-hero__blob { filter: blur(48px); }
  .wx-hero__blob.b1 { width: 330px; height: 330px; }
  .wx-hero__blob.b2 { width: 300px; height: 300px; }
  .wx-hero__blob.b3 { width: 250px; height: 250px; }
}
@media (prefers-reduced-motion: reduce) {
  .wx-hero__blob { animation: wx-blobin 0.6s ease forwards !important; }
  .wx-hero__par { transform: none !important; }
}

/* ==========================================================================
   HERO TITLE — staggered word reveal on load, ending on the shimmer phrase
   ========================================================================== */
.wx-hero__title .hw {
  display: inline-block;
  opacity: 0;
  animation: wx-word 0.6s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 150ms);
}
.wx-hero__title .hw--grad { padding-bottom: 0.05em; }   /* room for the gradient descenders */
.wx-hero__title .gradient-text { animation-duration: 4.5s; }   /* livelier shimmer on the focal phrase */
@keyframes wx-word {
  from { opacity: 0; transform: translateY(0.5em); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);     filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wx-hero__title .hw { animation: none; opacity: 1; transform: none; filter: none; }
}