/* cms-theme: evalvi-theme (site evalvi.com) */
/* Theme foundation: theme.css (loaded first in FOUNDATION_FILES). No duplicate :root / .dark / @theme here. */


/* tailwind: in app bundle */
/* tw-animate: in app bundle */
@custom-variant dark (&:is(.dark *));

/* ---------------------------------------------------------------------------
   :root — global design tokens
   --------------------------------------------------------------------------- */
:root {
  --background: oklch(0.99 0 0);
  --foreground: oklch(0.13 0.02 280);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.13 0.02 280);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.13 0.02 280);
  --primary: oklch(0.5 0.2 265);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.55 0.22 305);
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.96 0.01 280);
  --muted-foreground: oklch(0.45 0.02 280);
  --accent: oklch(0.65 0.18 285);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.01 280);
  --input: oklch(0.92 0.01 280);
  --ring: oklch(0.5 0.2 265);
  --chart-1: oklch(0.5 0.2 265);
  --chart-2: oklch(0.55 0.22 305);
  --chart-3: oklch(0.65 0.18 285);
  --chart-4: oklch(0.7 0.15 250);
  --chart-5: oklch(0.6 0.2 290);
  --radius: 0.75rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.5 0.2 265);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.5 0.2 265);
  /* Bar/CTA gradients — stops inherit from app :root or fall back here */
  --gradient-from: oklch(0.5 0.2 265);
  --gradient-via: oklch(0.65 0.18 285);
  --gradient-to: oklch(0.55 0.22 305);
  --gradient-theme-bar: linear-gradient(to right, var(--gradient-from), var(--gradient-via), var(--gradient-to));
  --gradient-theme-cta: linear-gradient(to right, var(--gradient-from), var(--gradient-to));
  --gradient-theme-cta-reverse: linear-gradient(to right, var(--gradient-to), var(--gradient-from));
  /* Matches Tailwind: bg-gradient-to-br from-[var(--gradient-from)] to-[var(--gradient-to)] */
  --gradient-theme-icon: linear-gradient(to bottom right, var(--gradient-from), var(--gradient-to));
  /* Header nav — global (controls/navigationmenu_extension.css); resolves via --primary-foreground in light/dark */
  --headernav-cta-bg-start: var(--gradient-from);
  --headernav-cta-bg-end: var(--gradient-to);
  --headernav-cta-text: var(--primary-foreground);
  --headernav-cta-shadow: 0 4px 14px color-mix(in srgb, var(--gradient-from) 30%, transparent);
  --headernav-icon-shadow:
    0 10px 15px -3px color-mix(in oklch, var(--gradient-from) 20%, transparent),
    0 4px 6px -4px color-mix(in oklch, var(--gradient-from) 15%, transparent);
}

/* ---------------------------------------------------------------------------
   .dark — dark mode token overrides
   --------------------------------------------------------------------------- */
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

/* ---------------------------------------------------------------------------
   @theme inline — Tailwind theme bridge (utilities / @apply)
   --------------------------------------------------------------------------- */
@theme inline {
  --font-sans: var(--font-plus-jakarta), system-ui, sans-serif;
  --font-heading: var(--font-outfit), system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

/* ---------------------------------------------------------------------------
   Base layer, keyframes, utilities, glass / gradient helpers
   --------------------------------------------------------------------------- */
@layer base {
  body {
    @apply bg-background text-foreground;
    letter-spacing: 0.01em;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes float-delayed {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px color-mix(in oklch, var(--gradient-from) 30%, transparent); }
  50% { box-shadow: 0 0 40px color-mix(in oklch, var(--gradient-to) 50%, transparent); }
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float-delayed 4s ease-in-out infinite;
}

.animate-shimmer {
  animation: shimmer 2s linear infinite;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  background-size: 200% 100%;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

.animate-gradient {
  animation: gradient-shift 3s ease infinite;
  background-size: 200% 200%;
}

.font-heading {
  font-family: var(--font-heading);
  letter-spacing: 0.015em;
}

/* Full-width bar gradient (hero bands, solid headers) */
.bg-gradient-theme {
  background: var(--gradient-theme-bar);
}

/* CTA / pill / active state — two-stop variant */
.bg-gradient-theme-cta {
  background: var(--gradient-theme-cta);
}

.bg-gradient-theme-cta-reverse {
  background: var(--gradient-theme-cta-reverse);
}

/* Icon tile / small surfaces — diagonal */
.bg-gradient-theme-icon {
  background: var(--gradient-theme-icon);
}

/* Soft gradient overlay at 50% opacity — add to header wrapper; direct children need stacking */
.bg-gradient-theme-soft {
  position: relative;
}
.bg-gradient-theme-soft::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  background: var(--gradient-theme-bar);
  pointer-events: none;
}
.bg-gradient-theme-soft > * {
  position: relative;
  z-index: 1;
}

/* Square grid lines (thicker lines, larger cells) */
.bg-square-lines {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 2px, transparent 2px);
  background-size: 48px 48px;
}

/* Gradient + grid together (when both bg-gradient-theme and bg-square-lines are used) */
.bg-gradient-theme.bg-square-lines {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
    var(--gradient-theme-bar);
  background-size: 48px 48px, 48px 48px, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
}

/* .cms-admin-header / .cms-modal-header — defined once in app/globals.css */

/* Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/**
 * Header / nav bar: frosted glass + purple→blue bar gradient (same as legacy headernav tint).
 * Use on <header> (e.g. className="glass-gradient-header").
 *
 * Related theme classes (no glass):
 *   .bg-gradient-theme        — solid full bar gradient
 *   .bg-gradient-theme-soft   — 50% gradient overlay only (::before); pair with your own bg
 *   .glass                    — frost only, no gradient
 */
.glass-gradient-header {
  position: relative;
  isolation: isolate;
  background: color-mix(in oklch, var(--background) 78%, transparent);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border-bottom: 1px solid color-mix(in oklch, var(--gradient-from) 12%, var(--border));
  box-shadow:
    0 1px 0 color-mix(in oklch, white 40%, transparent) inset,
    0 6px 28px -6px color-mix(in oklch, var(--gradient-from) 12%, transparent);
}
.glass-gradient-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  background: var(--gradient-theme-bar);
  pointer-events: none;
}
.glass-gradient-header > * {
  position: relative;
  z-index: 1;
}

.dark .glass-gradient-header {
  background: color-mix(in oklch, var(--background) 88%, transparent);
  box-shadow:
    0 1px 0 color-mix(in oklch, white 8%, transparent) inset,
    0 8px 32px -8px oklch(0 0 0 / 0.35);
}
.dark .glass-gradient-header::before {
  opacity: 0.38;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}


/**
 * Headernav1 & NavigationMenu controls — use theme gradient tokens from theme.css
 * (--gradient-theme-bar, --gradient-theme-cta, --gradient-theme-icon, etc.)
 */

.pe-control-headernav1,
.pe-control-navigation-menu {
  background: transparent;
  /* Align with base-theme headernav tokens (uses --gradient-start/end); evalvi uses --gradient-from/to */
  --headernav-cta-bg-start: var(--gradient-from);
  --headernav-cta-bg-end: var(--gradient-to);
  --headernav-cta-text: var(--primary-foreground);
  --headernav-cta-shadow: 0 4px 14px color-mix(in srgb, var(--gradient-from) 30%, transparent);
  /* shadow-lg + shadow-indigo-500/20 style, theme-driven */
  --headernav-icon-shadow:
    0 10px 15px -3px color-mix(in oklch, var(--gradient-from) 20%, transparent),
    0 4px 6px -4px color-mix(in oklch, var(--gradient-from) 15%, transparent);
}

/*
 * Active top-level menu item — same diagonal as .headernav1-icon-box.
 * Use --gradient-from/--gradient-to (also in app globals); do not use --gradient-theme-icon
 * here — that token is only in theme.css and can be missing if the stylesheet is partial.
 * Split background-image vs background-color so Tailwind hover:bg-* does not replace the gradient.
 */
.pe-control-headernav1 a.headernav1-item-active,
.pe-control-navigation-menu a.navigation-menu-item-active {
  background-color: transparent !important;
  background-image: linear-gradient(to bottom right, var(--gradient-from), var(--gradient-to)) !important;
  color: var(--headernav-cta-text) !important;
  box-shadow: var(--headernav-icon-shadow);
}
.pe-control-headernav1 a.headernav1-item-active:hover,
.pe-control-headernav1 a.headernav1-item-active:focus-visible,
.pe-control-navigation-menu a.navigation-menu-item-active:hover,
.pe-control-navigation-menu a.navigation-menu-item-active:focus-visible {
  background-color: transparent !important;
  background-image: linear-gradient(to bottom right, var(--gradient-from), var(--gradient-to)) !important;
  color: var(--headernav-cta-text) !important;
}

/* CTA / Get started buttons */
.pe-control-headernav1 .headernav1-cta {
  background: var(--gradient-theme-cta);
  color: var(--headernav-cta-text);
  box-shadow: var(--headernav-cta-shadow);
}
.pe-control-headernav1 .headernav1-cta:hover {
  background: var(--gradient-theme-cta);
  color: var(--headernav-cta-text);
}
.pe-control-headernav1 .headernav1-cta-bg {
  background: var(--gradient-theme-cta);
}
.pe-control-headernav1 .headernav1-cta-bg-hover {
  background: var(--gradient-theme-cta-reverse);
}

/* Submenu icon boxes — same as bg-gradient-to-br from-[var(--gradient-from)] to-[var(--gradient-to)] */
.pe-control-headernav1 .headernav1-icon-box,
.pe-control-navigation-menu .navigation-menu-icon-box {
  background: linear-gradient(to bottom right, var(--gradient-from), var(--gradient-to)) !important;
  color: var(--headernav-cta-text) !important;
  box-shadow: var(--headernav-icon-shadow);
}

/* Header inherits parent background (add .glass-gradient-header on <header> for frosted bar) */
.pe-control-headernav1 > header,
.pe-control-navigation-menu > header {
  position: relative;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}
.pe-control-headernav1 > header > *,
.pe-control-navigation-menu > header > * {
  position: relative;
  z-index: 1;
}
/**
 * Headernav1 control — minimal overrides.
 * Layout and colors use Tailwind in the component. Only icon backgrounds
 * (referenced by config icon class names) are defined here.
 * Add more .nav-icon-* classes in theme overrides as needed.
 */

/* Icon box background images — use in config: e.g. nav-icon-chart, nav-icon-automation */
.nav-icon-chart::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' stroke='%23ffffff' stroke-width='1.8'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.nav-icon-automation::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' stroke='%23ffffff' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.nav-icon-ai::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M9 9h6v6H9z'/%3E%3Cpath d='M8 2v3M12 2v3M16 2v3M8 19v3M12 19v3M16 19v3M2 8h3M2 12h3M2 16h3M19 8h3M19 12h3M19 16h3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.nav-icon-demo::before{
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' ry='2'/%3E%3Cpath d='M10 10l4 3-4 3z'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.nav-icon-automotive::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l2-5a2 2 0 0 1 1.9-1.3h10.2A2 2 0 0 1 19 8l2 5'/%3E%3Crect x='3' y='13' width='18' height='5' rx='1.5'/%3E%3Ccircle cx='7' cy='18' r='1.4'/%3E%3Ccircle cx='17' cy='18' r='1.4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.nav-icon-banking::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9L12 4l9 5'/%3E%3Crect x='4' y='9' width='16' height='9' rx='1'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 16h4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.nav-icon-healthcare::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  /* Healthcare icon: medical cross */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' stroke='%23ffffff' stroke-width='0'%3E%3Crect x='5' y='10' width='14' height='4' rx='1'/%3E%3Crect x='10' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Life sciences icon: test tube */
.nav-icon-life-sciences::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6'/%3E%3Cpath d='M10 3v2.5l-4.2 9.3a3 3 0 0 0 2.7 4.2h6.9a3 3 0 0 0 2.7-4.2L14 5.5V3'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M8.5 16h7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.nav-icon-insurance::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.4-3 8-7 9-4-1-7-4.6-7-9V6z'/%3E%3Cpath d='M9 13l2 2 4-4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.nav-icon-manufacturing::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l6-4v4l6-4v11H3z'/%3E%3Cpath d='M3 19h18'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.nav-icon-government::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h16'/%3E%3Cpath d='M5 10l7-5 7 5'/%3E%3Crect x='4' y='10' width='16' height='8'/%3E%3Cpath d='M8 18v-5M12 18v-5M16 18v-5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.nav-icon-retail::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16l-1.5 9a2 2 0 0 1-2 1.7H7.5A2 2 0 0 1 5.5 16L4 7z'/%3E%3Cpath d='M9 11v-1a3 3 0 0 1 6 0v1'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.nav-icon-telecom::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  /* Telecom icon: tower with signal waves */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='6' r='1.6'/%3E%3Cpath d='M10 22l2-6 2 6'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M7 7a6 6 0 0 1 10 0'/%3E%3Cpath d='M5 5a9 9 0 0 1 14 0'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}