@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=JetBrains+Mono:wght@400;500;600&family=Manrope:wght@200..800&family=Outfit:wght@100..900&display=swap');

/* ============================================================================
   MERGED STYLESHEET — avtec.brand.css
   ----------------------------------------------------------------------------
   This file is the union of:
     - PART A: legacy avtec.css (preserved verbatim, sourced first)
     - PART B: new avtec.brand.css design system (sourced second)

   Cascade behavior:
     - Where the two stylesheets define the SAME selector, PART B wins
       (later rule of equal specificity beats earlier rule).
     - Selectors defined ONLY in PART A still apply, so legacy markup
       (video-wrapper, bg-soft-*, card-border-bottom, underline-gradient-*,
       fs-54, etc.) renders the same as before.
     - Selectors defined ONLY in PART B add the new design system
       (hero-* scaffolds, glass-card, btn--*, card--*, eyebrow-dot, etc.)
       so newly-rebuilt pages get the new look.

   To regenerate this file from scratch, restore avtec.brand.css.bak
   and re-run the merge script.
   ============================================================================ */


/* ############################################################################
   ## PART A — LEGACY avtec.css (drop-in compatibility layer)
   ############################################################################ */

/* ============================================
   AVTEC MEDIA GROUP - Brand Stylesheet
   ============================================

   TABLE OF CONTENTS
   -----------------
   1.  CSS CUSTOM PROPERTIES ........... ~line 35   (brand colors, gradients, z-index)
   2.  BASE STYLES .................... ~line 84   (html, body defaults)
   3.  CONTENT LINK STYLES ............ ~line 107  (inline text link underlines + hover)
   4.  TYPOGRAPHY ..................... ~line 148  (heading fonts, sizes, mobile scale)
   5.  TEXT COLORS .................... ~line 200  (utility classes: .text-avtec-navy, etc.)
   6.  GRADIENT TEXT .................. ~line 232  (.avtec-gradient-text, .gradient-text-tech, etc.)
   7.  BACKGROUND GRADIENTS ........... ~line 290  (.bg_navy, .bg_tech, .bg_pinkblue, etc.)
   8.  HYPERFIELD HERO ................ ~line 368  (mesh gradient hero + canvas + themes)
   9.  NAVIGATION ..................... ~line 622  (desktop dropdown colors + mobile offcanvas)
   10. BUTTONS ....................... ~line 1036  (.btn-primary, .btn-avtec, .btn-soft-primary)
   11. HERO IMAGE OVERLAY ............. ~line 1145 (.hero-overlay-dark)
   12. CARDS & UTILITIES .............. ~line 1180 (.card hover, .custom-line-height, shadows)
   13. COMPONENT OVERRIDES ............ ~line 1215 (.card-avtec, .section-navy)
   14. MODERN HERO STYLES ............. ~line 1238 (glass morphism, stat badges, glow buttons)
   15. LEGACY / ORBITING ICONS ........ ~line 1425 (calculator hero animation)
   16. FOOTER ........................ ~line 1500 (glows, particles, footer links)
   17. ACCESSIBILITY (WCAG) ........... ~line 1665 (focus-visible outlines, back-to-top, touch targets)
   18. VIDEO WRAPPER .................. ~line 1750 (about page hero overlay)
   19. PRINT STYLES .................. ~line 1795
   20. SOFT COLOR BACKGROUNDS ......... ~line 2196 (visible bg-soft-* overrides for icon avatars)

   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */
:root {
  /* Bootstrap Primary Override */
  --bs-primary: #1a1a2e;
  --bs-primary-rgb: 26, 26, 46;

  /* Link Colors — brand teal, WCAG AA (5.3:1 on white) */
  --bs-link-color: #0e7490;
  --bs-link-color-rgb: 14, 116, 144;
  --bs-link-hover-color: #065a73;
  --bs-link-hover-color-rgb: 6, 90, 115;

  /* Brand Colors - Primary */
  --avtec-navy: #0f172a;
  --avtec-navy-light: #1e293b;
  --avtec-heading: #1a1a2e;  /* Logo black — matches gradient-avtec-5 start */
  --avtec-slate: #334155;
  
  /* Brand Colors - From Logo */
  --avtec-teal: #0891b2;
  --avtec-teal-light: #22d3ee;
  --avtec-cyan: #10add5;
  --avtec-magenta: #be185d;
  --avtec-pink: #ec4899;
  --avtec-pink-light: #f472b6;
  
  /* Brand Colors - Extended */
  --avtec-purple: #6d28d9;
  --avtec-purple-light: #8b5cf6;
  --avtec-indigo: #4338ca;
  
  /* Functional Colors */
  --avtec-error: #dc2626;
  
  /* Gradients */
  --gradient-brand: linear-gradient(135deg, var(--avtec-cyan) 0%, var(--avtec-magenta) 100%);
  --gradient-navy: linear-gradient(135deg, var(--avtec-navy) 0%, var(--avtec-slate) 100%);
  --gradient-tech: linear-gradient(135deg, var(--avtec-navy) 0%, var(--avtec-teal) 100%);
  --gradient-accent: linear-gradient(135deg, var(--avtec-purple) 0%, var(--avtec-magenta) 100%);

  /* Z-Index Scale
     -1 = behind content (::before decorations)
      0 = base / footer glows
      1 = content layer / overlays / video borders
      2 = dividers / grain textures / footer content
      3 = hero content (text over effects)
     Bootstrap handles higher values: dropdown(1000), sticky(1020),
     fixed(1030), offcanvas(1040), modal(1050), tooltip(1070) */
}

/* ============================================
   BASE STYLES
   ============================================ */
html {
  scroll-behavior: smooth !important;
  overscroll-behavior-x: none;
}

body {
  overflow-x: hidden;
  overflow-x: clip; /* Progressive enhancement: clip preserves position:sticky */
  overscroll-behavior-x: none;
  min-height: 100vh;
  min-height: 100dvh; /* Accounts for mobile browser toolbar */
  height: auto !important;
  font-family: 'Figtree', 'Manrope', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   CONTENT LINK STYLES
   Inline links: gradient pill highlight on hover.
   Heading links: animated gradient underline draw.
   ============================================ */

/* ── Inline body links: gradient underline → pill highlight ── */
p a:not(.btn):not(.more):not([class*="link-"]),
.icon-list a:not(.btn):not([class*="link-"]),
blockquote a:not(.btn),
td a:not(.btn):not([class*="link-"]) {
  text-decoration: none !important;
  padding: 2px 4px;
  margin: 0 -4px;
  border-radius: 4px;
  background-image: linear-gradient(120deg, rgba(8, 145, 178, 0.22) 0%, rgba(190, 24, 93, 0.13) 100%);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.25s ease,
              box-shadow 0.4s ease;
}

p a:not(.btn):not(.more):not([class*="link-"]):hover,
.icon-list a:not(.btn):not([class*="link-"]):hover,
blockquote a:not(.btn):hover,
td a:not(.btn):not([class*="link-"]):hover {
  color: #065a73 !important;
  background-size: 100% 100%;
  box-shadow: 0 2px 10px rgba(8, 145, 178, 0.12);
}

/* ── .link-primary headings: gradient underline draws from left ── */
a.link-primary {
  position: relative;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

a.link-primary::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 3px;
  background: linear-gradient(120deg, var(--avtec-teal), var(--avtec-magenta));
  border-radius: 2px;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

a.link-primary:hover,
a.link-primary:focus {
  color: var(--avtec-teal) !important;
}

a.link-primary:hover::after,
a.link-primary:focus::after {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  p a:not(.btn), .icon-list a:not(.btn),
  a.link-primary, a.link-primary::after {
    transition: none !important;
  }
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: 'Outfit', 'Manrope', sans-serif;
  font-weight: 700;
  line-height: 1.25 !important;
  letter-spacing: -0.02em;
  color: #1a1a2e !important;
}

/* Heading color utility classes */
.text-heading { color: var(--avtec-heading) !important; }

h1, .h1 {
  font-size: 3rem !important;
  letter-spacing: -0.025em;
}

h2, .h2 {
  font-size: 2.5rem !important;
  letter-spacing: -0.02em;
}

h3, .h3 {
  font-size: 2rem !important;
}

h4, .h4 {
  font-size: 1.25rem !important;
}

h5, .h5 {
  font-size: 1.125rem !important;
}

h6, .h6 {
  font-size: 1rem !important;
}

/* Font Size Utilities — using Bootstrap 5 defaults (fluid responsive calc()) */

/* Mobile heading scale-down to prevent text overflow on small screens */
@media (max-width: 767.98px) {
  h1, .h1 { font-size: 2rem !important; }
  h2, .h2 { font-size: 1.75rem !important; }
  h3, .h3 { font-size: 1.5rem !important; }
}

/* ============================================
   TEXT COLORS
   ============================================ */
.text-avtec-navy {
  color: var(--avtec-navy) !important;
}

.text-avtec-teal {
  color: var(--avtec-teal) !important;
}

.text-avtec-cyan {
  color: var(--avtec-cyan) !important;
}

.text-avtec-magenta {
  color: var(--avtec-magenta) !important;
}

.text-avtec-purple {
  color: var(--avtec-purple) !important;
}

.text-darkpink {
  color: var(--avtec-magenta) !important;
}

.text-purp {
  color: var(--avtec-purple) !important;
}

/* ============================================
   GRADIENT TEXT
   ============================================ */
/* Primary brand gradient - refined, professional */
.avtec-gradient-text {
  background-image: linear-gradient(135deg, var(--avtec-teal) 0%, var(--avtec-magenta) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Tech-focused gradient - navy to teal */
.gradient-text-tech {
  background-image: linear-gradient(135deg, var(--avtec-navy) 0%, var(--avtec-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Brand heading gradients — logo black + blue variations
   Winner becomes .gradient-avtec */
.gradient-avtec-1 {
  background-image: linear-gradient(100deg, #1a1a2e 20%, #10add5 85%) !important;
  background-size: 130% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.gradient-avtec-2 {
  background-image: linear-gradient(100deg, #1a1a2e 20%, #22d3ee 85%) !important;
  background-size: 130% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.gradient-avtec-3 {
  background-image: linear-gradient(100deg, #1a1a2e 20%, #0891b2 85%) !important;
  background-size: 130% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.gradient-avtec-4 {
  background-image: linear-gradient(100deg, #1a1a2e 20%, #0ea5e9 85%) !important;
  background-size: 130% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.gradient-avtec-5 {
  background-image: linear-gradient(100deg, #1a1a2e 20%, #38bdf8 85%) !important;
  background-size: 130% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.gradient-avtec-6 {
  background-image: linear-gradient(100deg, #1a1a2e 20%, #67e8f9 85%) !important;
  background-size: 130% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.gradient-avtec-7 {
  background-image: linear-gradient(100deg, #1a1a2e 20%, #06b6d4 85%) !important;
  background-size: 130% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.gradient-avtec-8 {
  background-image: linear-gradient(100deg, #1a1a2e 20%, #0284c7 85%) !important;
  background-size: 130% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Security gradient - deep and commanding */
.gradient-text-secure {
  background-image: linear-gradient(135deg, var(--avtec-slate) 0%, var(--avtec-navy) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Animated gradient - for special emphasis */
.animate-gradientText {
  background-image: linear-gradient(90deg, var(--avtec-teal), var(--avtec-purple), var(--avtec-magenta), var(--avtec-teal));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 8s ease-in-out infinite;
}

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

/* Background clip utilities */
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

.text-transparent {
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Brand gradient text — cyan-to-pink (from Claude Design brand system) */
.mark-grad {
  background-image: linear-gradient(105deg, #18B8DC 0%, #EC3E86 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Brand solid pink accent text */
.mark-pink {
  color: #EC3E86 !important;
  -webkit-text-fill-color: #EC3E86 !important;
}

/* Statement section — full-bleed navy with large display type */
.section-statement {
  background: linear-gradient(160deg, #060d1f 0%, #0A1430 25%, #0f2045 55%, #182e52 80%, #1a3660 100%);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.section-statement .display-statement {
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-wrap: balance;
  color: #fff !important;
  margin: 0;
}

.section-statement .section-statement-sub {
  font-size: 1.15rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  max-width: 620px;
  margin-bottom: 2.25rem;
}

/* Override fuchsia to match brand pink */
.text-fuchsia {
  color: #EC3E86 !important;
}

.progressbar.fuchsia svg path:last-child {
  stroke: #EC3E86 !important;
}
.progressbar.semi-circle.fuchsia svg path:first-child {
  stroke: rgba(236, 62, 134, 0.15) !important;
}

/* Navy-to-purple directional gradient — reusable anywhere */
.bg-navy-fade {
  background: linear-gradient(135deg, #060d1f 0%, #0A1430 20%, #0f1d42 45%, #1a2a5c 70%, #2a2d6b 88%, #3b2d6e 100%) !important;
}

/* Proud section — navy gradient card */
.section-proud {
  border: none !important;
  border-radius: 0.8rem;
}

.section-proud h3 {
  color: #fff !important;
}

.section-proud .proud-sub {
  color: rgba(255, 255, 255, 0.7);
}

.section-proud .proud-label {
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 767.98px) {
  .section-statement {
    padding: 4rem 0;
  }
}

/* ============================================
   BACKGROUND GRADIENTS
   ============================================ */

/* --- PROFESSIONAL / SECURITY --- */
/* Deep navy - trust, security */
.bg-avtec-navy {
  background: var(--avtec-navy);
}

/* Navy gradient - commanding, secure */
.bg_navy {
  background: linear-gradient(180deg, var(--avtec-navy) 0%, var(--avtec-navy-light) 100%);
}

/* Slate gradient - professional */
.bg_slate {
  background: linear-gradient(135deg, var(--avtec-navy-light) 0%, var(--avtec-slate) 100%);
}

/* Dark professional */
.bg_darkpurple {
  background: linear-gradient(135deg, #1e1b4b 0%, var(--avtec-navy) 100%);
}

.bg_darkpurple2 {
  background: linear-gradient(180deg, #312e81 0%, #1e1b4b 100%);
}

/* --- TECHNOLOGY / INNOVATION --- */
/* Tech gradient - navy to teal */
.bg_tech {
  background: linear-gradient(135deg, var(--avtec-navy) 0%, var(--avtec-teal) 100%);
}

/* Light blue purple - primary hero gradient */
.bg-lightbluepurple {
  background: linear-gradient(135deg, #6366f1 0%, var(--avtec-cyan) 100%);
}

.bg-lightbluepurple2 {
  background: linear-gradient(135deg, var(--avtec-indigo) 0%, var(--avtec-teal) 100%);
}

/* Blue basic - clean tech feel */
.bg_bluebasic {
  background: linear-gradient(135deg, #1e40af 0%, var(--avtec-teal) 100%);
}

/* Light purple - innovation */
.bg_lightpurple {
  background: linear-gradient(135deg, #7c3aed 0%, var(--avtec-indigo) 100%);
}

.bg_purple2 {
  background: linear-gradient(135deg, var(--avtec-purple) 0%, var(--avtec-indigo) 100%);
}

/* --- ACCENT / MARKETING --- */
/* Pink blue - brand accent (use sparingly) */
.bg_pinkblue {
  background: linear-gradient(135deg, var(--avtec-indigo) 0%, var(--avtec-magenta) 100%);
}

/* Purple red - energy */
.bg_purplered {
  background: linear-gradient(135deg, #7c3aed 0%, var(--avtec-error) 100%);
}

/* Pink orange - warm accent */
.bg_pinkorange {
  background: linear-gradient(135deg, var(--avtec-magenta) 0%, #ea580c 100%);
}

/* Black blue - dramatic */
.bg_blackblue {
  background: radial-gradient(ellipse at top left, var(--avtec-navy-light) 0%, var(--avtec-navy) 50%, #020617 100%);
}

/* ==========================================================
   HYPERFIELD HERO (CSS base + canvas overlays)
   - CSS mesh gradient base (immediate render)
   - Canvas flow-field injected by hyperfield.js
   - Subtle grain + vignette for premium depth
   ========================================================== */

.hero-bg-hyperfield {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  contain: paint;

  --hero-c1: 16, 173, 213;
  --hero-c2: 99, 102, 241;
  --hero-c3: 5, 150, 105;
  --hero-c4: 245, 158, 11;

  --hero-canvas-opacity: 0.85;
  --hero-mesh-opacity: 0.95;

  background: linear-gradient(160deg, #cfd7e2 0%, #dbe2ec 45%, #e6ecf3 100%);
}

.hero-bg-hyperfield > * {
  position: relative;
  z-index: 3;
}

.hero-bg-hyperfield::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: 0;
  opacity: var(--hero-mesh-opacity);

  background:
    radial-gradient(1200px 900px at 15% 20%, rgb(var(--hero-c1) / 0.35) 0%, transparent 55%),
    radial-gradient(900px 700px  at 85% 25%, rgb(var(--hero-c2) / 0.28) 0%, transparent 55%),
    radial-gradient(900px 800px  at 60% 85%, rgb(var(--hero-c3) / 0.25) 0%, transparent 60%),
    radial-gradient(700px 600px  at 20% 80%, rgb(var(--hero-c4) / 0.18) 0%, transparent 60%),
    conic-gradient(from 210deg,
      rgb(var(--hero-c2) / 0.10),
      rgb(var(--hero-c1) / 0.14),
      rgb(var(--hero-c3) / 0.10),
      rgb(var(--hero-c2) / 0.10)
    );

  filter: blur(55px) saturate(125%);
  transform: translate3d(0,0,0);
  animation: hyperfield-mesh 18s ease-in-out infinite;
}

@keyframes hyperfield-mesh {
  0%   { transform: translate3d(-1.5%, -1%, 0) rotate(0deg)   scale(1.02); }
  50%  { transform: translate3d( 1.5%,  1%, 0) rotate(180deg) scale(1.06); }
  100% { transform: translate3d(-1.5%, -1%, 0) rotate(360deg) scale(1.02); }
}

.hero-bg-hyperfield .hyperfield-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: var(--hero-canvas-opacity);
}

.hero-bg-hyperfield::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E"),
    radial-gradient(closest-side at 50% 50%, rgba(0,0,0,0) 0 62%, rgba(9, 12, 18, 0.30) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0.10), rgba(0,0,0,0.08));

  background-size: 260px 260px, cover, cover;
  background-repeat: repeat, no-repeat, no-repeat;
  opacity: 0.16;
  mix-blend-mode: soft-light;
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-hyperfield::before { animation: none; }
}


/* --- HYPERFIELD THEMES ---
   Each theme varies: palette, base gradient, mesh/canvas opacity,
   and particle behavior via CSS custom properties read by hyperfield.js.
   Some themes also override mesh blur, animation speed, or saturation.

   USAGE: class="wrapper hero-bg-hyperfield hero-theme-signal"

   Available themes:
     signal  — teal / indigo / emerald / amber (default, balanced)
     noir    — dark premium with bright accents
     dusk    — violet / rose / amber (sunset warmth, not pink)
     coast   — cyan / blue / seafoam / sand (calm, airy)
     slate   — steel blue / gray / muted teal (ultra-professional)
     drift   — gray / blue / silver / ice (bold particles, cool wash)
     aurora  — cyan / purple / green / blue (vivid, energetic)
   ------------------------------------------------------------ */


/* --- SIGNAL — Teal / Indigo / Emerald / Amber ---
   The default. Balanced, professional, gender-neutral.
   ------------------------------------------------ */
.hero-theme-signal {
  --hero-c1: 16, 173, 213;
  --hero-c2: 99, 102, 241;
  --hero-c3: 5, 150, 105;
  --hero-c4: 245, 158, 11;
}


/* --- NOIR — Dark premium ---
   Dark base, bright accents glow against it.
   Fewer particles, tighter trails for a refined look.
   ------------------------------------------------ */
.hero-theme-noir {
  --hero-c1: 16, 173, 213;
  --hero-c2: 99, 102, 241;
  --hero-c3: 34, 197, 94;
  --hero-c4: 245, 158, 11;
  --hero-canvas-opacity: 0.70;
  --hero-mesh-opacity: 0.85;
  --hero-particle-speed: 0.70;
  --hero-trail-fade: 0.05;
  --hero-max-particles: 1600;
  background: linear-gradient(160deg, #0b1220 0%, #0e1628 50%, #111b32 100%);
}


/* --- DUSK — Violet / Rose / Amber ---
   Warm sunset palette. Rich mesh, slightly slower drift.
   Not pink — the violet and amber anchor it.
   ------------------------------------------------ */
.hero-theme-dusk {
  --hero-c1: 147, 51, 234;
  --hero-c2: 219, 39, 119;
  --hero-c3: 245, 158, 11;
  --hero-c4: 99, 102, 241;
  --hero-canvas-opacity: 0.80;
  --hero-mesh-opacity: 1.0;
  --hero-particle-speed: 0.75;
  --hero-trail-fade: 0.06;
  background: linear-gradient(160deg, #d4c8e0 0%, #ddd0e6 45%, #e8dded 100%);
}

.hero-theme-dusk.hero-bg-hyperfield::before {
  filter: blur(60px) saturate(135%);
  animation-duration: 22s;
}


/* --- COAST — Cyan / Blue / Seafoam / Sand ---
   Light and airy, like looking out at open water.
   Softer canvas, gentle particle movement.
   ------------------------------------------------ */
.hero-theme-coast {
  --hero-c1: 6, 182, 212;
  --hero-c2: 59, 130, 246;
  --hero-c3: 16, 185, 129;
  --hero-c4: 251, 191, 36;
  --hero-canvas-opacity: 0.70;
  --hero-mesh-opacity: 0.90;
  --hero-particle-speed: 0.65;
  --hero-trail-fade: 0.06;
  --hero-max-particles: 1800;
  background: linear-gradient(160deg, #c6dde8 0%, #d0e5ee 45%, #daedf5 100%);
}

.hero-theme-coast.hero-bg-hyperfield::before {
  filter: blur(65px) saturate(115%);
  animation-duration: 24s;
}


/* --- SLATE — Steel / Gray / Sky accent ---
   Almost monochromatic. Very corporate, very clean.
   Slow, deliberate particles with long trails.
   ------------------------------------------------ */
.hero-theme-slate {
  --hero-c1: 100, 116, 139;
  --hero-c2: 71, 85, 105;
  --hero-c3: 14, 165, 233;
  --hero-c4: 148, 163, 184;
  --hero-canvas-opacity: 0.90;
  --hero-mesh-opacity: 0.80;
  --hero-particle-speed: 0.55;
  --hero-trail-fade: 0.045;
  --hero-max-particles: 2600;
  background: linear-gradient(160deg, #c4cad2 0%, #cdd3da 45%, #d8dee5 100%);
}

.hero-theme-slate.hero-bg-hyperfield::before {
  filter: blur(75px) saturate(95%);
  animation-duration: 28s;
}


/* --- DRIFT — Gray / Blue / Silver / Ice ---
   Cool and composed. Gray base with blue threads
   cutting through like currents. Particles are
   prominent — higher opacity, more density, bolder strokes.
   ------------------------------------------------ */
.hero-theme-drift {
  --hero-c1: 59, 130, 246;
  --hero-c2: 99, 102, 241;
  --hero-c3: 148, 163, 184;
  --hero-c4: 56, 189, 248;
  --hero-canvas-opacity: 1.0;
  --hero-mesh-opacity: 0.70;
  --hero-particle-speed: 0.90;
  --hero-trail-fade: 0.04;
  --hero-max-particles: 2800;
  background: linear-gradient(160deg, #bcc5d0 0%, #c5ced8 45%, #d0d8e2 100%);
}

.hero-theme-drift.hero-bg-hyperfield::before {
  filter: blur(80px) saturate(80%);
  animation-duration: 26s;
}


/* --- AURORA — Cyan / Purple / Green / Blue ---
   The most vivid option. Faster particles, more energy.
   Use sparingly — it commands attention.
   ------------------------------------------------ */
.hero-theme-aurora {
  --hero-c1: 6, 182, 212;
  --hero-c2: 168, 85, 247;
  --hero-c3: 34, 197, 94;
  --hero-c4: 59, 130, 246;
  --hero-canvas-opacity: 0.92;
  --hero-mesh-opacity: 1.0;
  --hero-particle-speed: 1.0;
  --hero-trail-fade: 0.085;
  --hero-max-particles: 2600;
  background: linear-gradient(160deg, #c0cce0 0%, #cad5e8 45%, #d4def0 100%);
}

.hero-theme-aurora.hero-bg-hyperfield::before {
  filter: blur(50px) saturate(145%);
  animation-duration: 14s;
}


/* ============================================
   NAVIGATION
   ============================================ */
.nav-link {
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* -----------------------------------------------
   .nav-tabs-frosted — modifier for .nav-tabs-bg
   Use when tab cards overlap a hero SVG divider or
   image. Inactive cards get a translucent frosted
   backdrop for readability; active/hover keeps the
   solid white from the base .nav-tabs-bg theme.
   ----------------------------------------------- */
.nav-tabs.nav-tabs-bg.nav-tabs-frosted .nav-link:not(.active):not(:hover) {
  background-color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Tab card lifts on hover; icon scales + tilts in sync.
   Premium easing for both. */
.nav-tabs.nav-tabs-bg.nav-tabs-frosted .nav-link {
  transition:
    transform 320ms cubic-bezier(.2, .8, .2, 1),
    background-color 280ms ease,
    border-color 280ms ease,
    box-shadow 320ms ease;
}
.nav-tabs.nav-tabs-bg.nav-tabs-frosted .nav-link:hover {
  transform: translateY(-2px);
}
.nav-tabs.nav-tabs-bg.nav-tabs-frosted .nav-link .icon-svg {
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1);
}
.nav-tabs.nav-tabs-bg.nav-tabs-frosted .nav-link:hover .icon-svg,
.nav-tabs.nav-tabs-bg.nav-tabs-frosted .nav-link.active .icon-svg {
  transform: scale(1.1) rotate(-3deg);
}

/* Mobile: nav-tabs <ul> is hidden via Bootstrap's d-none d-lg-flex.
   This forces all .tab-pane siblings of that hidden <ul> to render
   as a stacked feature list (the only thing Bootstrap utilities
   can't do natively, since tabs hide inactive panes via JS). */
@media (max-width: 991.98px) {
  .nav-tabs.nav-tabs-bg.nav-tabs-frosted ~ .tab-content .tab-pane {
    display: block !important;
    opacity: 1 !important;
  }
  .nav-tabs.nav-tabs-bg.nav-tabs-frosted ~ .tab-content .tab-pane + .tab-pane {
    margin-top: 4rem;
    padding-top: 4rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
  }
}

/* -----------------------------------------------
   Homepage Services Tabs — richer copy modules
   Scoped to avoid affecting other tab sections.
   ----------------------------------------------- */
.avtec-services-tabs .service-lead {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #334155;
  margin-bottom: 0.9rem;
}

.avtec-services-tabs .avtec-service-kicker {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  font-size: 0.72rem;
  margin-bottom: 0.45rem;
}

.avtec-services-tabs .service-stack-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.1rem;
}

.avtec-services-tabs .service-stack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 0.95rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: linear-gradient(145deg, #ffffff 0%, rgba(248, 250, 252, 0.98) 100%);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  color: #1e293b;
  text-decoration: none;
  transition: transform 260ms cubic-bezier(.2, .8, .2, 1), box-shadow 260ms ease, border-color 260ms ease;
}

.avtec-services-tabs .service-stack-card strong {
  color: #0f172a;
  font-size: 0.88rem;
  line-height: 1.3;
}

.avtec-services-tabs .service-stack-card span {
  font-size: 0.78rem;
  line-height: 1.5;
}

.avtec-services-tabs .service-stack-card .service-stack-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #0f172a;
  background: rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  padding: 0.2rem 0.48rem;
}

.avtec-services-tabs .service-stack-card:hover,
.avtec-services-tabs .service-stack-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(8, 145, 178, 0.34);
  box-shadow: 0 14px 30px rgba(8, 145, 178, 0.16);
}

.avtec-services-tabs .service-crosssell-title {
  margin: 0.2rem 0 0.5rem;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.avtec-services-tabs #service-content-seo .service-tab-visual {
  margin: 0;
  position: relative;
  background: transparent !important;
  line-height: 0;
}

.avtec-services-tabs #service-content-seo .service-tab-visual-img {
  width: 128%;
  max-width: none;
  margin-left: -14%;
  display: block;
}

.avtec-services-tabs .service-crosssell-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.2rem;
}

.avtec-services-tabs .service-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.69rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.avtec-services-tabs .service-badge i {
  font-size: 0.82rem;
}

.avtec-services-tabs .service-badge:hover,
.avtec-services-tabs .service-badge:focus-visible {
  transform: translateY(-1px);
}

.avtec-services-tabs .service-badge-fuchsia,
.avtec-services-tabs .service-badge-orange,
.avtec-services-tabs .service-badge-violet,
.avtec-services-tabs .service-badge-green {
  background: rgba(51, 65, 85, 0.08);
  border-color: rgba(51, 65, 85, 0.18);
  color: #334155;
}

@media (max-width: 991.98px) {
  .avtec-services-tabs .service-stack-grid {
    grid-template-columns: 1fr;
  }

  .avtec-services-tabs #service-content-seo .service-tab-visual-img {
    width: 112%;
    margin-left: -6%;
  }
}

.dropdown-header {
  font-size: 0.75rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--avtec-slate);
}

.dropdown-item {
  font-weight: 500;
  letter-spacing: -0.01rem;
  color: var(--avtec-navy);
}

.dropdown-item a {
  font-weight: 500;
  letter-spacing: -0.01rem;
  color: var(--avtec-navy);
}

/* Dropdown menu link titles */
.dropdown-menu p.text-primary {
  color: #343f52 !important;
}
/* Dropdown menu icons */
.dropdown-menu i.text-primary {
  color: #3f78e0 !important;
}

/* Mobile Navigation */
@media (max-width: 767.98px) {
  .dropdown-menu {
    position: static;
    float: none;
    width: auto;
  }

  .dropdown-menu .row {
    margin-right: 0;
    margin-left: 0;
  }

  .dropdown-menu .col-md-4 {
    padding: 0;
  }

  .dropdown-menu .dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1.5rem;
  }
}

.offcanvas-custom-width {
  width: 90% !important;
}

/* ============================================
   MOBILE BURGER BUTTON — Brand Gradient Pill
   Self-contained, works on any header theme
   ============================================ */
button.hamburger {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--avtec-purple) 0%, var(--avtec-magenta) 100%) !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0;
  padding: 0 !important;
  margin: 0 0 0 0.5rem !important;
  border: none !important;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  box-shadow: 0 3px 12px rgba(109, 40, 217, 0.3);
  position: relative;
  overflow: hidden;
}

button.hamburger:hover {
  transform: scale(1.08);
  box-shadow: 0 5px 20px rgba(190, 24, 93, 0.4);
  filter: brightness(1.1);
}

button.hamburger:active {
  transform: scale(0.97);
}

button.hamburger:focus-visible {
  outline: 2px solid var(--avtec-cyan);
  outline-offset: 3px;
}

/* Override theme's hamburger line colors for ALL navbar variants */
button.hamburger:before,
button.hamburger span,
button.hamburger:after {
  background: #fff !important;
  width: 18px !important;
  height: 2px !important;
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
}

button.hamburger:before,
button.hamburger span {
  margin: 0 0 4px !important;
}

button.hamburger:after {
  margin: 0 !important;
}

/* Ensure no navbar variant overrides the gradient button */
.navbar.navbar-dark button.hamburger,
.navbar.navbar-light button.hamburger,
.navbar.position-absolute button.hamburger {
  color: #fff !important;
  background: linear-gradient(135deg, var(--avtec-purple) 0%, var(--avtec-magenta) 100%) !important;
}

/* ============================================
   OFFCANVAS PANEL — Dark Branded Theme
   Navy gradient, consistent across all headers
   ============================================ */
@media (max-width: 991.98px) {

  /* --- Panel Shell --- */
  .navbar-collapse.offcanvas-nav {
    background: linear-gradient(170deg, #1a1f3d 0%, #0f1328 55%, #080b18 100%) !important;
    border-right: none !important;
    max-width: 310px;
    box-shadow: 6px 0 40px rgba(0, 0, 0, 0.55);
    overflow-x: hidden;
  }

  /* --- Header Bar --- */
  .offcanvas-nav .offcanvas-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* Close button — just invert for dark bg, let theme handle positioning */
  .offcanvas-nav .offcanvas-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
  }

  /* -----------------------------------------------
     TOP-LEVEL NAV ITEMS
     Refined sizing, flexbox-aligned caret
     ----------------------------------------------- */
  .navbar-expand-lg .navbar-collapse .nav-link,
  .navbar-expand-lg .navbar-collapse .show > .nav-link,
  .navbar-expand-lg .navbar-collapse .nav-link.active,
  .navbar-expand-lg .navbar-collapse .nav-link:hover,
  .navbar-expand-lg .navbar-collapse .nav-link:focus {
    color: rgba(255, 255, 255, 0.85) !important;
  }

  .offcanvas-nav .navbar-nav > .nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .offcanvas-nav .navbar-nav > .nav-item:last-child {
    border-bottom: none;
  }

  /* Nav link — compact, uppercase, premium feel */
  .offcanvas-nav .navbar-nav > .nav-item > .nav-link {
    padding: 0.7rem 1rem !important;
    font-size: 0.78rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: background 0.2s ease, padding-left 0.2s ease;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }

  /* Subtle left accent on hover */
  .offcanvas-nav .navbar-nav > .nav-item > .nav-link:hover {
    background: rgba(255, 255, 255, 0.03);
    padding-left: 1.15rem !important;
  }
  .offcanvas-nav .navbar-nav > .nav-item > .nav-link:hover::before {
    content: "";
    position: absolute;
    left: 0;
    top: 25%;
    height: 50%;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--avtec-cyan), var(--avtec-purple));
  }

  /* Active/open state accent */
  .offcanvas-nav .navbar-nav > .nav-item.show > .nav-link::before,
  .offcanvas-nav .navbar-nav > .nav-item > .nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 25%;
    height: 50%;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--avtec-cyan), var(--avtec-purple));
  }

  /* Dropdown toggle caret — inline-flex, properly centered */
  .offcanvas-nav .dropdown-toggle::after {
    position: static !important;
    margin-left: auto;
    opacity: 0.35;
    font-size: 0.7rem !important;
    transition: transform 0.25s ease, opacity 0.2s ease;
    flex-shrink: 0;
  }
  .offcanvas-nav .show > .dropdown-toggle::after {
    transform: rotate(180deg);
    opacity: 0.6;
  }

  /* -----------------------------------------------
     DROPDOWN MENUS
     Compact, refined, proper breathing room
     ----------------------------------------------- */
  .offcanvas-nav .dropdown-menu {
    background: rgba(255, 255, 255, 0.02) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.15rem 0 0.5rem !important;
    margin: 0 !important;
  }

  /* Override theme's padding on dropdown-lg inside mobile */
  .offcanvas-nav .dropdown-menu.dropdown-lg {
    padding: 0.15rem 0 0.5rem !important;
  }

  /* Reset the multi-column flex layout to single-column on mobile */
  .offcanvas-nav .dropdown-lg-content {
    display: block !important;
  }

  /* Remove the px-4 bulk from section wrappers */
  .offcanvas-nav .dropdown-lg-content > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Section headers — small caps, subtle accent */
  .offcanvas-nav .dropdown-header {
    color: var(--avtec-cyan) !important;
    opacity: 0.85;
    font-size: 0.58rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 0.65rem 1rem 0.25rem !important;
    margin-bottom: 0 !important;
    position: relative;
  }

  /* Thin gradient underline on section headers */
  .offcanvas-nav .dropdown-header::after {
    content: "";
    display: block;
    width: 24px;
    height: 1px;
    margin-top: 4px;
    background: linear-gradient(90deg, var(--avtec-cyan), transparent);
    border-radius: 1px;
  }

  /* Dropdown item rows — tighter, cleaner */
  .offcanvas-nav .dropdown-menu li {
    margin: 0 0.35rem !important;
  }
  .offcanvas-nav .dropdown-menu li.mb-3 {
    margin-bottom: 0.15rem !important;
  }
  .offcanvas-nav .dropdown-menu li a {
    padding: 0.4rem 0.65rem !important;
    border-radius: 6px;
    transition: background 0.15s ease, transform 0.15s ease;
    text-decoration: none !important;
  }
  .offcanvas-nav .dropdown-menu li a:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(2px);
  }

  /* --- Icon containers — small, clean, no button bulk --- */
  .offcanvas-nav .dropdown-menu .icon-container {
    margin-right: 0.6rem !important;
    flex-shrink: 0;
  }
  .offcanvas-nav .dropdown-menu .icon-container .me-3 {
    margin-right: 0 !important;
  }
  .offcanvas-nav .dropdown-menu .btn-soft-primary {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .offcanvas-nav .dropdown-menu li a:hover .btn-soft-primary {
    background: rgba(56, 199, 215, 0.12) !important;
    border-color: rgba(56, 199, 215, 0.2) !important;
  }
  .offcanvas-nav .dropdown-menu .btn-soft-primary i {
    color: var(--avtec-cyan) !important;
    font-size: 0.85rem !important;
  }

  /* --- Item text --- */
  .offcanvas-nav .dropdown-menu p.text-primary,
  .offcanvas-nav .dropdown-menu .text-primary:not(i) {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.78rem !important;
    font-weight: 500;
    margin-bottom: 0 !important;
    line-height: 1.25;
  }
  .offcanvas-nav .dropdown-menu p.text-navy,
  .offcanvas-nav .dropdown-menu .text-navy {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 0.68rem !important;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 !important;
  }

  /* Multi-column dividers — hide on mobile (single column now) */
  .offcanvas-nav .dropdown-lg-content > div + div {
    border-left: none !important;
    margin-top: 0.15rem;
  }

  /* -----------------------------------------------
     OFFCANVAS FOOTER
     Clean, airy, accent details
     ----------------------------------------------- */
  .offcanvas-nav .offcanvas-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 1rem 1.1rem;
    background: rgba(0, 0, 0, 0.15);
  }

  .offcanvas-nav .offcanvas-footer a:not(.btn):not(.nav a) {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.82rem;
    transition: color 0.2s ease;
  }
  .offcanvas-nav .offcanvas-footer a:not(.btn):not(.nav a):hover {
    color: var(--avtec-cyan);
  }

  .offcanvas-nav .offcanvas-footer i.bi-telephone-fill {
    color: var(--avtec-cyan) !important;
    font-size: 0.8rem;
  }

  .offcanvas-nav .offcanvas-footer .nav.social {
    gap: 0.1rem;
  }
  .offcanvas-nav .offcanvas-footer .nav.social a {
    color: rgba(255, 255, 255, 0.3);
    transition: color 0.2s ease, transform 0.2s ease;
    font-size: 0.85rem;
  }
  .offcanvas-nav .offcanvas-footer .nav.social a:hover {
    color: var(--avtec-cyan);
    transform: translateY(-1px);
  }

  /* Support Portal button — compact */
  .offcanvas-nav .offcanvas-footer .btn {
    font-size: 0.68rem !important;
    padding: 0.3rem 0.85rem !important;
    letter-spacing: 0.03em;
  }
}

/* Search icon — ensure visibility on both themes */
.navbar-light .navbar-other .nav-link .bi-search,
.navbar-dark .navbar-other .nav-link .bi-search {
  font-size: 1.1rem;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Soft primary button - stable on scroll */
.btn-soft-primary {
  background-color: #e0e7ff !important;
  border-color: #e0e7ff !important;
  color: var(--avtec-navy) !important;
}

.navbar.scrolled .btn-soft-primary,
.btn-soft-primary:hover,
.btn-soft-primary:active,
.btn-soft-primary:focus {
  background-color: #c7d2fe !important;
  border-color: #c7d2fe !important;
  color: var(--avtec-navy) !important;
}

/* Avtec brand button */
.btn-avtec {
  background: var(--gradient-brand);
  border: none;
  color: #fff;
}

.btn-avtec:hover {
  background: linear-gradient(135deg, #0e7490 0%, #9d174d 100%);
  color: #fff;
}

/* Primary CTA Button - Huemor-inspired
   Dark pink with purple inner glow */
.btn-primary {
  position: relative;
  overflow: hidden;
  background-color: #c4346e !important;
  border-color: #c4346e !important;
  color: #fff !important;
  z-index: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(138, 43, 226, 0.5), transparent);
  transition: width 0.3s ease;
  z-index: -1;
}
.btn-primary:hover::before {
  width: 60%;
}
.btn-primary:hover {
  background-color: #d63a7a !important;
  border-color: #d63a7a !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(196, 52, 110, 0.5), 0 8px 20px rgba(0, 0, 0, 0.15);
}
.btn-primary:focus,
.btn-primary:active {
  background-color: #b02d60 !important;
  border-color: #b02d60 !important;
  color: #fff !important;
  transform: translateY(0);
}

/* Arrow icon for buttons */
.btn-arrow-icon {
  display: inline-block;
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}
.btn:hover .btn-arrow-icon {
  transform: translate(3px, -3px);
}

/* Secondary outline button - Navy */
.btn-secondary-outline {
  background-color: transparent;
  border: 2px solid #343f52;
  color: #343f52;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-secondary-outline:hover {
  background-color: #343f52;
  border-color: #343f52;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(52, 63, 82, 0.25);
}
.btn-secondary-outline:focus,
.btn-secondary-outline:active {
  background-color: #2a3342;
  border-color: #2a3342;
  color: #fff;
  transform: translateY(0);
}

/* ============================================
   HERO IMAGE OVERLAY
   Navy gradient overlay for photo-background heroes.
   Usage: add .hero-overlay-dark to the <section>
   Works with .image-wrapper, .bg-full, etc.
   ============================================ */
.hero-overlay-dark {
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-overlay-dark::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(20, 30, 55, 0.55) 0%, rgba(10, 15, 35, 0.8) 100%);
    z-index: 1;
    pointer-events: none;
}

.hero-overlay-dark > * {
    position: relative;
    z-index: 2;
}

/* Extra-small button */
.btn-xs,
.btn-group-xs > .btn {
    --bs-btn-padding-y: 0.2rem;
    --bs-btn-padding-x: 0.65rem;
    --bs-btn-font-size: 0.7rem;
    --bs-btn-border-radius: 0.3rem;
}

/* Card hover lift effect */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.custom-line-height {
  line-height: 1.2 !important;
}

.dropdown-menu.dropdown-lg {
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(30, 58, 95, 0.08);
}

.dropdown-lg-content p.text-primary.custom-line-height {
  font-weight: 500 !important;
}

.dropdown-menu.dropdown-lg .dropdown-lg-content li.col.mb-3 {
  margin-bottom: 0.5rem !important;
}

.dropdown-lg-content li a.nav-menu-item {
  padding: 0.2rem 0.5rem;
  margin: -0.2rem -0.5rem;
  border-radius: 0.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.dropdown-lg-content li a.nav-menu-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.1);
  background-color: rgba(30, 58, 95, 0.04);
}

.dropdown-lg-content li a.nav-menu-item .icon-container i {
  transition: transform 0.2s ease;
}

.dropdown-lg-content li a.nav-menu-item:hover .icon-container i {
  animation: iconPulseThenRotate 0.5s ease forwards;
}

@keyframes iconPulseThenRotate {
  0%   { transform: scale(1) rotate(0deg); }
  40%  { transform: scale(1.25) rotate(0deg); }
  70%  { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1) rotate(8deg); }
}

.custom-line-height small {
  line-height: 1.2;
}

/* Border accent */
.border-avtec {
  border-color: var(--avtec-cyan) !important;
}

/* Shadow utilities */
.shadow-avtec {
  box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.2);
}

.shadow-avtec-lg {
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}

/* ============================================
   COMPONENT OVERRIDES
   ============================================ */

/* Cards with brand accent */
.card-avtec {
  border-top: 3px solid var(--avtec-cyan);
}

.card-avtec-magenta {
  border-top: 3px solid var(--avtec-magenta);
}

/* Section backgrounds */
.section-navy {
  background: var(--avtec-navy);
  color: #fff;
}

.section-slate {
  background: var(--avtec-slate);
  color: #fff;
}

/* Lock testimonial icon circles to perfect squares */
.blockquote-details > .rounded-circle {
  min-width: 3.5rem;
  max-width: 3.5rem;
  min-height: 3.5rem;
  max-height: 3.5rem;
}

/* Fit client logos inside testimonial circles without distortion */
.blockquote-details > img.rounded-circle {
  object-fit: contain;
  padding: 5px;
  background-color: var(--bs-gray-200, #f6f7f9);
}

/* Testimonial attribution names */
.blockquote-details .info .h5 {
  font-size: 0.875rem !important;
}

/* Hide percent sign on specific progressbars */
.progressbar.semi-circle.no-percent .progressbar-text:after {
  content: none;
}

/* ============================================
   MODERN HERO STYLES - Glass Morphism & Effects
   ============================================ */

/* Animated gradient background */
.hero-gradient {
  background: linear-gradient(-45deg, #0f172a, #1e3a5f, #0c4a6e, #581c87, #1e3a5f);
  background-size: 400% 400%;
  animation: heroGradient 15s ease infinite;
  position: relative;
  overflow: hidden;
}

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

/* Floating orbs/glows */
.hero-gradient::before,
.hero-gradient::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  pointer-events: none;
}

.hero-gradient::before {
  width: 500px;
  height: 500px;
  background: var(--avtec-cyan);
  top: -150px;
  right: -100px;
  animation: float 8s ease-in-out infinite;
}

.hero-gradient::after {
  width: 400px;
  height: 400px;
  background: var(--avtec-magenta);
  bottom: -100px;
  left: -100px;
  animation: float 10s ease-in-out infinite reverse;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(5deg); }
}

/* Glass morphism card */
.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
}

.glass-card-light {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Glowing stat badges */
.stat-badge {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  transition: all 0.3s ease;
}

.stat-badge:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.stat-badge .stat-number {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(135deg, #fff 0%, var(--avtec-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-badge .stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

/* Glow button */
.btn-glow {
  position: relative;
  background: linear-gradient(135deg, var(--avtec-cyan) 0%, var(--avtec-teal) 100%);
  border: none;
  color: #fff;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s ease;
}

.btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px -10px var(--avtec-cyan);
  color: #fff;
}

.btn-glow:hover::before {
  left: 100%;
}

/* Outline glow button */
.btn-outline-glow {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  transition: all 0.3s ease;
}

.btn-outline-glow:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
  transform: translateY(-2px);
}

/* Hero image with glow */
.hero-image-glow {
  position: relative;
}

.hero-image-glow::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: linear-gradient(135deg, var(--avtec-cyan), var(--avtec-magenta));
  border-radius: 24px;
  filter: blur(40px);
  opacity: 0.3;
  z-index: -1;
}

.hero-image-glow img {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Subtle grid pattern overlay */
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}

/* ============================================
   HERO PRODUCT CARDS
   Mini CSS-only product UI blocks for homepage hero
   ============================================ */
.hero-product-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.10),
    0 0 0 1px rgba(0,0,0,0.04);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  overflow: hidden;
  position: relative;
}
.hero-product-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--_accent, var(--gradient-brand));
}
.hero-product-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 14px 36px rgba(0,0,0,0.14),
    0 0 0 1px rgba(0,0,0,0.04);
}
.hero-product-card .hpc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.hero-product-card .hpc-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.hero-product-card .hpc-title {
  font-size: 12px;
  font-weight: 700;
  color: #1a1a2e;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.2;
}

/* --- CU Analytics mini dashboard --- */
.hpc-analytics { --_accent: linear-gradient(90deg, #667eea, #764ba2); }
.hpc-analytics .hpc-icon { background: #ede7f6; color: #667eea; }
.hpc-analytics .hpc-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
  margin-bottom: 8px;
}
.hpc-analytics .hpc-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-height: 6px;
}
.hpc-analytics .hpc-bar:nth-child(1) { height: 40%; background: #c4b5fd; }
.hpc-analytics .hpc-bar:nth-child(2) { height: 55%; background: #a78bfa; }
.hpc-analytics .hpc-bar:nth-child(3) { height: 35%; background: #c4b5fd; }
.hpc-analytics .hpc-bar:nth-child(4) { height: 70%; background: #8b5cf6; }
.hpc-analytics .hpc-bar:nth-child(5) { height: 85%; background: #7c3aed; }
.hpc-analytics .hpc-bar:nth-child(6) { height: 60%; background: #8b5cf6; }
.hpc-analytics .hpc-bar:nth-child(7) { height: 95%; background: linear-gradient(180deg, #667eea, #764ba2); }
.hpc-analytics .hpc-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.hpc-analytics .hpc-stat {
  text-align: center;
  flex: 1;
}
.hpc-analytics .hpc-stat-value {
  font-size: 14px;
  font-weight: 700;
  color: #667eea;
  line-height: 1;
}
.hpc-analytics .hpc-stat-label {
  font-size: 8px;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* --- SEO & AEO mini search result --- */
.hpc-seo { --_accent: linear-gradient(90deg, #34a853, #1e8e3e); }
.hpc-seo .hpc-icon { background: #e8f5e9; color: #34a853; }
.hpc-seo .hpc-search-bar {
  background: #f8f9fa;
  border: 1.5px solid #e8eaed;
  border-radius: 14px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.hpc-seo .hpc-search-bar i { color: #9aa0a6; font-size: 10px; }
.hpc-seo .hpc-search-bar span { font-size: 10px; color: #5f6368; }
.hpc-seo .hpc-result {
  background: linear-gradient(90deg, rgba(52,168,83,0.08) 0%, #fff 100%);
  border-left: 3px solid #34a853;
  border-radius: 8px;
  padding: 8px 10px;
}
.hpc-seo .hpc-result-rank {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #34a853, #1e8e3e);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
  float: right;
}
.hpc-seo .hpc-result-title {
  font-size: 11px;
  color: #1a0dab;
  font-weight: 500;
  display: block;
  margin-bottom: 2px;
}
.hpc-seo .hpc-result-desc {
  font-size: 9px;
  color: #70757a;
  line-height: 1.4;
  margin: 0;
}
.hpc-seo .hpc-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.hpc-seo .hpc-keyword {
  font-size: 8px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.hpc-seo .hpc-keyword.green { background: #e8f5e9; color: #2e7d32; }
.hpc-seo .hpc-keyword.blue  { background: #e3f2fd; color: #1565c0; }

/* --- Form Builder mini form --- */
.hpc-forms { --_accent: linear-gradient(90deg, #0891b2, #06b6d4); }
.hpc-forms .hpc-icon { background: #e0f2fe; color: #0891b2; }
.hpc-forms .hpc-field {
  background: #f8f9fa;
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  padding: 5px 8px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hpc-forms .hpc-field i {
  font-size: 9px;
  color: #94a3b8;
}
.hpc-forms .hpc-field span {
  font-size: 9px;
  color: #94a3b8;
}
.hpc-forms .hpc-field.filled span {
  color: #334155;
}
.hpc-forms .hpc-field-row {
  display: flex;
  gap: 5px;
}
.hpc-forms .hpc-field-row .hpc-field {
  flex: 1;
}
.hpc-forms .hpc-submit {
  background: linear-gradient(135deg, #0891b2, #06b6d4);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 0;
  font-size: 9px;
  font-weight: 600;
  width: 100%;
  text-align: center;
  letter-spacing: 0.3px;
}

/* --- Chatbot mini chat --- */
.hpc-chatbot { --_accent: linear-gradient(90deg, #ec4899, #be185d); }
.hpc-chatbot .hpc-icon { background: #fce7f3; color: #ec4899; }
.hpc-chatbot .hpc-chat-window {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hpc-chatbot .hpc-bubble {
  max-width: 85%;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 9px;
  line-height: 1.4;
}
.hpc-chatbot .hpc-bubble.bot {
  background: #fff;
  color: #334155;
  border: 1px solid #e2e8f0;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.hpc-chatbot .hpc-bubble.user {
  background: linear-gradient(135deg, #ec4899, #be185d);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.hpc-chatbot .hpc-typing {
  display: flex;
  gap: 3px;
  padding: 6px 10px;
  align-self: flex-start;
}
.hpc-chatbot .hpc-typing span {
  width: 5px; height: 5px;
  background: #cbd5e1;
  border-radius: 50%;
  animation: hpcBlink 1.4s infinite both;
}
.hpc-chatbot .hpc-typing span:nth-child(2) { animation-delay: 0.2s; }
.hpc-chatbot .hpc-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes hpcBlink {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}

/* --- Calculator mini display --- */
.hpc-calc { --_accent: linear-gradient(90deg, #f59e0b, #d97706); }
.hpc-calc .hpc-icon { background: #fef3c7; color: #d97706; }
.hpc-calc .hpc-display {
  background: #1e293b;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.hpc-calc .hpc-display-label {
  font-size: 8px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.hpc-calc .hpc-display-value {
  font-size: 18px;
  font-weight: 700;
  color: #f59e0b;
  line-height: 1;
  font-family: 'Manrope', sans-serif;
}
.hpc-calc .hpc-calc-meta {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.hpc-calc .hpc-calc-meta-item {
  flex: 1;
  text-align: center;
  background: #f8f9fa;
  border-radius: 6px;
  padding: 4px 6px;
}
.hpc-calc .hpc-calc-meta-value {
  font-size: 10px;
  font-weight: 700;
  color: #334155;
  line-height: 1;
}
.hpc-calc .hpc-calc-meta-label {
  font-size: 7px;
  color: #94a3b8;
  text-transform: uppercase;
}

/* --- CMS mini editor --- */
.hpc-cms { --_accent: linear-gradient(90deg, #4f46e5, #6366f1); }
.hpc-cms .hpc-icon { background: #eef2ff; color: #4f46e5; }
.hpc-cms .hpc-editor-toolbar {
  display: flex;
  gap: 3px;
  padding: 4px 6px;
  background: #f1f5f9;
  border-radius: 6px;
  margin-bottom: 6px;
}
.hpc-cms .hpc-editor-toolbar span {
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #64748b;
  border: 1px solid #e2e8f0;
}
.hpc-cms .hpc-editor-line {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  margin-bottom: 4px;
}
.hpc-cms .hpc-editor-line.short { width: 60%; }
.hpc-cms .hpc-editor-line.medium { width: 80%; }
.hpc-cms .hpc-editor-line.active {
  background: linear-gradient(90deg, #4f46e5, #6366f1);
  opacity: 0.3;
}
.hpc-cms .hpc-publish-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ecfdf5;
  color: #059669;
  font-size: 8px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 8px;
  margin-top: 4px;
}

/* Hero product card mobile adjustments */
@media (max-width: 991px) {
  .hero-product-card {
    padding: 10px 12px;
    border-radius: 12px;
  }
  .hero-product-card .hpc-title {
    font-size: 10px;
  }
  .hero-product-card .hpc-icon {
    width: 24px; height: 24px;
    font-size: 12px;
  }
}

/* ============================================
   PORTFOLIO COLLAGE + FLOATING BADGES
   Scoped to .portfolio-collage only (not global nav/header).
   ============================================ */
@keyframes avtecPortfolioBadgeFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

.portfolio-collage {
  position: relative;
  z-index: 0;
  padding: 10px 0 24px;
  isolation: isolate;
}

.hero-portfolio-collage {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 992px) {
  .hero-portfolio-collage {
    margin-right: 0;
    margin-left: auto;
  }
}

/* Homepage hero only: fixed aspect frame so badge % positions match portfolio even when image is slow or 404 */
.hero-portfolio-collage .portfolio-collage-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
}

.hero-portfolio-collage .portfolio-collage-visual .portfolio-shot.main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-portfolio-collage .portfolio-collage-visual .portfolio-shot.main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 24px 32px rgba(10, 20, 48, 0.18));
}

.hero-portfolio-collage .portfolio-collage-visual .portfolio-collage-badges {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero-portfolio-collage .portfolio-collage-visual .portfolio-collage-badge {
  pointer-events: auto;
}

.portfolio-collage .portfolio-shot {
  position: absolute;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(10, 20, 48, 0.16);
  background: transparent;
}

.portfolio-collage .portfolio-shot.mockup {
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
}

.portfolio-collage .portfolio-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.portfolio-collage .portfolio-shot.mockup img {
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 24px 32px rgba(10, 20, 48, 0.18));
}

.portfolio-collage .portfolio-shot.main {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1;
}

.portfolio-collage .portfolio-shot.main img {
  height: auto;
}

.portfolio-collage .portfolio-collage-badges {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.portfolio-collage .portfolio-collage-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(10, 20, 48, 0.08);
  color: #0a1430;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  max-width: min(100%, 220px);
  box-shadow: 0 16px 42px rgba(10, 20, 48, 0.12);
  pointer-events: auto;
  animation: avtecPortfolioBadgeFloat 4s ease-in-out infinite;
}

.portfolio-collage .portfolio-collage-badge i {
  font-size: 18px;
  color: #0e96b8;
  flex-shrink: 0;
}

.portfolio-collage .portfolio-collage-badge span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.portfolio-collage .portfolio-collage-badge.cms {
  left: 8%;
  top: 12%;
  animation-delay: 0.5s;
}

.portfolio-collage .portfolio-collage-badge.mobile {
  right: 2%;
  top: 62px;
  animation-delay: 0s;
}

.portfolio-collage .portfolio-collage-badge.interface {
  left: 0;
  top: 52%;
  animation-delay: 1.5s;
}

.portfolio-collage .portfolio-collage-badge.support {
  left: 12%;
  bottom: 15%;
  animation-delay: 2.5s;
}

.portfolio-collage .portfolio-collage-badge.award {
  right: 6%;
  bottom: 36px;
  animation-delay: 1s;
}

@media (max-width: 991.98px) {
  .portfolio-collage {
    padding-bottom: 0;
  }

  .portfolio-collage:not(.hero-portfolio-collage) .portfolio-shot,
  .portfolio-collage:not(.hero-portfolio-collage) .portfolio-shot.main {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
  }

  .portfolio-collage:not(.hero-portfolio-collage) .portfolio-collage-badges {
    position: relative;
    inset: auto;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    pointer-events: auto;
  }

  .portfolio-collage:not(.hero-portfolio-collage) .portfolio-collage-badge,
  .portfolio-collage:not(.hero-portfolio-collage) .portfolio-collage-badge.cms,
  .portfolio-collage:not(.hero-portfolio-collage) .portfolio-collage-badge.mobile,
  .portfolio-collage:not(.hero-portfolio-collage) .portfolio-collage-badge.interface,
  .portfolio-collage:not(.hero-portfolio-collage) .portfolio-collage-badge.support,
  .portfolio-collage:not(.hero-portfolio-collage) .portfolio-collage-badge.award {
    position: relative;
    inset: auto;
    flex: 0 1 auto;
    max-width: 100%;
    animation: none;
  }

  .hero-portfolio-collage .portfolio-collage-visual {
    aspect-ratio: 3 / 2;
    max-width: 100%;
  }

  .hero-portfolio-collage .portfolio-collage-visual .portfolio-shot.main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .hero-portfolio-collage .portfolio-collage-visual .portfolio-collage-badges {
    position: absolute;
    inset: 0;
    display: block;
    margin-top: 0;
  }

  .hero-portfolio-collage .portfolio-collage-visual .portfolio-collage-badge,
  .hero-portfolio-collage .portfolio-collage-visual .portfolio-collage-badge.cms,
  .hero-portfolio-collage .portfolio-collage-visual .portfolio-collage-badge.mobile,
  .hero-portfolio-collage .portfolio-collage-visual .portfolio-collage-badge.interface,
  .hero-portfolio-collage .portfolio-collage-visual .portfolio-collage-badge.support,
  .hero-portfolio-collage .portfolio-collage-visual .portfolio-collage-badge.award {
    position: absolute;
    animation: avtecPortfolioBadgeFloat 4s ease-in-out infinite;
  }

  .hero-portfolio-collage {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 575.98px) {
  .portfolio-collage:not(.hero-portfolio-collage) {
    margin-inline: -8px;
  }

  /* Smartphones: floating/wrapped badges are noise on a narrow strip */
  .portfolio-collage .portfolio-collage-badges {
    display: none !important;
  }

  .portfolio-collage:not(.hero-portfolio-collage) .portfolio-collage-badge {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}

/* ============================================
   LEGACY SUPPORT
   Keep these for backward compatibility
   ============================================ */

/* ============================================
   ORBITING ICONS ANIMATION
   Calculator hero with rotating financial icons
   ============================================ */

/* Icon Cluster Container */
.icon-cluster {
  position: relative;
  width: 220px;
  height: 220px;
}

/* Center main icon */
.icon-main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background-color: var(--avtec-cyan);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 0 20px rgba(16, 173, 213, 0.3);
}

.icon-main i {
  font-size: 40px;
  color: white;
}

/* Rotating orbit ring */
.icon-orbit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px dashed rgba(16, 173, 213, 0.25);
  border-radius: 50%;
  animation: orbitSpin 30s linear infinite;
}

@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Satellite icons on the orbit */
.icon-satellite {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(var(--rotation)) translateY(-90px) rotate(calc(-1 * var(--rotation)));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.icon-satellite i {
  font-size: 20px;
  color: var(--avtec-cyan);
}

/* ============================================
   FOOTER - PARTICLES + GLASSMORPHISM GLOWS
   ============================================ */

/* Wave Color - matches footer gradient start */
.text-footer-wave {
  color: #0A1430;
}

/* Footer Base - gradient background matching wave */
footer.bg-navy {
  position: relative;
  background: linear-gradient(180deg, #0A1430 0%, #0e1b3d 40%, #142448 100%) !important;
  overflow: hidden;
}

/* === GLOW EFFECTS === */
.footer-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Cyan glow - bottom right */
.footer-glow-cyan {
  width: 500px;
  height: 500px;
  bottom: -150px;
  right: -100px;
  background: radial-gradient(circle, rgba(16, 173, 213, 0.35) 0%, rgba(16, 173, 213, 0.1) 40%, transparent 70%);
  filter: blur(60px);
  animation: glowFloat 10s ease-in-out infinite;
}

/* Magenta glow - bottom left */
.footer-glow-magenta {
  width: 450px;
  height: 450px;
  bottom: -100px;
  left: -80px;
  background: radial-gradient(circle, rgba(190, 24, 93, 0.3) 0%, rgba(190, 24, 93, 0.08) 40%, transparent 70%);
  filter: blur(60px);
  animation: glowFloat 12s ease-in-out infinite reverse;
}

/* Purple glow - center */
.footer-glow-purple {
  width: 400px;
  height: 400px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, rgba(139, 92, 246, 0.05) 40%, transparent 70%);
  filter: blur(80px);
  animation: glowPulse 8s ease-in-out infinite;
}

@keyframes glowFloat {
  0%, 100% { 
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }
  50% { 
    transform: translate(20px, -20px) scale(1.1);
    opacity: 1;
  }
}

@keyframes glowPulse {
  0%, 100% { 
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% { 
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

/* === PARTICLE CANVAS === */
.footer-particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
}

/* Content above effects */
footer.bg-navy > .container {
  position: relative;
  z-index: 2;
}

/* === RESPONSIVE === */
@media (max-width: 991.98px) {
  .footer-glow-cyan,
  .footer-glow-magenta {
    width: 350px;
    height: 350px;
    filter: blur(50px);
  }
  
  .footer-glow-purple {
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 767.98px) {
  .footer-particles-canvas {
    opacity: 0.3;
  }
  
  .footer-glow-cyan,
  .footer-glow-magenta,
  .footer-glow-purple {
    width: 250px;
    height: 250px;
    filter: blur(40px);
    opacity: 0.6;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .footer-glow-cyan,
  .footer-glow-magenta,
  .footer-glow-purple {
    animation: none;
  }
}

/* === FOOTER UTILITY CLASSES === */

/* Pink accent link (phone, brand name) */
.link-pink {
  color: var(--avtec-pink) !important;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.link-pink:hover {
  opacity: 0.8;
}

/* Inverse link for footer nav */
.link-inverse {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}
.link-inverse:hover,
.link-inverse:focus,
.text-inverse a.link-inverse:hover,
.text-inverse a.link-inverse:focus {
  color: var(--avtec-pink) !important;
  border-color: var(--avtec-pink) !important;
}

/* Width utility */
.w-12 {
  width: 3rem !important;
}

/* ============================================
   WCAG 2.4.7 Focus Visible — Override theme outline:0 rules
   style.css strips :focus outlines from links, buttons, dropdowns,
   and interactive controls. These :focus-visible rules restore 
   keyboard focus indicators without affecting mouse/touch users.
============================================ */
a:focus-visible {
  outline: 2px solid var(--avtec-cyan);
  outline-offset: 2px;
}
button:focus-visible {
  outline: 2px solid var(--avtec-cyan);
  outline-offset: 2px;
}
.btn-close:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(16, 173, 213, 0.35);
  outline: none;
}
.dropdown-item:focus-visible {
  background-color: var(--bs-dropdown-link-hover-bg);
  outline: 2px solid var(--avtec-cyan);
  outline-offset: -2px;
}
.dropdown-toggle:focus-visible {
  outline: 2px solid var(--avtec-cyan);
  outline-offset: 2px;
}
.offcanvas-header a:focus-visible {
  outline: 2px solid var(--avtec-cyan);
  outline-offset: 2px;
}
.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible {
  outline: 2px solid var(--avtec-cyan);
  outline-offset: 2px;
}
.swiper-pagination-bullet:focus-visible {
  outline: 2px solid var(--avtec-cyan);
  outline-offset: 2px;
}
.has-tooltip:focus-visible,
.has-popover:focus-visible {
  outline: 2px solid var(--avtec-cyan);
  outline-offset: 2px;
}
.gbtn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.glightbox-container:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.plyr__control:focus-visible {
  outline: 3px dotted #00b2ff;
  outline-offset: 2px;
}
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Back to top button reset (WCAG: changed from div to button) */
button.progress-wrap {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.social a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button.progress-wrap:focus {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/* ============================================
   VIDEO WRAPPER OVERLAY (About page hero)
   ============================================ */
.video-wrapper {
  position: relative;
}
.video-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 1;
}
.divider-top {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 2;
  pointer-events: none;
  display: none;
}
@media (min-width: 992px) {
  .divider-top {
    display: block;
  }
}
.video-wrapper.bg-overlay.bg-overlay-gradient:after {
  opacity: 0.6;
  background: linear-gradient(120deg, #3d0a4c 20%, #ff1493 40%, #3d0a4c 60%, #1a0a4c 80%);
}
.video-wrapper.bg-overlay:after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(30, 34, 40, 0.6);
  z-index: 1;
}

/* ── Feature Grid (Case Studies) ── */
.feature-grid .card {
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-grid .card:hover {
  background-color: #f8f9fa;
}
.feature-grid .card-link {
  cursor: pointer;
}
.feature-grid .card-link:hover {
  background-color: #f5f3ff;
}
.feature-grid-icon {
  color: #605DBA;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .navbar,
  .offcanvas,
  .progress-wrap,
  .footer-glow,
  .footer-glow-cyan,
  .footer-glow-magenta,
  .footer-glow-purple,
  .hero-bg-hyperfield canvas,
  .hero-grain,
  .hero-vignette,
  .particles-container,
  .btn-avtec,
  [data-cues],
  .swiper-button-next,
  .swiper-button-prev,
  .swiper-pagination {
    display: none !important;
  }

  body {
    color: #000 !important;
    background: #fff !important;
  }

  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }

  .hero-bg-hyperfield,
  .bg-lightbluepurple,
  .bg_navy,
  .bg_slate,
  .bg_darkpurple,
  .bg_blackblue,
  footer.bg-navy {
    background: #fff !important;
    color: #000 !important;
  }

  .card {
    border: 1px solid #ddd;
    box-shadow: none !important;
  }

  img {
    max-width: 100% !important;
  }
}

/* =========================================================================
   QA PRE-LAUNCH FIXES — Phase A (template)
   See _qa/punchlist.md  |  applied 2026-04
   ========================================================================= */

/* P1-1 / FIX-101 — .dropdown-menu.dropdown-lg overflowed the viewport by
   ~50px at 1024px (panel was 809px wide). Clamp panel width to viewport and
   let its three columns wrap at small-desktop sizes. */
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .dropdown-menu.dropdown-lg {
    max-width: min(1100px, calc(100vw - 2rem));
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-expand-lg .navbar-nav .dropdown-menu.dropdown-lg .dropdown-lg-content {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu.dropdown-lg .dropdown-lg-content > div {
    flex: 1 1 220px;
    min-width: 0;
    margin-left: 0 !important;
  }
}

/* P1-5 — .text-muted previously resolved to #aab0bc (contrast 2.8:1 on #fff,
   fails WCAG AA). Token-swap to a darker slate that passes 4.5:1. */
.text-muted {
  color: #56627a !important;
}

/* P1-25 — Make the skip-to-content link unambiguously visible when focused
   (Bootstrap's visually-hidden-focusable only restores box model, not style).
   Also enforce z-index so it sits above fixed headers. */
.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-within {
  position: fixed !important;
  top: 0.75rem !important;
  left: 0.75rem !important;
  z-index: 1080 !important;
  width: auto !important;
  height: auto !important;
  padding: 0.75rem 1.25rem !important;
  margin: 0 !important;
  clip: auto !important;
  white-space: normal !important;
  background: var(--avtec-navy, #0f172a);
  color: #fff !important;
  font-weight: 600;
  border-radius: 0.375rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  outline: 3px solid var(--avtec-cyan, #10add5);
  outline-offset: 2px;
  text-decoration: none;
}

/* ============================================
   HOMEPAGE PREMIER TABS (conversion module)
   ============================================ */
.avtec-premier-tabs .tab-pane {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}
.avtec-premier-label {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.avtec-proof-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.avtec-proof-chips span {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.1), rgba(190, 24, 93, 0.1));
  color: var(--avtec-navy);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
}
.avtec-cross-sell-module {
  border-radius: 0.9rem;
  padding: 1rem 1rem 0.9rem;
  margin-top: 1rem;
  border: 1px solid transparent;
}
.avtec-cross-sell-module h5 {
  font-size: 0.95rem !important;
  margin-bottom: 0.65rem;
}
.avtec-cross-sell-links {
  display: grid;
  gap: 0.5rem;
}
.avtec-cross-sell-links a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.65rem;
  border-radius: 0.6rem;
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none !important;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  color: var(--avtec-navy) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.avtec-cross-sell-links a::after {
  content: "\2192";
  margin-left: 0.5rem;
}
.avtec-cross-sell-links a:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.1);
}
.avtec-cross-sell-yellow {
  background: linear-gradient(135deg, rgba(250, 183, 88, 0.16), rgba(255, 255, 255, 0.92));
  border-color: rgba(250, 183, 88, 0.35);
}
.avtec-cross-sell-green {
  background: linear-gradient(135deg, rgba(69, 196, 160, 0.16), rgba(255, 255, 255, 0.92));
  border-color: rgba(69, 196, 160, 0.35);
}
.avtec-cross-sell-red {
  background: linear-gradient(135deg, rgba(229, 94, 94, 0.16), rgba(255, 255, 255, 0.92));
  border-color: rgba(229, 94, 94, 0.35);
}
.avtec-dual-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
@media (max-width: 767.98px) {
  .avtec-premier-tabs .tab-pane {
    padding: 1.5rem 1rem;
  }
  .avtec-cross-sell-links a {
    font-size: 0.8rem;
  }
}

/* ============================================
   20. SOFT COLOR BACKGROUNDS
   ============================================
   The theme's default --bs-soft-* values (~3% tint) are too pale to register
   visually as a background on white cards. These overrides bump the tint to
   ~15-20% saturation so circular icon avatars (e.g. testimonial cards) read
   as clearly tinted. Hex values chosen to harmonize with the matching .text-*
   color so icon and background feel cohesive.
   ============================================ */
.bg-soft-green   { background-color: #d1e7dd !important; }
.bg-soft-red     { background-color: #f8d7da !important; }
.bg-soft-aqua    { background-color: #cff4fc !important; }
.bg-soft-yellow  { background-color: #fff3cd !important; }
.bg-soft-purple  { background-color: #e2d9f3 !important; }
.bg-soft-pink    { background-color: #f7d6e6 !important; }
.bg-soft-orange  { background-color: #fde4d8 !important; }
.bg-soft-primary { background-color: #d8e3fa !important; }


/* ============================================
   Portfolio / Project Cards Slider
   --------------------------------------------
   Shared visual treatment for the project sliders on the homepage
   and the /portfolio/ page. Each .swiper-slide renders as a soft
   pastel card containing a consistently sized website screenshot
   with rounded corners and a layered drop shadow. Background colors
   rotate across 6 slides for visual variety, then repeat.

   To apply: add the `portfolio-slider` class to the .swiper-container.
   ============================================ */
.portfolio-slider .swiper-slide figure {
  background: #e8f4f8;
  border-radius: 16px;
  padding: 1.5rem 1.5rem 0 1.5rem;
  margin-bottom: 1rem !important;
  box-shadow:
    0 12px 32px -16px rgba(15, 30, 60, 0.12),
    0 4px 12px -4px rgba(15, 30, 60, 0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
}

.portfolio-slider .swiper-slide figure:hover {
  transform: translateY(-4px);
  box-shadow:
    0 24px 48px -16px rgba(15, 30, 60, 0.2),
    0 8px 16px -4px rgba(15, 30, 60, 0.1);
}

.portfolio-slider .swiper-slide figure img {
  height: 380px !important;
  object-fit: contain !important;
  object-position: center bottom;
  width: 100% !important;
  border-radius: 0;
  transition: transform 0.6s ease;
}

.portfolio-slider .swiper-slide figure:hover img {
  transform: scale(1.02);
}

/* Rotating pastel card backgrounds (cycle every 6 slides) */
.portfolio-slider .swiper-slide:nth-child(6n+1) figure { background: #e8f4f8; } /* light blue */
.portfolio-slider .swiper-slide:nth-child(6n+2) figure { background: #f5f0e8; } /* light tan */
.portfolio-slider .swiper-slide:nth-child(6n+3) figure { background: #f0f4e8; } /* light green */
.portfolio-slider .swiper-slide:nth-child(6n+4) figure { background: #f4e8f0; } /* light pink */
.portfolio-slider .swiper-slide:nth-child(6n+5) figure { background: #e8e8f4; } /* light lavender */
.portfolio-slider .swiper-slide:nth-child(6n+6) figure { background: #f4f4e8; } /* light cream */

/* Scale image height down on smaller viewports so cards stay proportional */
@media (max-width: 991.98px) {
  .portfolio-slider .swiper-slide figure img {
    height: 320px !important;
  }
}

@media (max-width: 575.98px) {
  .portfolio-slider .swiper-slide figure img {
    height: 280px !important;
  }
}

/* --------------------------------------------
   Modifier: transparent PNG mockups
   --------------------------------------------
   For slides whose image is a transparent PNG (device mockups,
   cutouts, identity assets) rather than a flat screenshot. The
   image keeps its natural shape (no rounded corners, no shadow)
   and is scaled down + pinned to the bottom edge of the card so
   the device appears to "sit" on the pastel surface.

   Apply by adding `figure-mockup` to the <figure> element:
     <figure class="rounded mb-7 figure-mockup">...</figure>
   -------------------------------------------- */
.portfolio-slider .swiper-slide figure.figure-mockup {
  padding: 1.5rem 2rem 0 2rem !important;
}

.portfolio-slider .swiper-slide figure.figure-mockup img {
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

.portfolio-slider .swiper-slide figure.figure-mockup:hover img {
  transform: none;
}


/* ############################################################################
   ## PART B — NEW avtec.brand.css (design system)
   ############################################################################ */

/* ============================================================================
   AVTEC MEDIA GROUP — avtec.brand.css
   Complete Brand Stylesheet (full replacement for avtec.css)
s   ============================================================================

   TABLE OF CONTENTS
   -----------------
   1.  @FONT-FACE & IMPORTS ............. ~line 28   (self-hosted variable fonts, JetBrains Mono)
   2.  CSS CUSTOM PROPERTIES ............ ~line 75   (design tokens, legacy bridges, z-index)
   3.  BASE STYLES ...................... ~line 295  (html, body, ::selection)
   4.  TYPOGRAPHY ....................... ~line 330  (fluid clamp() scale, display classes, code)
   5.  TEXT COLORS ...................... ~line 410  (legacy utilities + new fg-* utils)
   6.  GRADIENT TEXT .................... ~line 460  (signature, gradient-avtec-1..8, animated)
   7.  CONTENT LINK STYLES .............. ~line 620  (inline gradient underlines)
   8.  SECTION STATEMENT ................ ~line 690  (statement, bg-navy-fade, section-proud)
   9.  BACKGROUND GRADIENTS ............. ~line 760  (bg_navy, bg_tech, bg_pinkblue, etc.)
   10. HYPERFIELD HERO .................. ~line 840  (mesh gradient hero + canvas + 7 themes)
   11. NAVIGATION ....................... ~line 1100 (tabs, services, dropdowns, offcanvas)
   12. BUTTONS .......................... ~line 1520 (Bootstrap .btn variants)
   13. HERO IMAGE OVERLAY ............... ~line 1650
   14. CARDS & UTILITIES ................ ~line 1680
   15. COMPONENT OVERRIDES .............. ~line 1740
   16. MODERN HERO STYLES ............... ~line 1780 (glass-card, stat-badge, glow buttons)
   17. HERO PRODUCT CARDS ............... ~line 1960 (hpc-* mini UI cards)
   18. ORBITING ICONS ................... ~line 2320
   19. FOOTER ........................... ~line 2400
   20. ACCESSIBILITY (WCAG) ............. ~line 2570
   21. VIDEO WRAPPER .................... ~line 2660
   22. FEATURE GRID ..................... ~line 2700
   23. PRINT STYLES ..................... ~line 2720
   24. QA FIXES ......................... ~line 2780
   25. PREMIER TABS ..................... ~line 2830
   26. SOFT BACKGROUNDS ................. ~line 2930
   27. PORTFOLIO SLIDER ................. ~line 2950
   28. DESIGN SYSTEM — BEM BUTTONS ...... ~line 3050
   29. DESIGN SYSTEM — FORM FIELDS ...... ~line 3180
   30. DESIGN SYSTEM — BADGES ........... ~line 3230
   31. DESIGN SYSTEM — EYEBROW-DOT ...... ~line 3310
   32. DESIGN SYSTEM — CARDS ............ ~line 3340
   33. DESIGN SYSTEM — CHIPS / RULES .... ~line 3420
   34. DESIGN SYSTEM — LAYOUT HELPERS ... ~line 3450
   35. DESIGN SYSTEM — SITE HEADER ...... ~line 3480
   36. DESIGN SYSTEM — HERO SCAFFOLD .... ~line 3530
   37. HERO A — STATEMENT ............... ~line 3570
   38. HERO B — INSTITUTIONAL ........... ~line 3690
   39. HERO C — WORK FIRST .............. ~line 3790
   40. HERO D — MESH GRADIENT ........... ~line 3900
   41. HERO E — EDITORIAL ............... ~line 4020
   42. DESIGN SYSTEM — KBD .............. ~line 4140
   43. DESIGN SYSTEM — FOCUS / MOTION ... ~line 4160

   ============================================================================ */


/* ============================================================================
   1. @FONT-FACE & IMPORTS
   ============================================================================ */

/* ============================================================================
   2. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================================ */
:root {

  /* ---------- BRAND CORE (straight from the logo) ---------- */
  --avtec-cyan-50:    #E6F7FB;   /* added: pale tint for icon backgrounds, badge bg, etc. */
  --avtec-cyan-100:   #C7EEF6;
  --avtec-cyan-200:   #9BE3F0;
  --avtec-cyan-300:   #7AE0F0;
  --avtec-cyan-400:   #38CCEC;
  --avtec-cyan-500:   #18B8DC;
  --avtec-cyan-600:   #0E96B8;
  --avtec-cyan-700:   #0A7490;

  --avtec-pink-50:    #FDECF3;   /* added: pale tint for icon backgrounds, badge bg, etc. */
  --avtec-pink-100:   #FAD0E1;
  --avtec-pink-200:   #F4ABC9;
  --avtec-pink-300:   #F9A1C1;
  --avtec-pink-400:   #F46AA1;
  --avtec-pink-500:   #EC3E86;
  --avtec-pink-600:   #C82C6E;
  --avtec-pink-700:   #9E1E54;

  --avtec-deep-500:   #0B3A8C;
  --avtec-deep-600:   #082C6B;
  --avtec-deep-700:   #061F4C;

  /* ---------- INK (headings, body) ---------- */
  --avtec-ink-900:    #0A1430;
  --avtec-ink-800:    #141E3D;
  --avtec-ink-700:    #1F2A4A;
  --avtec-ink-600:    #334160;
  --avtec-ink-500:    #4E5A78;
  --avtec-ink-400:    #7A849E;
  --avtec-ink-300:    #A7AEC2;
  --avtec-ink-200:    #D1D6E0;
  --avtec-ink-100:    #E7EAF0;

  /* ---------- SURFACE (cool whites tinted by brand) ---------- */
  --surface-0:        #FFFFFF;
  --surface-1:        #FAFBFD;
  --surface-2:        #F4F6FA;
  --surface-3:        #EEF1F7;
  --surface-4:        #E3E8F0;

  --surface-dark-0:   #0A1430;
  --surface-dark-1:   #101A38;
  --surface-dark-2:   #162244;
  --surface-dark-3:   #1E2B52;

  /* ---------- SEMANTIC ---------- */
  --success-500:      #14B8A6;
  --success-600:      #0E8F82;
  --success-100:      #E2F7F3;

  --warning-500:      #F4B740;
  --warning-600:      #B9801B;
  --warning-100:      #FCEFD4;

  --danger-500:       #F05D6F;
  --danger-600:       #C8394B;
  --danger-100:       #FBE4E7;

  --info-500:         var(--avtec-cyan-500);
  --info-600:         var(--avtec-cyan-600);
  --info-100:         #DFF4FA;

  /* ---------- FOREGROUND / BACKGROUND TOKENS ---------- */
  --fg-1:             var(--avtec-ink-900);
  --fg-2:             var(--avtec-ink-600);
  --fg-3:             var(--avtec-ink-400);
  --fg-inverse:       #FFFFFF;
  --fg-brand:         var(--avtec-cyan-600);
  --fg-brand-strong:  var(--avtec-pink-600);

  --bg-1:             var(--surface-1);
  --bg-2:             var(--surface-2);
  --bg-dark:          var(--surface-dark-0);

  --border-1:         var(--avtec-ink-100);
  --border-2:         var(--avtec-ink-200);
  --border-strong:    var(--avtec-ink-600);
  --border-brand:     var(--avtec-cyan-500);

  /* ---------- ACCENTS / GRADIENTS ---------- */
  --gradient-signature:
    linear-gradient(110deg, var(--avtec-cyan-500) 0%, var(--avtec-pink-500) 100%);
  --gradient-authority:
    linear-gradient(160deg, var(--avtec-ink-900) 0%, var(--avtec-deep-500) 100%);
  --gradient-edge:
    linear-gradient(160deg, var(--avtec-ink-900) 0%, var(--avtec-deep-600) 55%, var(--avtec-cyan-700) 100%);
  --gradient-faint:
    linear-gradient(135deg, rgba(24,184,220,0.08) 0%, rgba(236,62,134,0.06) 100%);

  --selection-bg:     rgba(24, 184, 220, 0.25);
  --selection-fg:     var(--avtec-ink-900);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display:     'Outfit', 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-body:        'Figtree', 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — fluid clamp() */
  --fs-display-2xl:   clamp(3.5rem, 4vw + 2rem, 6rem);
  --fs-display-xl:    clamp(2.75rem, 3vw + 1.5rem, 4.5rem);
  --fs-h1:            clamp(2.25rem, 2vw + 1.25rem, 3.25rem);
  --fs-h2:            clamp(1.75rem, 1.25vw + 1rem, 2.5rem);
  --fs-h3:            clamp(1.375rem, 0.75vw + 0.875rem, 1.75rem);
  --fs-h4:            1.25rem;
  --fs-h5:            1.125rem;
  --fs-h6:            1rem;
  --fs-lead:          1.125rem;
  --fs-body:          0.9rem;   /* matches legacy avtec.css + Sandbox style.min.css base */
  --fs-small:         0.875rem;
  --fs-xs:            0.75rem;
  --fs-eyebrow:       0.75rem;

  /* Line heights */
  --lh-tight:         1.05;
  --lh-snug:          1.15;
  --lh-heading:       1.2;
  --lh-body:          1.7;    /* matches legacy avtec.css + Sandbox style.min.css base */
  --lh-prose:         1.7;

  /* Letter spacing */
  --ls-tightest:      -0.04em;
  --ls-tight:         -0.02em;
  --ls-snug:          -0.01em;
  --ls-normal:        0;
  --ls-wide:          0.02em;
  --ls-eyebrow:       0.14em;

  /* Weights */
  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-black:         800;

  /* ---------- SPACING (4px base) ---------- */
  --space-0:    0;
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;
  --space-32:   8rem;

  /* Container */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1320px;

  /* ---------- RADII ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs:  0 1px 2px 0 rgba(10, 20, 48, 0.06);
  --shadow-sm:  0 2px 4px -1px rgba(10, 20, 48, 0.08), 0 1px 2px rgba(10, 20, 48, 0.06);
  --shadow-md:  0 8px 16px -4px rgba(10, 20, 48, 0.10), 0 2px 4px rgba(10, 20, 48, 0.06);
  --shadow-lg:  0 18px 36px -12px rgba(10, 20, 48, 0.18), 0 6px 12px rgba(10, 20, 48, 0.08);
  --shadow-xl:  0 30px 60px -15px rgba(10, 20, 48, 0.22), 0 10px 20px rgba(10, 20, 48, 0.08);

  --shadow-brand-glow: 0 0 0 4px rgba(24, 184, 220, 0.22);
  --shadow-pink-glow:  0 0 0 4px rgba(236, 62, 134, 0.22);

  /* ---------- MOTION ---------- */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-xs:   120ms;
  --dur-sm:   180ms;
  --dur-md:   260ms;
  --dur-lg:   420ms;
  --dur-xl:   680ms;

  /* ---------- FOCUS ---------- */
  --focus-ring-color: var(--avtec-cyan-600);
  --focus-ring:       0 0 0 2px var(--surface-0), 0 0 0 4px var(--focus-ring-color);

  /* ---------- LEGACY BRIDGE ALIASES ----------
     Map old token names to new design system values so existing HTML keeps working. */
  --avtec-navy:        var(--avtec-ink-900);
  --avtec-navy-light:  var(--avtec-ink-700);
  --avtec-heading:     var(--avtec-ink-900);
  --avtec-slate:       var(--avtec-ink-600);
  --avtec-teal:        var(--avtec-cyan-600);
  --avtec-teal-light:  var(--avtec-cyan-400);
  --avtec-cyan:        var(--avtec-cyan-500);
  --avtec-magenta:     var(--avtec-pink-600);
  --avtec-pink:        var(--avtec-pink-500);
  --avtec-pink-light:  var(--avtec-pink-400);
  --avtec-purple:      #6d28d9;
  --avtec-purple-light:#8b5cf6;
  --avtec-indigo:      var(--avtec-deep-500);
  --avtec-error:       var(--danger-500);

  /* Legacy gradient aliases */
  --gradient-brand:    var(--gradient-signature);
  --gradient-navy:     var(--gradient-authority);
  --gradient-tech:     var(--gradient-edge);
  --gradient-accent:   linear-gradient(135deg, #6d28d9 0%, var(--avtec-pink-600) 100%);

  /* Bootstrap Primary Override */
  --bs-primary:          var(--avtec-ink-900);
  --bs-primary-rgb:      10, 20, 48;

  /* Link Colors — brand cyan, WCAG AA safe */
  --bs-link-color:       var(--avtec-cyan-600);
  --bs-link-color-rgb:   14, 150, 184;
  --bs-link-hover-color: var(--avtec-cyan-700);
  --bs-link-hover-color-rgb: 10, 116, 144;

  /* Z-Index Scale
     -1 = behind content (::before decorations)
      0 = base / footer glows
      1 = content layer / overlays / video borders
      2 = dividers / grain textures / footer content
      3 = hero content (text over effects)
     Bootstrap handles higher values: dropdown(1000), sticky(1020),
     fixed(1030), offcanvas(1040), modal(1050), tooltip(1070) */
}


/* ============================================================================
   3. BASE STYLES
   ============================================================================ */
html {
  scroll-behavior: smooth !important;
  overscroll-behavior-x: none;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto !important;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}


/* ============================================================================
   4. TYPOGRAPHY — Fluid clamp() scale from design system
   ============================================================================ */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1) !important;
  text-wrap: balance;
}

.text-heading { color: var(--avtec-heading) !important; }

h1, .h1 {
  font-size: var(--fs-h1) !important;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
}

h2, .h2 {
  font-size: var(--fs-h2) !important;
  letter-spacing: var(--ls-tight);
}

h3, .h3 {
  font-size: var(--fs-h3) !important;
  letter-spacing: var(--ls-snug);
}

h4, .h4 {
  font-size: var(--fs-h4) !important;
  letter-spacing: var(--ls-snug);
  font-weight: var(--fw-semibold);
}

h5, .h5 {
  font-size: var(--fs-h5) !important;
  font-weight: var(--fw-semibold);
}

h6, .h6 {
  font-size: var(--fs-h6) !important;
  font-weight: var(--fw-semibold);
}

/* Display classes */
.display-2xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tightest);
}
.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tightest);
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-prose);
  color: var(--lead-color, var(--fg-2));
  font-weight: var(--lead-weight, var(--fw-medium));
}

/* Hero / dark-bg opt-out: keep these inheriting their white/light color so
   .lead inside .text-white containers (or with its own .text-white/.text-light)
   doesn't get forced back to body grey. */
.text-white .lead,
.text-light .lead,
.lead.text-white,
.lead.text-light {
  color: inherit;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-brand);
}

.small { font-size: var(--fs-small); }
.xs    { font-size: var(--fs-xs); }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
:not(pre) > code {
  background: var(--surface-3);
  color: var(--avtec-deep-600);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-1);
}


/* ============================================================================
   5. TEXT COLORS
   ============================================================================ */
.text-avtec-navy {
  color: var(--avtec-navy) !important;
}

.text-avtec-teal {
  color: var(--avtec-teal) !important;
}

.text-avtec-cyan {
  color: var(--avtec-cyan) !important;
}

.text-avtec-magenta {
  color: var(--avtec-magenta) !important;
}

.text-avtec-purple {
  color: var(--avtec-purple) !important;
}

.text-darkpink {
  color: var(--avtec-magenta) !important;
}

.text-purp {
  color: var(--avtec-purple) !important;
}

/* New design system text utilities */
.text-fg-1 { color: var(--fg-1) !important; }
.text-fg-2 { color: var(--fg-2) !important; }
.text-fg-3 { color: var(--fg-3) !important; }
.text-inverse { color: var(--fg-inverse) !important; }
.text-brand   { color: var(--fg-brand) !important; }
.text-accent  { color: var(--fg-brand-strong) !important; }

/* Shadow utility classes */
.shadow-xs         { box-shadow: var(--shadow-xs) !important; }
.shadow-sm         { box-shadow: var(--shadow-sm) !important; }
.shadow-md         { box-shadow: var(--shadow-md) !important; }
.shadow-lg         { box-shadow: var(--shadow-lg) !important; }
.shadow-xl         { box-shadow: var(--shadow-xl) !important; }
.shadow-brand-glow { box-shadow: var(--shadow-brand-glow) !important; }
.shadow-pink-glow  { box-shadow: var(--shadow-pink-glow) !important; }


/* ============================================================================
   6. GRADIENT TEXT
   ============================================================================ */

/* Signature gradient text */
.text-signature {
  background-image: var(--gradient-signature);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Primary brand gradient */
.avtec-gradient-text {
  background-image: var(--gradient-signature);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Tech-focused gradient - navy to teal */
.gradient-text-tech {
  background-image: linear-gradient(135deg, var(--avtec-navy) 0%, var(--avtec-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Brand heading gradients — logo black + blue variations */
.gradient-avtec-1 {
  background-image: linear-gradient(100deg, #1a1a2e 20%, #10add5 85%) !important;
  background-size: 130% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.gradient-avtec-2 {
  background-image: linear-gradient(100deg, #1a1a2e 20%, #22d3ee 85%) !important;
  background-size: 130% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.gradient-avtec-3 {
  background-image: linear-gradient(100deg, #1a1a2e 20%, #0891b2 85%) !important;
  background-size: 130% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.gradient-avtec-4 {
  background-image: linear-gradient(100deg, #1a1a2e 20%, #0ea5e9 85%) !important;
  background-size: 130% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.gradient-avtec-5 {
  background-image: linear-gradient(100deg, #1a1a2e 20%, #38bdf8 85%) !important;
  background-size: 130% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.gradient-avtec-6 {
  background-image: linear-gradient(100deg, #1a1a2e 20%, #67e8f9 85%) !important;
  background-size: 130% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.gradient-avtec-7 {
  background-image: linear-gradient(100deg, #1a1a2e 20%, #06b6d4 85%) !important;
  background-size: 130% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.gradient-avtec-8 {
  background-image: linear-gradient(100deg, #1a1a2e 20%, #0284c7 85%) !important;
  background-size: 130% auto;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Avtec brand signature: cyan → pink. Wrap any word in a span inside a headline. */
.gradient-text-signature {
  font-weight: inherit;
  background-image: linear-gradient(110deg, #38CCEC 0%, #F46AA1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Accent gradient (purple → pink) */
.gradient-text-accent {
  background-image: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Pink gradient (pink → magenta → deep) */
.gradient-text-pink {
  background-image: linear-gradient(110deg, var(--avtec-pink-500) 0%, #c026d3 50%, var(--avtec-deep-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Security gradient */
.gradient-text-secure {
  background-image: linear-gradient(135deg, var(--avtec-slate) 0%, var(--avtec-navy) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Animated gradient */
.animate-gradientText {
  background-image: linear-gradient(90deg, var(--avtec-teal), var(--avtec-purple), var(--avtec-magenta), var(--avtec-teal));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 8s ease-in-out infinite;
}

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

/* Background clip utilities */
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

.text-transparent {
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Brand gradient text — uses design system signature */
.mark-grad {
  background-image: var(--gradient-signature);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Brand solid pink accent text */
.mark-pink {
  color: #EC3E86 !important;
  -webkit-text-fill-color: #EC3E86 !important;
}


/* ============================================================================
   7. CONTENT LINK STYLES
   Inline links: gradient pill highlight on hover.
   Heading links: animated gradient underline draw.
   ============================================================================ */

/* ── Inline body links: gradient underline → pill highlight ── */
p a:not(.btn):not(.more):not([class*="link-"]),
.icon-list a:not(.btn):not([class*="link-"]),
blockquote a:not(.btn),
td a:not(.btn):not([class*="link-"]) {
  text-decoration: none !important;
  padding: 2px 4px;
  margin: 0 -4px;
  border-radius: 4px;
  background-image: linear-gradient(120deg, rgba(8, 145, 178, 0.22) 0%, rgba(190, 24, 93, 0.13) 100%);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.25s ease,
              box-shadow 0.4s ease;
}

p a:not(.btn):not(.more):not([class*="link-"]):hover,
.icon-list a:not(.btn):not([class*="link-"]):hover,
blockquote a:not(.btn):hover,
td a:not(.btn):not([class*="link-"]):hover {
  color: #065a73 !important;
  background-size: 100% 100%;
  box-shadow: 0 2px 10px rgba(8, 145, 178, 0.12);
}

/* ── .link-primary headings: gradient underline draws from left ── */
a.link-primary {
  position: relative;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

a.link-primary::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 3px;
  background: linear-gradient(120deg, var(--avtec-teal), var(--avtec-magenta));
  border-radius: 2px;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

a.link-primary:hover,
a.link-primary:focus {
  color: var(--avtec-teal) !important;
}

a.link-primary:hover::after,
a.link-primary:focus::after {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  p a:not(.btn), .icon-list a:not(.btn),
  a.link-primary, a.link-primary::after {
    transition: none !important;
  }
}


/* ============================================================================
   8. SECTION STATEMENT, BG-NAVY-FADE, SECTION-PROUD
   ============================================================================ */

/* Statement section — full-bleed navy with large display type */
.section-statement {
  background: linear-gradient(160deg, #060d1f 0%, #0A1430 25%, #0f2045 55%, #182e52 80%, #1a3660 100%);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.section-statement .display-statement {
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-wrap: balance;
  color: #fff !important;
  margin: 0;
}

.section-statement .section-statement-sub {
  font-size: 1.15rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  max-width: 620px;
  margin-bottom: 2.25rem;
}

/* Override fuchsia to match brand pink */
.text-fuchsia {
  color: #EC3E86 !important;
}

.progressbar.fuchsia svg path:last-child {
  stroke: #EC3E86 !important;
}
.progressbar.semi-circle.fuchsia svg path:first-child {
  stroke: rgba(236, 62, 134, 0.15) !important;
}

/* Navy-to-purple directional gradient */
.bg-navy-fade {
  background: linear-gradient(135deg, #060d1f 0%, #0A1430 20%, #0f1d42 45%, #1a2a5c 70%, #2a2d6b 88%, #3b2d6e 100%) !important;
}

/* Proud section — navy gradient card */
.section-proud {
  border: none !important;
  border-radius: 0.8rem;
}

.section-proud h3 {
  color: #fff !important;
}

.section-proud .proud-sub {
  color: rgba(255, 255, 255, 0.7);
}

.section-proud .proud-label {
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 767.98px) {
  .section-statement {
    padding: 4rem 0;
  }
  .section-statement.section-statement-lg {
    padding: 4rem 0;
  }
}

.section-statement.section-statement-lg {
  padding: 10rem 0;
}

.section-statement-inner {
  position: relative;
  z-index: 2;
}

.section-statement-slant {
  position: absolute;
  left: 0;
  right: 0;
  line-height: 0;
  pointer-events: none;
  z-index: 1;
}

.section-statement-slant-top {
  top: 0;
}

.section-statement-slant-bottom {
  bottom: 0;
}

.section-statement-slant svg {
  display: block;
  width: 100%;
  height: 80px;
}

.image-wrapper.bg-overlay-600:before {
  background: rgba(30, 34, 40, 0.75) !important;
}

.hide-percent .progressbar-text {
  display: none !important;
}


/* ============================================================================
   9. BACKGROUND GRADIENTS
   ============================================================================ */

/* --- PROFESSIONAL / SECURITY --- */
.bg-avtec-navy {
  background: var(--avtec-navy);
}

.bg_navy {
  background: linear-gradient(180deg, var(--avtec-navy) 0%, var(--avtec-navy-light) 100%);
}

.bg_slate {
  background: linear-gradient(135deg, var(--avtec-navy-light) 0%, var(--avtec-slate) 100%);
}

.bg_darkpurple {
  background: linear-gradient(135deg, #1e1b4b 0%, var(--avtec-navy) 100%);
}

.bg_darkpurple2 {
  background: linear-gradient(180deg, #312e81 0%, #1e1b4b 100%);
}

/* --- TECHNOLOGY / INNOVATION --- */
.bg_tech {
  background: linear-gradient(135deg, var(--avtec-navy) 0%, var(--avtec-teal) 100%);
}

.bg-lightbluepurple {
  background: linear-gradient(135deg, #6366f1 0%, var(--avtec-cyan) 100%);
}

.bg-lightbluepurple2 {
  background: linear-gradient(135deg, var(--avtec-indigo) 0%, var(--avtec-teal) 100%);
}

.bg_bluebasic {
  background: linear-gradient(135deg, #1e40af 0%, var(--avtec-teal) 100%);
}

.bg_lightpurple {
  background: linear-gradient(135deg, #7c3aed 0%, var(--avtec-indigo) 100%);
}

.bg_purple2 {
  background: linear-gradient(135deg, var(--avtec-purple) 0%, var(--avtec-indigo) 100%);
}

/* --- ACCENT / MARKETING --- */
.bg_pinkblue {
  background: linear-gradient(135deg, var(--avtec-indigo) 0%, var(--avtec-magenta) 100%);
}

.bg_purplered {
  background: linear-gradient(135deg, #7c3aed 0%, var(--avtec-error) 100%);
}

.bg_pinkorange {
  background: linear-gradient(135deg, var(--avtec-magenta) 0%, #ea580c 100%);
}

.bg_blackblue {
  background: radial-gradient(ellipse at top left, var(--avtec-navy-light) 0%, var(--avtec-navy) 50%, #020617 100%);
}


/* ==========================================================
   10. HYPERFIELD HERO (CSS base + canvas overlays)
   - CSS mesh gradient base (immediate render)
   - Canvas flow-field injected by hyperfield.js
   - Subtle grain + vignette for premium depth
   ========================================================== */

.hero-bg-hyperfield {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  contain: paint;

  --hero-c1: 16 173 213;
  --hero-c2: 99 102 241;
  --hero-c3: 5 150 105;
  --hero-c4: 245 158 11;

  --hero-canvas-opacity: 0.85;
  --hero-mesh-opacity: 0.95;

  background: linear-gradient(160deg, #cfd7e2 0%, #dbe2ec 45%, #e6ecf3 100%);
}

.hero-bg-hyperfield > * {
  position: relative;
  z-index: 3;
}

.hero-bg-hyperfield::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: 0;
  opacity: var(--hero-mesh-opacity);

  background:
    radial-gradient(1200px 900px at 15% 20%, rgb(var(--hero-c1) / 0.35) 0%, transparent 55%),
    radial-gradient(900px 700px  at 85% 25%, rgb(var(--hero-c2) / 0.28) 0%, transparent 55%),
    radial-gradient(900px 800px  at 60% 85%, rgb(var(--hero-c3) / 0.25) 0%, transparent 60%),
    radial-gradient(700px 600px  at 20% 80%, rgb(var(--hero-c4) / 0.18) 0%, transparent 60%),
    conic-gradient(from 210deg,
      rgb(var(--hero-c2) / 0.10),
      rgb(var(--hero-c1) / 0.14),
      rgb(var(--hero-c3) / 0.10),
      rgb(var(--hero-c2) / 0.10)
    );

  filter: blur(55px) saturate(125%);
  transform: translate3d(0,0,0);
  animation: hyperfield-mesh 18s ease-in-out infinite;
}

@keyframes hyperfield-mesh {
  0%   { transform: translate3d(-1.5%, -1%, 0) rotate(0deg)   scale(1.02); }
  50%  { transform: translate3d( 1.5%,  1%, 0) rotate(180deg) scale(1.06); }
  100% { transform: translate3d(-1.5%, -1%, 0) rotate(360deg) scale(1.02); }
}

.hero-bg-hyperfield .hyperfield-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: var(--hero-canvas-opacity);
}

.hero-bg-hyperfield::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E"),
    radial-gradient(closest-side at 50% 50%, rgba(0,0,0,0) 0 62%, rgba(9, 12, 18, 0.30) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0.10), rgba(0,0,0,0.08));

  background-size: 260px 260px, cover, cover;
  background-repeat: repeat, no-repeat, no-repeat;
  opacity: 0.16;
  mix-blend-mode: soft-light;
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-hyperfield::before { animation: none; }
}


/* --- HYPERFIELD THEMES ---
   Each theme varies: palette, base gradient, mesh/canvas opacity,
   and particle behavior via CSS custom properties read by hyperfield.js.

   USAGE: class="wrapper hero-bg-hyperfield hero-theme-signal"

   Available themes:
     signal  — teal / indigo / emerald / amber (default, balanced)
     noir    — dark premium with bright accents
     dusk    — violet / rose / amber (sunset warmth, not pink)
     coast   — cyan / blue / seafoam / sand (calm, airy)
     slate   — steel blue / gray / muted teal (ultra-professional)
     drift   — gray / blue / silver / ice (bold particles, cool wash)
     aurora  — cyan / purple / green / blue (vivid, energetic)
   ------------------------------------------------------------ */

.hero-theme-signal {
  --hero-c1: 16 173 213;
  --hero-c2: 99 102 241;
  --hero-c3: 5 150 105;
  --hero-c4: 245 158 11;
}

.hero-theme-noir {
  --hero-c1: 16 173 213;
  --hero-c2: 99 102 241;
  --hero-c3: 34 197 94;
  --hero-c4: 245 158 11;
  --hero-canvas-opacity: 0.70;
  --hero-mesh-opacity: 0.85;
  --hero-particle-speed: 0.70;
  --hero-trail-fade: 0.05;
  --hero-max-particles: 1600;
  background: linear-gradient(160deg, #0b1220 0%, #0e1628 50%, #111b32 100%);
}

.hero-theme-dusk {
  --hero-c1: 147 51 234;
  --hero-c2: 219 39 119;
  --hero-c3: 245 158 11;
  --hero-c4: 99 102 241;
  --hero-canvas-opacity: 0.80;
  --hero-mesh-opacity: 1.0;
  --hero-particle-speed: 0.75;
  --hero-trail-fade: 0.06;
  background: linear-gradient(160deg, #d4c8e0 0%, #ddd0e6 45%, #e8dded 100%);
}

.hero-theme-dusk.hero-bg-hyperfield::before {
  filter: blur(60px) saturate(135%);
  animation-duration: 22s;
}

.hero-theme-coast {
  --hero-c1: 6 182 212;
  --hero-c2: 59 130 246;
  --hero-c3: 16 185 129;
  --hero-c4: 251 191 36;
  --hero-canvas-opacity: 0.70;
  --hero-mesh-opacity: 0.90;
  --hero-particle-speed: 0.65;
  --hero-trail-fade: 0.06;
  --hero-max-particles: 1800;
  background: linear-gradient(160deg, #c6dde8 0%, #d0e5ee 45%, #daedf5 100%);
}

.hero-theme-coast.hero-bg-hyperfield::before {
  filter: blur(65px) saturate(115%);
  animation-duration: 24s;
}

.hero-theme-slate {
  --hero-c1: 100 116 139;
  --hero-c2: 71 85 105;
  --hero-c3: 14 165 233;
  --hero-c4: 148 163 184;
  --hero-canvas-opacity: 0.90;
  --hero-mesh-opacity: 0.80;
  --hero-particle-speed: 0.55;
  --hero-trail-fade: 0.045;
  --hero-max-particles: 2600;
  background: linear-gradient(160deg, #c4cad2 0%, #cdd3da 45%, #d8dee5 100%);
}

.hero-theme-slate.hero-bg-hyperfield::before {
  filter: blur(75px) saturate(95%);
  animation-duration: 28s;
}

.hero-theme-drift {
  --hero-c1: 59 130 246;
  --hero-c2: 99 102 241;
  --hero-c3: 148 163 184;
  --hero-c4: 56 189 248;
  --hero-canvas-opacity: 1.0;
  --hero-mesh-opacity: 0.70;
  --hero-particle-speed: 0.90;
  --hero-trail-fade: 0.04;
  --hero-max-particles: 2800;
  background: linear-gradient(160deg, #bcc5d0 0%, #c5ced8 45%, #d0d8e2 100%);
}

.hero-theme-drift.hero-bg-hyperfield::before {
  filter: blur(80px) saturate(80%);
  animation-duration: 26s;
}

.hero-theme-aurora {
  --hero-c1: 6 182 212;
  --hero-c2: 168 85 247;
  --hero-c3: 34 197 94;
  --hero-c4: 59 130 246;
  --hero-canvas-opacity: 0.92;
  --hero-mesh-opacity: 1.0;
  --hero-particle-speed: 1.0;
  --hero-trail-fade: 0.085;
  --hero-max-particles: 2600;
  background: linear-gradient(160deg, #c0cce0 0%, #cad5e8 45%, #d4def0 100%);
}

.hero-theme-aurora.hero-bg-hyperfield::before {
  filter: blur(50px) saturate(145%);
  animation-duration: 14s;
}


/* ============================================================================
   11. NAVIGATION
   ============================================================================ */
.nav-link {
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* .nav-tabs-frosted — modifier for .nav-tabs-bg */
.nav-tabs.nav-tabs-bg.nav-tabs-frosted .nav-link:not(.active):not(:hover) {
  background-color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.nav-tabs.nav-tabs-bg.nav-tabs-frosted .nav-link {
  transition:
    transform 320ms cubic-bezier(.2, .8, .2, 1),
    background-color 280ms ease,
    border-color 280ms ease,
    box-shadow 320ms ease;
}
.nav-tabs.nav-tabs-bg.nav-tabs-frosted .nav-link:hover {
  transform: translateY(-2px);
}
.nav-tabs.nav-tabs-bg.nav-tabs-frosted .nav-link .icon-svg {
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1);
}
.nav-tabs.nav-tabs-bg.nav-tabs-frosted .nav-link:hover .icon-svg,
.nav-tabs.nav-tabs-bg.nav-tabs-frosted .nav-link.active .icon-svg {
  transform: scale(1.1) rotate(-3deg);
}

@media (max-width: 991.98px) {
  .nav-tabs.nav-tabs-bg.nav-tabs-frosted ~ .tab-content .tab-pane {
    display: block !important;
    opacity: 1 !important;
  }
  .nav-tabs.nav-tabs-bg.nav-tabs-frosted ~ .tab-content .tab-pane + .tab-pane {
    margin-top: 4rem;
    padding-top: 4rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
  }
}

/* Homepage Services Tabs */
.avtec-services-tabs .service-lead {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #334155;
  margin-bottom: 0.9rem;
}

.avtec-services-tabs .avtec-service-kicker {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  font-size: 0.72rem;
  margin-bottom: 0.45rem;
}

.avtec-services-tabs .service-stack-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.1rem;
}

.avtec-services-tabs .service-stack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 0.95rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: linear-gradient(145deg, #ffffff 0%, rgba(248, 250, 252, 0.98) 100%);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  color: #1e293b;
  text-decoration: none;
  transition: transform 260ms cubic-bezier(.2, .8, .2, 1), box-shadow 260ms ease, border-color 260ms ease;
}

.avtec-services-tabs .service-stack-card strong {
  color: #0f172a;
  font-size: 0.88rem;
  line-height: 1.3;
}

.avtec-services-tabs .service-stack-card span {
  font-size: 0.78rem;
  line-height: 1.5;
}

.avtec-services-tabs .service-stack-card .service-stack-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #0f172a;
  background: rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  padding: 0.2rem 0.48rem;
}

.avtec-services-tabs .service-stack-card:hover,
.avtec-services-tabs .service-stack-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(8, 145, 178, 0.34);
  box-shadow: 0 14px 30px rgba(8, 145, 178, 0.16);
}

.avtec-services-tabs .service-crosssell-title {
  margin: 0.2rem 0 0.5rem;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.avtec-services-tabs #service-content-seo .service-tab-visual {
  margin: 0;
  position: relative;
  background: transparent !important;
  line-height: 0;
}

.avtec-services-tabs #service-content-seo .service-tab-visual-img {
  width: 128%;
  max-width: none;
  margin-left: -14%;
  display: block;
}

.avtec-services-tabs .service-crosssell-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.2rem;
}

.avtec-services-tabs .service-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.69rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.avtec-services-tabs .service-badge i {
  font-size: 0.82rem;
}

.avtec-services-tabs .service-badge:hover,
.avtec-services-tabs .service-badge:focus-visible {
  transform: translateY(-1px);
}

.avtec-services-tabs .service-badge-fuchsia,
.avtec-services-tabs .service-badge-orange,
.avtec-services-tabs .service-badge-violet,
.avtec-services-tabs .service-badge-green {
  background: rgba(51, 65, 85, 0.08);
  border-color: rgba(51, 65, 85, 0.18);
  color: #334155;
}

@media (max-width: 991.98px) {
  .avtec-services-tabs .service-stack-grid {
    grid-template-columns: 1fr;
  }

  .avtec-services-tabs #service-content-seo .service-tab-visual-img {
    width: 112%;
    margin-left: -6%;
  }
}

.dropdown-header {
  font-size: 0.75rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--avtec-slate);
}

.dropdown-item {
  font-weight: 500;
  letter-spacing: -0.01rem;
  color: var(--avtec-navy);
}

.dropdown-item a {
  font-weight: 500;
  letter-spacing: -0.01rem;
  color: var(--avtec-navy);
}

.dropdown-menu p.text-primary {
  color: #343f52 !important;
}
.dropdown-menu i.text-primary {
  color: #3f78e0 !important;
}

/* Mobile Navigation */
@media (max-width: 767.98px) {
  .dropdown-menu {
    position: static;
    float: none;
    width: auto;
  }

  .dropdown-menu .row {
    margin-right: 0;
    margin-left: 0;
  }

  .dropdown-menu .col-md-4 {
    padding: 0;
  }

  .dropdown-menu .dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1.5rem;
  }
}

.offcanvas-custom-width {
  width: 90% !important;
}

/* ============================================
   MOBILE BURGER BUTTON — Brand Gradient Pill
   ============================================ */
button.hamburger {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--avtec-purple) 0%, var(--avtec-magenta) 100%) !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0;
  padding: 0 !important;
  margin: 0 0 0 0.5rem !important;
  border: none !important;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  box-shadow: 0 3px 12px rgba(109, 40, 217, 0.3);
  position: relative;
  overflow: hidden;
}

button.hamburger:hover {
  transform: scale(1.08);
  box-shadow: 0 5px 20px rgba(190, 24, 93, 0.4);
  filter: brightness(1.1);
}

button.hamburger:active {
  transform: scale(0.97);
}

button.hamburger:focus-visible {
  outline: 2px solid var(--avtec-cyan);
  outline-offset: 3px;
}

button.hamburger:before,
button.hamburger span,
button.hamburger:after {
  background: #fff !important;
  width: 18px !important;
  height: 2px !important;
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
}

button.hamburger:before,
button.hamburger span {
  margin: 0 0 4px !important;
}

button.hamburger:after {
  margin: 0 !important;
}

.navbar.navbar-dark button.hamburger,
.navbar.navbar-light button.hamburger,
.navbar.position-absolute button.hamburger {
  color: #fff !important;
  background: linear-gradient(135deg, var(--avtec-purple) 0%, var(--avtec-magenta) 100%) !important;
}

/* ============================================
   OFFCANVAS PANEL — Dark Branded Theme
   ============================================ */
@media (max-width: 991.98px) {

  .navbar-collapse.offcanvas-nav {
    background: linear-gradient(170deg, #1a1f3d 0%, #0f1328 55%, #080b18 100%) !important;
    border-right: none !important;
    max-width: 310px;
    box-shadow: 6px 0 40px rgba(0, 0, 0, 0.55);
    overflow-x: hidden;
  }

  .offcanvas-nav .offcanvas-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .offcanvas-nav .offcanvas-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
  }

  .navbar-expand-lg .navbar-collapse .nav-link,
  .navbar-expand-lg .navbar-collapse .show > .nav-link,
  .navbar-expand-lg .navbar-collapse .nav-link.active,
  .navbar-expand-lg .navbar-collapse .nav-link:hover,
  .navbar-expand-lg .navbar-collapse .nav-link:focus {
    color: rgba(255, 255, 255, 0.85) !important;
  }

  .offcanvas-nav .navbar-nav > .nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .offcanvas-nav .navbar-nav > .nav-item:last-child {
    border-bottom: none;
  }

  .offcanvas-nav .navbar-nav > .nav-item > .nav-link {
    padding: 0.7rem 1rem !important;
    font-size: 0.78rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: background 0.2s ease, padding-left 0.2s ease;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }

  .offcanvas-nav .navbar-nav > .nav-item > .nav-link:hover {
    background: rgba(255, 255, 255, 0.03);
    padding-left: 1.15rem !important;
  }
  .offcanvas-nav .navbar-nav > .nav-item > .nav-link:hover::before {
    content: "";
    position: absolute;
    left: 0;
    top: 25%;
    height: 50%;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--avtec-cyan), var(--avtec-purple));
  }

  .offcanvas-nav .navbar-nav > .nav-item.show > .nav-link::before,
  .offcanvas-nav .navbar-nav > .nav-item > .nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 25%;
    height: 50%;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--avtec-cyan), var(--avtec-purple));
  }

  .offcanvas-nav .dropdown-toggle::after {
    position: static !important;
    margin-left: auto;
    opacity: 0.35;
    font-size: 0.7rem !important;
    transition: transform 0.25s ease, opacity 0.2s ease;
    flex-shrink: 0;
  }
  .offcanvas-nav .show > .dropdown-toggle::after {
    transform: rotate(180deg);
    opacity: 0.6;
  }

  .offcanvas-nav .dropdown-menu {
    background: rgba(255, 255, 255, 0.02) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.15rem 0 0.5rem !important;
    margin: 0 !important;
  }

  .offcanvas-nav .dropdown-menu.dropdown-lg {
    padding: 0.15rem 0 0.5rem !important;
  }

  .offcanvas-nav .dropdown-lg-content {
    display: block !important;
  }

  .offcanvas-nav .dropdown-lg-content > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .offcanvas-nav .dropdown-header {
    color: var(--avtec-cyan) !important;
    opacity: 0.85;
    font-size: 0.58rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 0.65rem 1rem 0.25rem !important;
    margin-bottom: 0 !important;
    position: relative;
  }

  .offcanvas-nav .dropdown-header::after {
    content: "";
    display: block;
    width: 24px;
    height: 1px;
    margin-top: 4px;
    background: linear-gradient(90deg, var(--avtec-cyan), transparent);
    border-radius: 1px;
  }

  .offcanvas-nav .dropdown-menu li {
    margin: 0 0.35rem !important;
  }
  .offcanvas-nav .dropdown-menu li.mb-3 {
    margin-bottom: 0.15rem !important;
  }
  .offcanvas-nav .dropdown-menu li a {
    padding: 0.4rem 0.65rem !important;
    border-radius: 6px;
    transition: background 0.15s ease, transform 0.15s ease;
    text-decoration: none !important;
  }
  .offcanvas-nav .dropdown-menu li a:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(2px);
  }

  .offcanvas-nav .dropdown-menu .icon-container {
    margin-right: 0.6rem !important;
    flex-shrink: 0;
  }
  .offcanvas-nav .dropdown-menu .icon-container .me-3 {
    margin-right: 0 !important;
  }
  .offcanvas-nav .dropdown-menu .btn-soft-primary {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .offcanvas-nav .dropdown-menu li a:hover .btn-soft-primary {
    background: rgba(56, 199, 215, 0.12) !important;
    border-color: rgba(56, 199, 215, 0.2) !important;
  }
  .offcanvas-nav .dropdown-menu .btn-soft-primary i {
    color: var(--avtec-cyan) !important;
    font-size: 0.85rem !important;
  }

  .offcanvas-nav .dropdown-menu p.text-primary,
  .offcanvas-nav .dropdown-menu .text-primary:not(i) {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.78rem !important;
    font-weight: 500;
    margin-bottom: 0 !important;
    line-height: 1.25;
  }
  .offcanvas-nav .dropdown-menu p.text-navy,
  .offcanvas-nav .dropdown-menu .text-navy {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 0.68rem !important;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 !important;
  }

  .offcanvas-nav .dropdown-lg-content > div + div {
    border-left: none !important;
    margin-top: 0.15rem;
  }

  .offcanvas-nav .offcanvas-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 1rem 1.1rem;
    background: rgba(0, 0, 0, 0.15);
  }

  .offcanvas-nav .offcanvas-footer a:not(.btn):not(.nav a) {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.82rem;
    transition: color 0.2s ease;
  }
  .offcanvas-nav .offcanvas-footer a:not(.btn):not(.nav a):hover {
    color: var(--avtec-cyan);
  }

  .offcanvas-nav .offcanvas-footer i.bi-telephone-fill {
    color: var(--avtec-cyan) !important;
    font-size: 0.8rem;
  }

  .offcanvas-nav .offcanvas-footer .nav.social {
    gap: 0.1rem;
  }
  .offcanvas-nav .offcanvas-footer .nav.social a {
    color: rgba(255, 255, 255, 0.3);
    transition: color 0.2s ease, transform 0.2s ease;
    font-size: 0.85rem;
  }
  .offcanvas-nav .offcanvas-footer .nav.social a:hover {
    color: var(--avtec-cyan);
    transform: translateY(-1px);
  }

  .offcanvas-nav .offcanvas-footer .btn {
    font-size: 0.68rem !important;
    padding: 0.3rem 0.85rem !important;
    letter-spacing: 0.03em;
  }
}

/* Search icon */
.navbar-light .navbar-other .nav-link .bi-search,
.navbar-dark .navbar-other .nav-link .bi-search {
  font-size: 1.1rem;
}


/* ============================================================================
   12. BUTTONS
   ============================================================================ */
.btn {
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Soft primary button */
.btn-soft-primary {
  background-color: #e0e7ff !important;
  border-color: #e0e7ff !important;
  color: var(--avtec-navy) !important;
}

.navbar.scrolled .btn-soft-primary,
.btn-soft-primary:hover,
.btn-soft-primary:active,
.btn-soft-primary:focus {
  background-color: #c7d2fe !important;
  border-color: #c7d2fe !important;
  color: var(--avtec-navy) !important;
}

/* Avtec brand button */
.btn-avtec {
  background: var(--gradient-brand);
  border: none;
  color: #fff;
}

.btn-avtec:hover {
  background: linear-gradient(135deg, #0e7490 0%, #9d174d 100%);
  color: #fff;
}

/* Primary CTA Button */
.btn-primary {
  position: relative;
  overflow: hidden;
  background-color: #c4346e !important;
  border-color: #c4346e !important;
  color: #fff !important;
  z-index: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(138, 43, 226, 0.5), transparent);
  transition: width 0.3s ease;
  z-index: -1;
}
.btn-primary:hover::before {
  width: 60%;
}
.btn-primary:hover {
  background-color: #d63a7a !important;
  border-color: #d63a7a !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(196, 52, 110, 0.5), 0 8px 20px rgba(0, 0, 0, 0.15);
}
.btn-primary:focus,
.btn-primary:active {
  background-color: #b02d60 !important;
  border-color: #b02d60 !important;
  color: #fff !important;
  transform: translateY(0);
}

/* Arrow icon for buttons */
.btn-arrow-icon {
  display: inline-block;
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}
.btn:hover .btn-arrow-icon {
  transform: translate(3px, -3px);
}

/* Secondary outline button */
.btn-secondary-outline {
  background-color: transparent;
  border: 2px solid #343f52;
  color: #343f52;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-secondary-outline:hover {
  background-color: #343f52;
  border-color: #343f52;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(52, 63, 82, 0.25);
}
.btn-secondary-outline:focus,
.btn-secondary-outline:active {
  background-color: #2a3342;
  border-color: #2a3342;
  color: #fff;
  transform: translateY(0);
}


/* ============================================================================
   13. HERO IMAGE OVERLAY
   ============================================================================ */
.hero-overlay-dark {
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-overlay-dark::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(20, 30, 55, 0.55) 0%, rgba(10, 15, 35, 0.8) 100%);
    z-index: 1;
    pointer-events: none;
}

.hero-overlay-dark > * {
    position: relative;
    z-index: 2;
}

/* Extra-small button */
.btn-xs,
.btn-group-xs > .btn {
    --bs-btn-padding-y: 0.2rem;
    --bs-btn-padding-x: 0.65rem;
    --bs-btn-font-size: 0.7rem;
    --bs-btn-border-radius: 0.3rem;
}


/* ============================================================================
   14. CARDS & UTILITIES
   ============================================================================ */

/* Card hover lift effect */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.custom-line-height {
  line-height: 1.2 !important;
}

.dropdown-menu.dropdown-lg {
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(30, 58, 95, 0.08);
}

.dropdown-lg-content p.text-primary.custom-line-height {
  font-weight: 500 !important;
}

.dropdown-menu.dropdown-lg .dropdown-lg-content li.col.mb-3 {
  margin-bottom: 0.5rem !important;
}

.dropdown-lg-content li a.nav-menu-item {
  padding: 0.2rem 0.5rem;
  margin: -0.2rem -0.5rem;
  border-radius: 0.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.dropdown-lg-content li a.nav-menu-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.1);
  background-color: rgba(30, 58, 95, 0.04);
}

.dropdown-lg-content li a.nav-menu-item .icon-container i {
  transition: transform 0.2s ease;
}

.dropdown-lg-content li a.nav-menu-item:hover .icon-container i {
  animation: iconPulseThenRotate 0.5s ease forwards;
}

@keyframes iconPulseThenRotate {
  0%   { transform: scale(1) rotate(0deg); }
  40%  { transform: scale(1.25) rotate(0deg); }
  70%  { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1) rotate(8deg); }
}

.custom-line-height small {
  line-height: 1.2;
}

/* Border accent */
.border-avtec {
  border-color: var(--avtec-cyan) !important;
}

/* Shadow utilities */
.shadow-avtec {
  box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.2);
}

.shadow-avtec-lg {
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}


/* ============================================================================
   15. COMPONENT OVERRIDES
   ============================================================================ */

.card-avtec {
  border-top: 3px solid var(--avtec-cyan);
}

.card-avtec-magenta {
  border-top: 3px solid var(--avtec-magenta);
}

.section-navy {
  background: var(--avtec-navy);
  color: #fff;
}

.section-slate {
  background: var(--avtec-slate);
  color: #fff;
}

.blockquote-details > .rounded-circle {
  min-width: 3.5rem;
  max-width: 3.5rem;
  min-height: 3.5rem;
  max-height: 3.5rem;
}

.blockquote-details > img.rounded-circle {
  object-fit: contain;
  padding: 5px;
  background-color: var(--bs-gray-200, #f6f7f9);
}

.progressbar.semi-circle.no-percent .progressbar-text:after {
  content: none;
}


/* ============================================================================
   16. MODERN HERO STYLES - Glass Morphism & Effects
   ============================================================================ */

.hero-gradient {
  background: linear-gradient(-45deg, #0f172a, #1e3a5f, #0c4a6e, #581c87, #1e3a5f);
  background-size: 400% 400%;
  animation: heroGradient 15s ease infinite;
  position: relative;
  overflow: hidden;
}

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

.hero-gradient::before,
.hero-gradient::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  pointer-events: none;
}

.hero-gradient::before {
  width: 500px;
  height: 500px;
  background: var(--avtec-cyan);
  top: -150px;
  right: -100px;
  animation: float 8s ease-in-out infinite;
}

.hero-gradient::after {
  width: 400px;
  height: 400px;
  background: var(--avtec-magenta);
  bottom: -100px;
  left: -100px;
  animation: float 10s ease-in-out infinite reverse;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(5deg); }
}

.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
}

.glass-card-light {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.stat-badge {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  transition: all 0.3s ease;
}

.stat-badge:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.stat-badge .stat-number {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(135deg, #fff 0%, var(--avtec-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-badge .stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

.btn-glow {
  position: relative;
  background: linear-gradient(135deg, var(--avtec-cyan) 0%, var(--avtec-teal) 100%);
  border: none;
  color: #fff;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s ease;
}

.btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px -10px var(--avtec-cyan);
  color: #fff;
}

.btn-glow:hover::before {
  left: 100%;
}

.btn-outline-glow {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  transition: all 0.3s ease;
}

.btn-outline-glow:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
  transform: translateY(-2px);
}

.hero-image-glow {
  position: relative;
}

.hero-image-glow::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: linear-gradient(135deg, var(--avtec-cyan), var(--avtec-magenta));
  border-radius: 24px;
  filter: blur(40px);
  opacity: 0.3;
  z-index: -1;
}

.hero-image-glow img {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}


/* ============================================================================
   17. HERO PRODUCT CARDS
   ============================================================================ */
.hero-product-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.10),
    0 0 0 1px rgba(0,0,0,0.04);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  overflow: hidden;
  position: relative;
}
.hero-product-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--_accent, var(--gradient-brand));
}
.hero-product-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 14px 36px rgba(0,0,0,0.14),
    0 0 0 1px rgba(0,0,0,0.04);
}
.hero-product-card .hpc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.hero-product-card .hpc-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.hero-product-card .hpc-title {
  font-size: 12px;
  font-weight: 700;
  color: #1a1a2e;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.2;
}

/* --- CU Analytics mini dashboard --- */
.hpc-analytics { --_accent: linear-gradient(90deg, #667eea, #764ba2); }
.hpc-analytics .hpc-icon { background: #ede7f6; color: #667eea; }
.hpc-analytics .hpc-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
  margin-bottom: 8px;
}
.hpc-analytics .hpc-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-height: 6px;
}
.hpc-analytics .hpc-bar:nth-child(1) { height: 40%; background: #c4b5fd; }
.hpc-analytics .hpc-bar:nth-child(2) { height: 55%; background: #a78bfa; }
.hpc-analytics .hpc-bar:nth-child(3) { height: 35%; background: #c4b5fd; }
.hpc-analytics .hpc-bar:nth-child(4) { height: 70%; background: #8b5cf6; }
.hpc-analytics .hpc-bar:nth-child(5) { height: 85%; background: #7c3aed; }
.hpc-analytics .hpc-bar:nth-child(6) { height: 60%; background: #8b5cf6; }
.hpc-analytics .hpc-bar:nth-child(7) { height: 95%; background: linear-gradient(180deg, #667eea, #764ba2); }
.hpc-analytics .hpc-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.hpc-analytics .hpc-stat {
  text-align: center;
  flex: 1;
}
.hpc-analytics .hpc-stat-value {
  font-size: 14px;
  font-weight: 700;
  color: #667eea;
  line-height: 1;
}
.hpc-analytics .hpc-stat-label {
  font-size: 8px;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* --- SEO & AEO mini search result --- */
.hpc-seo { --_accent: linear-gradient(90deg, #34a853, #1e8e3e); }
.hpc-seo .hpc-icon { background: #e8f5e9; color: #34a853; }
.hpc-seo .hpc-search-bar {
  background: #f8f9fa;
  border: 1.5px solid #e8eaed;
  border-radius: 14px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.hpc-seo .hpc-search-bar i { color: #9aa0a6; font-size: 10px; }
.hpc-seo .hpc-search-bar span { font-size: 10px; color: #5f6368; }
.hpc-seo .hpc-result {
  background: linear-gradient(90deg, rgba(52,168,83,0.08) 0%, #fff 100%);
  border-left: 3px solid #34a853;
  border-radius: 8px;
  padding: 8px 10px;
}
.hpc-seo .hpc-result-rank {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #34a853, #1e8e3e);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
  float: right;
}
.hpc-seo .hpc-result-title {
  font-size: 11px;
  color: #1a0dab;
  font-weight: 500;
  display: block;
  margin-bottom: 2px;
}
.hpc-seo .hpc-result-desc {
  font-size: 9px;
  color: #70757a;
  line-height: 1.4;
  margin: 0;
}
.hpc-seo .hpc-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.hpc-seo .hpc-keyword {
  font-size: 8px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.hpc-seo .hpc-keyword.green { background: #e8f5e9; color: #2e7d32; }
.hpc-seo .hpc-keyword.blue  { background: #e3f2fd; color: #1565c0; }

/* --- Form Builder mini form --- */
.hpc-forms { --_accent: linear-gradient(90deg, #0891b2, #06b6d4); }
.hpc-forms .hpc-icon { background: #e0f2fe; color: #0891b2; }
.hpc-forms .hpc-field {
  background: #f8f9fa;
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  padding: 5px 8px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hpc-forms .hpc-field i {
  font-size: 9px;
  color: #94a3b8;
}
.hpc-forms .hpc-field span {
  font-size: 9px;
  color: #94a3b8;
}
.hpc-forms .hpc-field.filled span {
  color: #334155;
}
.hpc-forms .hpc-field-row {
  display: flex;
  gap: 5px;
}
.hpc-forms .hpc-field-row .hpc-field {
  flex: 1;
}
.hpc-forms .hpc-submit {
  background: linear-gradient(135deg, #0891b2, #06b6d4);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 0;
  font-size: 9px;
  font-weight: 600;
  width: 100%;
  text-align: center;
  letter-spacing: 0.3px;
}

/* --- Chatbot mini chat --- */
.hpc-chatbot { --_accent: linear-gradient(90deg, #ec4899, #be185d); }
.hpc-chatbot .hpc-icon { background: #fce7f3; color: #ec4899; }
.hpc-chatbot .hpc-chat-window {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hpc-chatbot .hpc-bubble {
  max-width: 85%;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 9px;
  line-height: 1.4;
}
.hpc-chatbot .hpc-bubble.bot {
  background: #fff;
  color: #334155;
  border: 1px solid #e2e8f0;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.hpc-chatbot .hpc-bubble.user {
  background: linear-gradient(135deg, #ec4899, #be185d);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.hpc-chatbot .hpc-typing {
  display: flex;
  gap: 3px;
  padding: 6px 10px;
  align-self: flex-start;
}
.hpc-chatbot .hpc-typing span {
  width: 5px; height: 5px;
  background: #cbd5e1;
  border-radius: 50%;
  animation: hpcBlink 1.4s infinite both;
}
.hpc-chatbot .hpc-typing span:nth-child(2) { animation-delay: 0.2s; }
.hpc-chatbot .hpc-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes hpcBlink {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}

/* --- Calculator mini display --- */
.hpc-calc { --_accent: linear-gradient(90deg, #f59e0b, #d97706); }
.hpc-calc .hpc-icon { background: #fef3c7; color: #d97706; }
.hpc-calc .hpc-display {
  background: #1e293b;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.hpc-calc .hpc-display-label {
  font-size: 8px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.hpc-calc .hpc-display-value {
  font-size: 18px;
  font-weight: 700;
  color: #f59e0b;
  line-height: 1;
  font-family: 'Manrope', sans-serif;
}
.hpc-calc .hpc-calc-meta {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.hpc-calc .hpc-calc-meta-item {
  flex: 1;
  text-align: center;
  background: #f8f9fa;
  border-radius: 6px;
  padding: 4px 6px;
}
.hpc-calc .hpc-calc-meta-value {
  font-size: 10px;
  font-weight: 700;
  color: #334155;
  line-height: 1;
}
.hpc-calc .hpc-calc-meta-label {
  font-size: 7px;
  color: #94a3b8;
  text-transform: uppercase;
}

/* --- CMS mini editor --- */
.hpc-cms { --_accent: linear-gradient(90deg, #4f46e5, #6366f1); }
.hpc-cms .hpc-icon { background: #eef2ff; color: #4f46e5; }
.hpc-cms .hpc-editor-toolbar {
  display: flex;
  gap: 3px;
  padding: 4px 6px;
  background: #f1f5f9;
  border-radius: 6px;
  margin-bottom: 6px;
}
.hpc-cms .hpc-editor-toolbar span {
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #64748b;
  border: 1px solid #e2e8f0;
}
.hpc-cms .hpc-editor-line {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  margin-bottom: 4px;
}
.hpc-cms .hpc-editor-line.short { width: 60%; }
.hpc-cms .hpc-editor-line.medium { width: 80%; }
.hpc-cms .hpc-editor-line.active {
  background: linear-gradient(90deg, #4f46e5, #6366f1);
  opacity: 0.3;
}
.hpc-cms .hpc-publish-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ecfdf5;
  color: #059669;
  font-size: 8px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 8px;
  margin-top: 4px;
}

/* Hero product card mobile */
@media (max-width: 991px) {
  .hero-product-card {
    padding: 10px 12px;
    border-radius: 12px;
  }
  .hero-product-card .hpc-title {
    font-size: 10px;
  }
  .hero-product-card .hpc-icon {
    width: 24px; height: 24px;
    font-size: 12px;
  }
}


/* ============================================================================
   18. LEGACY / ORBITING ICONS ANIMATION
   ============================================================================ */

.icon-cluster {
  position: relative;
  width: 220px;
  height: 220px;
}

.icon-main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background-color: var(--avtec-cyan);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 0 20px rgba(16, 173, 213, 0.3);
}

.icon-main i {
  font-size: 40px;
  color: white;
}

.icon-orbit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px dashed rgba(16, 173, 213, 0.25);
  border-radius: 50%;
  animation: orbitSpin 30s linear infinite;
}

@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.icon-satellite {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(var(--rotation)) translateY(-90px) rotate(calc(-1 * var(--rotation)));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.icon-satellite i {
  font-size: 20px;
  color: var(--avtec-cyan);
}


/* ============================================================================
   19. FOOTER - PARTICLES + GLASSMORPHISM GLOWS
   ============================================================================ */

.text-footer-wave {
  color: #0A1430;
}

footer.bg-navy {
  position: relative;
  background: linear-gradient(180deg, #0A1430 0%, #0e1b3d 40%, #142448 100%) !important;
  overflow: hidden;
}

.footer-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.footer-glow-cyan {
  width: 500px;
  height: 500px;
  bottom: -150px;
  right: -100px;
  background: radial-gradient(circle, rgba(16, 173, 213, 0.35) 0%, rgba(16, 173, 213, 0.1) 40%, transparent 70%);
  filter: blur(60px);
  animation: glowFloat 10s ease-in-out infinite;
}

.footer-glow-magenta {
  width: 450px;
  height: 450px;
  bottom: -100px;
  left: -80px;
  background: radial-gradient(circle, rgba(190, 24, 93, 0.3) 0%, rgba(190, 24, 93, 0.08) 40%, transparent 70%);
  filter: blur(60px);
  animation: glowFloat 12s ease-in-out infinite reverse;
}

.footer-glow-purple {
  width: 400px;
  height: 400px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, rgba(139, 92, 246, 0.05) 40%, transparent 70%);
  filter: blur(80px);
  animation: glowPulse 8s ease-in-out infinite;
}

@keyframes glowFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(20px, -20px) scale(1.1);
    opacity: 1;
  }
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
}

.footer-particles-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
}

footer.bg-navy > .container {
  position: relative;
  z-index: 2;
}

@media (max-width: 991.98px) {
  .footer-glow-cyan,
  .footer-glow-magenta {
    width: 350px;
    height: 350px;
    filter: blur(50px);
  }

  .footer-glow-purple {
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 767.98px) {
  .footer-particles-canvas {
    opacity: 0.3;
  }

  .footer-glow-cyan,
  .footer-glow-magenta,
  .footer-glow-purple {
    width: 250px;
    height: 250px;
    filter: blur(40px);
    opacity: 0.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-glow-cyan,
  .footer-glow-magenta,
  .footer-glow-purple {
    animation: none;
  }
}

.link-pink {
  color: var(--avtec-pink) !important;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.link-pink:hover {
  opacity: 0.8;
}

.link-inverse {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}
.link-inverse:hover,
.link-inverse:focus,
.text-inverse a.link-inverse:hover,
.text-inverse a.link-inverse:focus {
  color: var(--avtec-pink) !important;
  border-color: var(--avtec-pink) !important;
}

.w-12 {
  width: 3rem !important;
}


/* ============================================================================
   20. ACCESSIBILITY (WCAG) — Focus Visible
   ============================================================================ */
a:focus-visible {
  outline: 2px solid var(--avtec-cyan);
  outline-offset: 2px;
}
button:focus-visible {
  outline: 2px solid var(--avtec-cyan);
  outline-offset: 2px;
}
.btn-close:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(16, 173, 213, 0.35);
  outline: none;
}
.dropdown-item:focus-visible {
  background-color: var(--bs-dropdown-link-hover-bg);
  outline: 2px solid var(--avtec-cyan);
  outline-offset: -2px;
}
.dropdown-toggle:focus-visible {
  outline: 2px solid var(--avtec-cyan);
  outline-offset: 2px;
}
.offcanvas-header a:focus-visible {
  outline: 2px solid var(--avtec-cyan);
  outline-offset: 2px;
}
.swiper-button-prev:focus-visible,
.swiper-button-next:focus-visible {
  outline: 2px solid var(--avtec-cyan);
  outline-offset: 2px;
}
.swiper-pagination-bullet:focus-visible {
  outline: 2px solid var(--avtec-cyan);
  outline-offset: 2px;
}
.has-tooltip:focus-visible,
.has-popover:focus-visible {
  outline: 2px solid var(--avtec-cyan);
  outline-offset: 2px;
}
.gbtn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.glightbox-container:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.plyr__control:focus-visible {
  outline: 3px dotted #00b2ff;
  outline-offset: 2px;
}
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

button.progress-wrap {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.social a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button.progress-wrap:focus {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}


/* ============================================================================
   21. VIDEO WRAPPER OVERLAY (About page hero)
   ============================================================================ */
.video-wrapper {
  position: relative;
}
.video-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 1;
}
.divider-top {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 2;
  pointer-events: none;
  display: none;
}
@media (min-width: 992px) {
  .divider-top {
    display: block;
  }
}
.video-wrapper.bg-overlay.bg-overlay-gradient:after {
  opacity: 0.6;
  background: linear-gradient(120deg, #3d0a4c 20%, #ff1493 40%, #3d0a4c 60%, #1a0a4c 80%);
}
.video-wrapper.bg-overlay:after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(30, 34, 40, 0.6);
  z-index: 1;
}


/* ============================================================================
   22. FEATURE GRID (Case Studies)
   ============================================================================ */
.feature-grid .card {
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-grid .card:hover {
  background-color: #f8f9fa;
}
.feature-grid .card-link {
  cursor: pointer;
}
.feature-grid .card-link:hover {
  background-color: #f5f3ff;
}
.feature-grid-icon {
  color: #605DBA;
}


/* ============================================================================
   23. PRINT STYLES
   ============================================================================ */
@media print {
  .navbar,
  .offcanvas,
  .progress-wrap,
  .footer-glow,
  .footer-glow-cyan,
  .footer-glow-magenta,
  .footer-glow-purple,
  .hero-bg-hyperfield canvas,
  .hero-grain,
  .hero-vignette,
  .particles-container,
  .btn-avtec,
  [data-cues],
  .swiper-button-next,
  .swiper-button-prev,
  .swiper-pagination {
    display: none !important;
  }

  body {
    color: #000 !important;
    background: #fff !important;
  }

  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }

  .hero-bg-hyperfield,
  .bg-lightbluepurple,
  .bg_navy,
  .bg_slate,
  .bg_darkpurple,
  .bg_blackblue,
  footer.bg-navy {
    background: #fff !important;
    color: #000 !important;
  }

  .card {
    border: 1px solid #ddd;
    box-shadow: none !important;
  }

  img {
    max-width: 100% !important;
  }
}


/* =========================================================================
   24. QA PRE-LAUNCH FIXES
   ========================================================================= */

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .dropdown-menu.dropdown-lg {
    max-width: min(1100px, calc(100vw - 2rem));
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-expand-lg .navbar-nav .dropdown-menu.dropdown-lg .dropdown-lg-content {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu.dropdown-lg .dropdown-lg-content > div {
    flex: 1 1 220px;
    min-width: 0;
    margin-left: 0 !important;
  }
}

.text-muted {
  color: #56627a !important;
}

.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-within {
  position: fixed !important;
  top: 0.75rem !important;
  left: 0.75rem !important;
  z-index: 1080 !important;
  width: auto !important;
  height: auto !important;
  padding: 0.75rem 1.25rem !important;
  margin: 0 !important;
  clip: auto !important;
  white-space: normal !important;
  background: var(--avtec-navy, #0f172a);
  color: #fff !important;
  font-weight: 600;
  border-radius: 0.375rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  outline: 3px solid var(--avtec-cyan, #10add5);
  outline-offset: 2px;
  text-decoration: none;
}


/* ============================================================================
   25. HOMEPAGE PREMIER TABS
   ============================================================================ */
.avtec-premier-tabs .tab-pane {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}
.avtec-premier-label {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.avtec-proof-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.avtec-proof-chips span {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.1), rgba(190, 24, 93, 0.1));
  color: var(--avtec-navy);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
}
.avtec-cross-sell-module {
  border-radius: 0.9rem;
  padding: 1rem 1rem 0.9rem;
  margin-top: 1rem;
  border: 1px solid transparent;
}
.avtec-cross-sell-module h5 {
  font-size: 0.95rem !important;
  margin-bottom: 0.65rem;
}
.avtec-cross-sell-links {
  display: grid;
  gap: 0.5rem;
}
.avtec-cross-sell-links a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.65rem;
  border-radius: 0.6rem;
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none !important;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  color: var(--avtec-navy) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.avtec-cross-sell-links a::after {
  content: "\2192";
  margin-left: 0.5rem;
}
.avtec-cross-sell-links a:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.1);
}
.avtec-cross-sell-yellow {
  background: linear-gradient(135deg, rgba(250, 183, 88, 0.16), rgba(255, 255, 255, 0.92));
  border-color: rgba(250, 183, 88, 0.35);
}
.avtec-cross-sell-green {
  background: linear-gradient(135deg, rgba(69, 196, 160, 0.16), rgba(255, 255, 255, 0.92));
  border-color: rgba(69, 196, 160, 0.35);
}
.avtec-cross-sell-red {
  background: linear-gradient(135deg, rgba(229, 94, 94, 0.16), rgba(255, 255, 255, 0.92));
  border-color: rgba(229, 94, 94, 0.35);
}
.avtec-dual-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
@media (max-width: 767.98px) {
  .avtec-premier-tabs .tab-pane {
    padding: 1.5rem 1rem;
  }
  .avtec-cross-sell-links a {
    font-size: 0.8rem;
  }
}


/* ============================================================================
   26. SOFT COLOR BACKGROUNDS
   ============================================================================ */
.bg-soft-green   { background-color: #d1e7dd !important; }
.bg-soft-red     { background-color: #f8d7da !important; }
.bg-soft-aqua    { background-color: #cff4fc !important; }
.bg-soft-yellow  { background-color: #fff3cd !important; }
.bg-soft-purple  { background-color: #e2d9f3 !important; }
.bg-soft-pink    { background-color: #f7d6e6 !important; }
.bg-soft-orange  { background-color: #fde4d8 !important; }
.bg-soft-primary { background-color: #d8e3fa !important; }


/* ============================================================================
   27. PORTFOLIO / PROJECT CARDS SLIDER
   ============================================================================ */
.portfolio-slider .swiper-slide figure {
  background: #e8f4f8;
  border-radius: 16px;
  padding: 1.5rem 1.5rem 0 1.5rem;
  margin-bottom: 1rem !important;
  box-shadow:
    0 12px 32px -16px rgba(15, 30, 60, 0.12),
    0 4px 12px -4px rgba(15, 30, 60, 0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
}

.portfolio-slider .swiper-slide figure:hover {
  transform: translateY(-4px);
  box-shadow:
    0 24px 48px -16px rgba(15, 30, 60, 0.2),
    0 8px 16px -4px rgba(15, 30, 60, 0.1);
}

.portfolio-slider .swiper-slide figure img {
  height: 380px !important;
  object-fit: contain !important;
  object-position: center bottom;
  width: 100% !important;
  border-radius: 0;
  transition: transform 0.6s ease;
}

.portfolio-slider .swiper-slide figure:hover img {
  transform: scale(1.02);
}

.portfolio-slider .swiper-slide:nth-child(6n+1) figure { background: #e8f4f8; }
.portfolio-slider .swiper-slide:nth-child(6n+2) figure { background: #f5f0e8; }
.portfolio-slider .swiper-slide:nth-child(6n+3) figure { background: #f0f4e8; }
.portfolio-slider .swiper-slide:nth-child(6n+4) figure { background: #f4e8f0; }
.portfolio-slider .swiper-slide:nth-child(6n+5) figure { background: #e8e8f4; }
.portfolio-slider .swiper-slide:nth-child(6n+6) figure { background: #f4f4e8; }

@media (max-width: 991.98px) {
  .portfolio-slider .swiper-slide figure img {
    height: 320px !important;
  }
}

@media (max-width: 575.98px) {
  .portfolio-slider .swiper-slide figure img {
    height: 280px !important;
  }
}

.portfolio-slider .swiper-slide figure.figure-mockup {
  padding: 1.5rem 2rem 0 2rem !important;
}

.portfolio-slider .swiper-slide figure.figure-mockup img {
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

.portfolio-slider .swiper-slide figure.figure-mockup:hover img {
  transform: none;
}


/* ============================================================================
   ============================================================================
   NEW DESIGN SYSTEM COMPONENTS
   ============================================================================
   ============================================================================ */


/* ============================================================================
   28. DESIGN SYSTEM — BEM BUTTONS
   Uses [class*="btn--"] selector to avoid conflicting with Bootstrap's .btn
   ============================================================================ */

[class*="btn--"] {
  --btn-bg:         var(--avtec-ink-900);
  --btn-fg:         #fff;
  --btn-border:     transparent;
  --btn-bg-hover:   var(--avtec-ink-700);
  --btn-shadow:     var(--shadow-sm);
  --btn-glow:       rgba(10, 20, 48, 0.18);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: -0.005em;
  padding: 0.65rem 1.25rem;
  min-height: 42px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  box-shadow: var(--btn-shadow);
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  white-space: nowrap;
}

[class*="btn--"]:hover {
  background: var(--btn-bg-hover);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow:
    0 0 20px var(--btn-glow),
    0 8px 20px rgba(0, 0, 0, 0.12);
}
[class*="btn--"]:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}
[class*="btn--"]:disabled,
[class*="btn--"][aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Size modifiers */
.btn--sm   { padding: 0.5rem 1rem; min-height: 36px; font-size: 0.8125rem; }
.btn--lg   { padding: 0.85rem 1.65rem; min-height: 48px; font-size: 0.9375rem; }
.btn--square { border-radius: var(--radius-md); }

/* PRIMARY — canonical Avtec pink pill */
.btn--primary {
  --btn-bg: #C4346E;
  --btn-fg: #fff;
  --btn-border: #C4346E;
  --btn-bg-hover: #D63A7A;
  --btn-glow: rgba(196, 52, 110, 0.5);
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn--primary::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(138, 43, 226, 0.5), transparent);
  transition: width 0.3s ease;
  z-index: -1;
}
.btn--primary:hover::before {
  width: 60%;
}
.btn--primary:hover {
  background: #D63A7A;
  border-color: #D63A7A;
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 0 20px rgba(196, 52, 110, 0.5),
    0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Gradient fill variant */
.btn--primary-gradient {
  --btn-fg: #fff;
  --btn-border: transparent;
  --btn-glow: rgba(224, 74, 158, 0.5);
  background-image: linear-gradient(100deg, #C4346E 0%, #E04A9E 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn--primary-gradient::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(138, 43, 226, 0.4), transparent);
  transition: width 0.3s ease;
  z-index: -1;
}
.btn--primary-gradient:hover::before {
  width: 60%;
}
.btn--primary-gradient:hover {
  background-image: linear-gradient(100deg, #D63A7A 0%, #F266B0 100%);
  transform: translateY(-2px);
  box-shadow:
    0 0 24px rgba(224, 74, 158, 0.5),
    0 8px 20px rgba(0, 0, 0, 0.15);
}

.btn--ink {
  --btn-bg: var(--avtec-ink-900);
  --btn-fg: #fff;
  --btn-bg-hover: var(--avtec-deep-500);
  --btn-glow: rgba(10, 20, 48, 0.45);
}
.btn--brand {
  --btn-bg: var(--avtec-cyan-600);
  --btn-fg: #fff;
  --btn-bg-hover: var(--avtec-cyan-700);
  --btn-glow: rgba(18, 170, 213, 0.5);
}
.btn--accent {
  --btn-bg: var(--avtec-pink-600);
  --btn-fg: #fff;
  --btn-bg-hover: var(--avtec-pink-700);
  --btn-glow: rgba(196, 52, 110, 0.5);
}
.btn--signature {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-glow: rgba(18, 170, 213, 0.35);
  background-image: var(--gradient-signature);
  border: none;
}
.btn--signature:hover {
  background-image: linear-gradient(110deg, var(--avtec-cyan-600) 0%, var(--avtec-pink-600) 100%);
  transform: translateY(-2px);
  box-shadow:
    0 0 20px rgba(18, 170, 213, 0.35),
    0 0 20px rgba(196, 52, 110, 0.25),
    0 8px 20px rgba(0, 0, 0, 0.12);
}
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--avtec-ink-900);
  --btn-border: var(--avtec-ink-900);
  --btn-bg-hover: var(--avtec-ink-900);
  --btn-glow: rgba(10, 20, 48, 0.25);
  box-shadow: none;
}
.btn--outline:hover { color: #fff; }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--avtec-ink-900);
  --btn-border: transparent;
  --btn-bg-hover: var(--surface-3);
  --btn-glow: transparent;
  box-shadow: none;
}
.btn--on-dark {
  --btn-bg: #fff;
  --btn-fg: var(--avtec-ink-900);
  --btn-bg-hover: var(--surface-2);
  --btn-glow: rgba(255, 255, 255, 0.25);
}
.btn--on-dark-outline {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-border: rgba(255,255,255,0.4);
  --btn-bg-hover: rgba(255,255,255,0.08);
  --btn-glow: rgba(255, 255, 255, 0.15);
  box-shadow: none;
}

/* Hero E variant */
.btn--outline-on-dark {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-border: rgba(255,255,255,0.35);
  --btn-bg-hover: rgba(255,255,255,0.1);
  --btn-glow: rgba(255, 255, 255, 0.15);
  box-shadow: none;
}
.btn--outline-on-dark:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.6);
}

[class*="btn--"] .icon-right {
  transition: transform var(--dur-sm) var(--ease-out);
}
[class*="btn--"]:hover .icon-right {
  transform: translateX(2px);
}


/* ============================================================================
   29. DESIGN SYSTEM — FORM FIELDS
   ============================================================================ */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.field-label {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  letter-spacing: -0.005em;
}
.field-hint  { font-size: var(--fs-xs); color: var(--fg-3); }
.field-error { font-size: var(--fs-xs); color: var(--danger-500); font-weight: var(--fw-semibold); }

.input, .select, .textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  padding: 0.75rem 0.875rem;
  min-height: 44px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-2);
  background: var(--surface-0);
  color: var(--fg-1);
  transition: border-color var(--dur-sm) var(--ease-out),
              box-shadow var(--dur-sm) var(--ease-out),
              background var(--dur-sm) var(--ease-out);
  width: 100%;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--avtec-ink-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--avtec-cyan-500);
  box-shadow: 0 0 0 3px rgba(24, 184, 220, 0.18);
}
.input::placeholder, .textarea::placeholder { color: var(--fg-3); }
.input[aria-invalid="true"] { border-color: var(--danger-500); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(196, 47, 61, 0.18); }
.textarea { min-height: 108px; resize: vertical; }


/* ============================================================================
   30. DESIGN SYSTEM — BADGES
   ============================================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  line-height: 1.4;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Extra-small, low-contrast row (e.g. estimate / filter hints) */
.badge--xs {
  padding: 0.125rem 0.45rem;
  font-size: 0.6875rem;
  gap: 0.25rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  opacity: 0.92;
}

/* Micro pills (inline link rows) */
.badge--2xs {
  padding: 0.0625rem 0.35rem;
  font-size: 0.625rem;
  gap: 0.125rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.03em;
  line-height: 1.35;
  opacity: 0.94;
}

a.badge {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

a.badge:hover {
  opacity: 1;
  filter: brightness(0.96);
}

a.badge:focus-visible {
  outline: 2px solid var(--avtec-cyan-500);
  outline-offset: 2px;
}

.badge--neutral { background: var(--surface-3); color: var(--fg-2); border-color: var(--border-1); }

/* Brand-family tints */
.badge--brand   { background: rgba(24,184,220,0.12); color: var(--avtec-cyan-700); border-color: rgba(24,184,220,0.28); }
.badge--accent  { background: rgba(236,62,134,0.10); color: var(--avtec-pink-600); border-color: rgba(236,62,134,0.26); }
.badge--deep    { background: rgba(11,58,140,0.10); color: var(--avtec-deep-500); border-color: rgba(11,58,140,0.22); }

/* Complementary */
.badge--amber   { background: #FEF0D4; color: #8F5F0C; border-color: rgba(196,140,20,0.28); }
.badge--teal    { background: #DDF5EE; color: #0E8F82; border-color: rgba(20,184,166,0.28); }
.badge--gold    { background: #FAF1D1; color: #8A6C12; border-color: rgba(200,160,30,0.28); }
.badge--coral   { background: #FCE3DD; color: #B1502F; border-color: rgba(228,110,76,0.26); }
.badge--lilac   { background: #ECE5FA; color: #5E45B6; border-color: rgba(124,94,220,0.26); }

/* Semantic */
.badge--success { background: var(--success-100); color: var(--success-600); border-color: rgba(20,184,166,0.25); }
.badge--warning { background: var(--warning-100); color: var(--warning-600); border-color: rgba(244,183,64,0.30); }
.badge--danger  { background: var(--danger-100);  color: var(--danger-600);  border-color: rgba(240,93,111,0.25); }

.badge--dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
}


/* ============================================================================
   31. DESIGN SYSTEM — EYEBROW-DOT
   ============================================================================ */

.eyebrow-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-brand);
}
.eyebrow-dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--avtec-cyan-500);
  box-shadow: 0 0 0 4px rgba(24, 184, 220, 0.18);
}


/* ============================================================================
   32. DESIGN SYSTEM — CARDS (from components.css)
   ============================================================================ */

.card--interactive {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .26s cubic-bezier(.22,1,.36,1), box-shadow .26s, border-color .26s;
  cursor: default !important;
}
/* Shell is not a link — only real controls get the hand (wins over CDN/old builds + theme .card:hover habits) */
.card--interactive .card-body,
.card--interactive .card-body .card-title,
.card--interactive .card-body > p,
.card--interactive .card-body .w-duo,
.card--interactive .card-body .w-duo * {
  cursor: default !important;
}
.card--interactive a[href]:not([href=""]),
.card--interactive button:not([disabled]),
.card--interactive [role="button"]:not([aria-disabled="true"]) {
  cursor: pointer !important;
}
.card--interactive::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(250px circle at var(--mx,50%) var(--my,50%), rgba(24,184,220,.18), transparent 55%);
  opacity: 0;
  transition: opacity .32s;
}
.card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-2);
}
.card--interactive:hover::before { opacity: 1; }
.card--accent-pink.card--interactive::before { background: radial-gradient(250px circle at var(--mx,50%) var(--my,50%), rgba(196,52,110,.18), transparent 55%); }
.card--accent-deep.card--interactive::before { background: radial-gradient(250px circle at var(--mx,50%) var(--my,50%), rgba(11,58,140,.18), transparent 55%); }

/* Narrow grid cards: CTA labels wrap instead of overflowing the pill (nowrap + line-height:1 clips) */
.card--interactive .card-body .btn--ink {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
  padding-inline: 0.65rem;
}
.card--interactive .card-body.d-flex.flex-column .btn--ink {
  align-self: stretch;
}
.card--inset { background: var(--surface-2); box-shadow: none; }
.card--dark  { background: var(--surface-dark-1); border-color: rgba(255,255,255,0.06); color: #fff; }
.card--dark h1, .card--dark h2, .card--dark h3, .card--dark h4, .card--dark h5, .card--dark h6 { color: #fff !important; }
.card--dark p { color: rgba(255,255,255,0.72); }

/* Dark image cards (on dark zones) */
.card-zone--ink .card--img h5,
.card-zone--ink .card h5 { color: #fff !important; }
.card-zone--ink .card--img p,
.card-zone--ink .card p  { color: rgba(255,255,255,0.68) !important; }

.card--accent-cyan { border-top: 3px solid var(--avtec-cyan-500); }
.card--accent-pink { border-top: 3px solid var(--avtec-pink-500); }
.card--accent-deep { border-top: 3px solid var(--avtec-deep-500); }

/* Tighter type scale for accent service-cards (overrides global h4 1.25rem !important
   so the heading + body feel proportional to the card, matching the svc-card pattern). */
.card--accent-cyan .card-title,
.card--accent-pink .card-title,
.card--accent-deep .card-title {
  font-size: 1rem !important;
  line-height: 1.35;
  font-weight: var(--fw-semibold);
  margin-bottom: .5rem;
}
.card--accent-cyan .card-body p,
.card--accent-pink .card-body p,
.card--accent-deep .card-body p {
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--fg-2);
}

/* Image card */
.card--img .card-img-top {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card--img .card-body { padding: 1.25rem 1.35rem 1.35rem; }
.card--img .card-body h5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}
.card--img .card-body p {
  font-size: 0.875rem;
  color: var(--fg-2);
  line-height: 1.55;
  margin-bottom: 0;
}
.card--img .card-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.5rem;
}
.card--img .card-tag.cyan   { background: rgba(24,184,220,0.12); color: var(--avtec-cyan-700); }
.card--img .card-tag.pink   { background: rgba(196,52,110,0.10); color: var(--avtec-pink-600); }
.card--img .card-tag.deep   { background: rgba(11,58,140,0.10); color: var(--avtec-deep-500); }
.card--img .card-tag.mint   { background: rgba(14,143,130,0.10); color: #0E8F82; }

/* Testimonial card */
.card--testimonial {
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  position: relative;
}
.card--testimonial .quote-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: rgba(24,184,220,0.10);
  color: var(--avtec-cyan-600);
  margin-bottom: 0.85rem;
}
.card--testimonial blockquote {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fg-1);
  font-style: italic;
  margin: 0 0 1rem;
  padding: 0;
  border: none;
}
.card--testimonial .author {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.card--testimonial .author img {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
}
.card--testimonial .author-name {
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--fg-1);
}
.card--testimonial .author-role {
  font-size: 0.75rem;
  color: var(--fg-3);
}

/* Profile card */
.card--profile {
  text-align: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.card--profile .profile-banner {
  height: 80px;
}
.card--profile .profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  object-fit: cover;
  border: 3px solid #fff;
  margin-top: -32px;
  position: relative;
}
.card--profile .profile-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin: 0.5rem 0 0;
}
.card--profile .profile-title {
  font-size: 0.8125rem;
  color: var(--fg-3);
  margin: 0.1rem 0 0.65rem;
}
.card--profile .profile-stats {
  display: flex;
  justify-content: center;
  gap: 1.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-1);
}
.card--profile .profile-stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--fg-1);
}
.card--profile .profile-stat-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--fg-3);
}

/* Pricing card */
.card--pricing {
  border-radius: var(--radius-lg);
  text-align: center;
  padding: 2rem 1.5rem;
  position: relative;
}
.card--pricing.featured {
  border: 2px solid var(--avtec-cyan-500);
  box-shadow: 0 0 28px rgba(24,184,220,0.12);
}
.card--pricing .plan-name {
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 0.5rem;
}
.card--pricing .plan-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--fg-1);
}
.card--pricing .plan-price span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg-3);
}
.card--pricing .plan-desc {
  font-size: 0.8125rem;
  color: var(--fg-2);
  margin: 0.65rem 0 1.25rem;
}
.card--pricing ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  text-align: left;
}
.card--pricing ul li {
  font-size: 0.8125rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card--pricing ul li:last-child { border-bottom: none; }
.card--pricing ul li i { color: var(--avtec-cyan-600); font-size: 0.9375rem; }
.card--pricing.featured .plan-name { color: var(--avtec-cyan-600); }

/* Gradient-border card */
.card--gradient-border {
  position: relative;
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 1.5rem;
  overflow: hidden;
  border: none;
}
.card--gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--avtec-cyan-500) 0%, var(--avtec-pink-500) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.card--gradient-border h5 {
  font-family: var(--font-display);
  font-weight: 700;
}

/* Metric card */
.card--metric {
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
}
.card--metric .metric-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.04em;
}
.card--metric .metric-label {
  font-size: 0.8125rem;
  color: var(--fg-3);
  margin-top: 0.35rem;
}
.card--metric .metric-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  margin-top: 0.5rem;
}
.card--metric .metric-trend.up   { background: rgba(16,185,129,0.10); color: #059669; }
.card--metric .metric-trend.down { background: rgba(239,68,68,0.10); color: #DC2626; }

/* Brand background grid zones */
.card-zone {
  border-radius: var(--radius-xl, 20px);
  padding: 2rem;
}
.card-zone--mist       { background: #F0F7FA; }
.card-zone--blush      { background: #FDF2F6; }
.card-zone--ice        { background: #EFF6FF; }
.card-zone--sand       { background: #FEF8F0; }
.card-zone--mint       { background: #F0FDF8; }
.card-zone--lavender   { background: #F5F0FF; }
.card-zone--ink        { background: var(--surface-dark-0); }

/* Stat card */
.stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.stat-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}


/* ============================================================================
   33. DESIGN SYSTEM — CHIPS / RULES
   ============================================================================ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  font-size: var(--fs-small);
  color: var(--fg-2);
  font-weight: var(--fw-medium);
}

.rule { height: 1px; background: var(--border-1); }
.rule--brand { height: 2px; background: var(--gradient-signature); border-radius: 2px; }


/* ============================================================================
   34. DESIGN SYSTEM — LAYOUT HELPERS
   Uses ds- prefix to avoid collision with Bootstrap's .container
   ============================================================================ */

.ds-container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.ds-container--narrow {
  max-width: var(--container-md);
}

.section--brand {
  background: var(--gradient-signature);
  color: #fff;
  padding-block: var(--space-20);
}
.section--brand .lead { color: rgba(255,255,255,0.85); }

.section--dark {
  background: var(--bg-dark);
  color: #fff;
  padding-block: var(--space-20);
}
.section--dark .lead { color: rgba(255,255,255,0.72); }


/* ============================================================================
   34b. STYLEGUIDE / SWATCH — background token previews
   Used by brandocs/styleguide/backgrounds.html; safe to load on any page that
   documents tokens (copy buttons, swatches, overlay demos).
   ============================================================================ */

.copy-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.copy-row .btn-copy-icon {
  font-family: var(--font-body);
  font-size: 0.7rem;
  padding: 0.2rem 0.65rem;
  border-radius: 100px;
  border: 1px solid var(--border-1);
  background: #fff;
  color: var(--fg-2);
  cursor: pointer;
  flex: 1;
  text-align: center;
  transition: border-color 0.2s, color 0.2s;
}

.copy-row .btn-copy-icon:hover {
  border-color: var(--avtec-cyan-500);
  color: var(--avtec-cyan-600);
}

.swatch-wrap {
  margin-bottom: 1.25rem;
}

.swatch-label {
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--font-mono);
  margin-bottom: 0.4rem;
  color: var(--fg-1);
}

.swatch-block {
  min-height: 80px;
  border-radius: var(--radius-md);
}

.swatch-block--lg {
  min-height: 100px;
}

.swatch-block--light {
  border: 1px solid var(--border-1);
}

.surface-chip {
  height: 64px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-1);
}

.surface-chip--dark {
  border-color: rgba(255, 255, 255, 0.08);
}

.overlay-demo {
  position: relative;
  min-height: 180px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: url('https://picsum.photos/seed/avtec-overlay/800/400') center / cover no-repeat;
}

.gradient-text-demo {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-swatch {
  min-height: 80px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-1);
}


/* ============================================================================
   35. DESIGN SYSTEM — SITE HEADER SCAFFOLD
   ============================================================================ */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border-1);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-6);
  height: 72px;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.site-header__brand { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; color: var(--fg-1); }
.site-header__brand-mark { width: 32px; height: 32px; }
.site-header__brand-word { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em; color: var(--fg-1); }
.site-header__nav { display: flex; gap: var(--space-5); margin-left: var(--space-6); }
.site-header__nav a {
  color: var(--fg-2); font-weight: var(--fw-medium); font-size: var(--fs-small); letter-spacing: -0.005em;
  padding: 0.5rem 0.25rem; border-bottom: 2px solid transparent;
  transition: color var(--dur-sm), border-color var(--dur-sm);
}
.site-header__nav a:hover { color: var(--fg-1); text-decoration: none; border-color: var(--avtec-cyan-500); }
.site-header__cta { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; }


/* ============================================================================
   36. DESIGN SYSTEM — HERO SCAFFOLD
   ============================================================================ */

.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero__inner {
  max-width: var(--container-xl);
  margin-inline: auto;
  padding: var(--space-20) var(--space-6);
  position: relative;
  z-index: 2;
}
.hero__headline {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tightest);
  text-wrap: balance;
  margin: 0;
}
.hero__sub {
  max-width: 58ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-prose);
  color: var(--fg-2);
  margin: var(--space-6) 0 var(--space-8);
}


/* ============================================================================
   37. HERO A — STATEMENT
   ============================================================================ */

.heroA {
  padding: 72px 56px 96px;
  position: relative;
  overflow: hidden;
  background: var(--surface-1);
}
.heroA__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.heroA__headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 82px;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--avtec-ink-900);
  margin: 22px 0 24px;
  text-wrap: balance;
}
.heroA__headline .mark {
  background-image: var(--gradient-signature);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.heroA__sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 46ch;
  margin: 0 0 32px;
}
.heroA__ctas {
  display: flex;
  gap: 10px;
  align-items: center;
}
.heroA__meta {
  display: flex;
  gap: 26px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--border-1);
}
.heroA__meta .stat-value { font-size: 34px; }
.heroA__meta .stat-label { font-size: 11px; }

.heroA__showcase {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: #0A1430;
}
.heroA__showcase .phone {
  position: absolute;
  right: -48px;
  bottom: -60px;
  width: 64%;
  border-radius: 36px;
  background: #fff;
  border: 10px solid #0A1430;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.4);
  transform: rotate(4deg);
  overflow: hidden;
}
.heroA__showcase .desktop {
  position: absolute;
  top: 28px;
  left: 28px;
  width: 72%;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.5);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}

/* Mini screen elements */
.scr-head { height: 34px; background: var(--avtec-ink-900); display: flex; align-items: center; padding: 0 12px; gap: 6px; }
.scr-head .dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.22); }
.scr-body { padding: 14px; }
.scr-h1 { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -0.03em; color: var(--avtec-ink-900); margin: 0 0 6px; }
.scr-p  { font-size: 11px; color: var(--fg-2); line-height: 1.4; margin: 0 0 10px; }
.scr-btn { display: inline-block; padding: 6px 10px; font-size: 10px; font-weight: 700; border-radius: 6px; background: var(--avtec-ink-900); color: #fff; }
.scr-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.scr-rate { border: 1px solid var(--border-1); border-radius: 6px; padding: 8px; }
.scr-rate .t { font-size: 9px; color: var(--fg-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.scr-rate .v { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--avtec-ink-900); letter-spacing: -0.02em; }
.scr-rate .apr { font-size: 9px; color: var(--fg-3); }
.ph-head { height: 22px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font-size: 9px; color: var(--avtec-ink-900); }
.ph-hero { background: linear-gradient(160deg, #0A1430 0%, #0B3A8C 100%); padding: 14px; color: #fff; }
.ph-hero .eb { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: #38CCEC; font-weight: 800; }
.ph-hero .h  { font-family: var(--font-display); font-size: 20px; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; margin: 6px 0; }
.ph-card { background: #fff; margin: 10px; padding: 10px; border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.ph-card .t { font-size: 9px; color: var(--fg-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.ph-card .v { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--avtec-ink-900); letter-spacing: -0.02em; }

/* Background accents */
.heroA__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(600px 420px at 92% 10%, rgba(236,62,134,0.10), transparent 60%),
    radial-gradient(700px 500px at 0% 80%, rgba(24,184,220,0.10), transparent 60%);
}
.heroA__grid-lines {
  position: absolute; inset: 0; z-index: 1;
  background-image: linear-gradient(to right, rgba(10,20,48,0.04) 1px, transparent 1px);
  background-size: 80px 100%;
  mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 80%);
}

@media (max-width: 991.98px) {
  .heroA { padding: 48px 24px 64px; }
  .heroA__grid { grid-template-columns: 1fr; gap: 40px; }
  .heroA__headline { font-size: clamp(2.5rem, 6vw + 1rem, 82px); }
}


/* ============================================================================
   38. HERO B — INSTITUTIONAL SPLIT
   ============================================================================ */

.heroB {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 640px;
}
.heroB__left {
  background: var(--gradient-authority);
  color: #fff;
  padding: 72px 64px;
  position: relative;
  overflow: hidden;
}
.heroB__left::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(800px 500px at 0% 110%, rgba(24,184,220,0.18), transparent 60%),
    radial-gradient(500px 400px at 90% 0%, rgba(236,62,134,0.14), transparent 60%);
}
.heroB__left > * { position: relative; z-index: 1; }
.heroB__eb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: #38CCEC;
}
.heroB__eb::before {
  content: '';
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, #38CCEC, #EC3E86);
  border-radius: 2px;
}
.heroB__h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 68px;
  line-height: 1.0;
  letter-spacing: -0.04em;
  margin: 28px 0 22px;
  color: #fff;
}
.heroB__sub {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  max-width: 46ch;
  margin: 0 0 32px;
}
.heroB__ctas { display: flex; gap: 10px; }
.heroB__spec {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 26px;
}
.heroB__spec dt {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #38CCEC;
  margin-bottom: 4px;
}
.heroB__spec dd {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,0.88);
  margin: 0;
}

.heroB__right {
  background: var(--surface-1);
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-left: 1px solid var(--border-1);
}
.evidence {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-lg);
  padding: 20px;
}
.evidence .meta { display: flex; justify-content: space-between; align-items: center; }
.evidence .meta .label { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.evidence .title { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.025em; color: var(--avtec-ink-900); margin: 10px 0 4px; }
.evidence .quote { font-size: 14px; color: var(--fg-2); line-height: 1.55; border-left: 3px solid var(--avtec-cyan-500); padding-left: 12px; margin-top: 12px; }
.evidence .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-1); }
.evidence .stat-value { font-size: 28px; }
.evidence .stat-label { font-size: 10px; }

/* Site screenshot placeholder */
.shot {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-1);
  display: grid;
  grid-template-rows: 22px 1fr;
  background: #fff;
}
.shot-bar { background: var(--avtec-ink-900); display: flex; align-items: center; padding: 0 10px; gap: 5px; }
.shot-bar .d { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,0.22); }
.shot-body { padding: 16px 20px; background: linear-gradient(160deg, #FAFBFD 0%, #EEF1F7 100%); }
.shot-eb { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 800; color: #0A7490; }
.shot-h  { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; color: var(--avtec-ink-900); line-height: 1.05; margin: 6px 0 8px; max-width: 20ch; }
.shot-row { display: flex; gap: 10px; }
.shot-rate { background: #fff; border: 1px solid var(--border-1); border-radius: 6px; padding: 8px 10px; }
.shot-rate .t { font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); font-weight: 700; }
.shot-rate .v { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.02em; color: var(--avtec-ink-900); }

@media (max-width: 991.98px) {
  .heroB { grid-template-columns: 1fr; }
  .heroB__left { padding: 48px 24px; }
  .heroB__h1 { font-size: clamp(2.25rem, 5vw + 1rem, 68px); }
  .heroB__right { padding: 36px 24px; border-left: none; border-top: 1px solid var(--border-1); }
}


/* ============================================================================
   39. HERO C — WORK FIRST
   ============================================================================ */

.heroC { padding: 56px 56px 24px; }
.heroC__lead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 36px;
}
.heroC__headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 72px;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--avtec-ink-900);
  max-width: 20ch;
  margin: 18px 0 0;
}
.heroC__headline em {
  font-style: normal;
  background-image: var(--gradient-signature);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.heroC__aside { max-width: 340px; text-align: right; }
.heroC__aside p { font-size: 15px; line-height: 1.55; color: var(--fg-2); margin: 0 0 16px; }

.heroC__work {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-rows: 260px 220px;
  gap: 14px;
}
.tile {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 20px;
}
.tile .meta { display: flex; justify-content: space-between; align-items: center; }
.tile .name { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.025em; }
.tile .cat  { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; }
.tile .kpi  { display: flex; align-items: baseline; gap: 8px; }
.tile .kpi .v { font-family: var(--font-display); font-weight: 800; font-size: 40px; letter-spacing: -0.03em; line-height: 1; }
.tile .kpi .l { font-size: 12px; font-weight: 500; }

.t1 { grid-column: span 1; grid-row: span 2; background: var(--gradient-authority); color: #fff; }
.t1 .cat { color: #38CCEC; }
.t1 .name, .t1 .v { color: #fff; }
.t1 .l { color: rgba(255,255,255,0.7); }
.t1::before { content: ''; position: absolute; inset: 0; background: radial-gradient(500px 300px at 90% 0%, rgba(24,184,220,0.22), transparent 60%); pointer-events: none; }
.t1 .tag { position: absolute; right: 18px; top: 18px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); }

.t2 { background: #fff; }
.t2 .cat, .t2 .v { color: var(--avtec-ink-900); }
.t2 .cat { color: var(--avtec-cyan-600); }
.t2 .l  { color: var(--fg-2); }

.t3 { background: linear-gradient(160deg, #EEF1F7 0%, #E3E8F0 100%); }
.t3 .cat { color: var(--avtec-pink-600); }
.t3 .name, .t3 .v { color: var(--avtec-ink-900); }
.t3 .l { color: var(--fg-2); }

.t4 { background: var(--gradient-signature); color: #fff; }
.t4 .cat { color: rgba(255,255,255,0.85); }
.t4 .name, .t4 .v { color: #fff; }
.t4 .l { color: rgba(255,255,255,0.85); }

.t5 { background: #fff; }
.t5 .cat { color: var(--avtec-deep-500); }
.t5 .name, .t5 .v { color: var(--avtec-ink-900); }
.t5 .l { color: var(--fg-2); }

.heroC__strip {
  margin-top: 28px;
  padding: 20px 0;
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-weight: 700;
}
.heroC__strip .lbl { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.heroC__strip .cu  { color: var(--avtec-ink-800); font-size: 18px; letter-spacing: -0.02em; opacity: 0.78; }

@media (max-width: 991.98px) {
  .heroC { padding: 36px 24px 16px; }
  .heroC__lead { flex-direction: column; align-items: flex-start; gap: 24px; }
  .heroC__headline { font-size: clamp(2.25rem, 5vw + 1rem, 72px); }
  .heroC__aside { text-align: left; max-width: none; }
  .heroC__work { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .t1 { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 575.98px) {
  .heroC__work { grid-template-columns: 1fr; }
  .t1 { grid-column: span 1; }
}


/* ============================================================================
   40. HERO D — MESH GRADIENT
   ============================================================================ */

.heroD {
  position: relative;
  padding: 72px 56px 120px;
  overflow: hidden;
  isolation: isolate;
  background: #FBEFEA;
}
.heroD::before {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: -2;
  background:
    radial-gradient(55% 55% at 5% 20%, #FDE1D0 0%, transparent 60%),
    radial-gradient(50% 50% at 95% 10%, #F9D6E6 0%, transparent 60%),
    radial-gradient(60% 60% at 80% 95%, #DAE4FB 0%, transparent 60%),
    radial-gradient(50% 50% at 15% 95%, #D7F2EA 0%, transparent 60%),
    radial-gradient(80% 80% at 50% 50%, #FFF6F1 0%, transparent 70%);
  filter: blur(0px);
}
.heroD::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.04  0 0 0 0 0.08  0 0 0 0 0.19  0 0 0 0.09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.mesh-chip {
  position: absolute;
  border-radius: 18px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 20px 40px -20px rgba(10,20,48,0.16);
  padding: 14px 16px;
  z-index: 1;
}
.mesh-chip .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; margin-bottom: 6px; }
.mesh-chip .lbl { font-family: var(--font-mono); font-size: 10px; color: var(--avtec-ink-500); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.mesh-chip .val { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--avtec-ink-900); letter-spacing: -0.02em; line-height: 1.1; }

.chip-1 { top: 10%; right: 8%; }
.chip-1 .ico { background: #DDF4FA; color: #0E96B8; }
.chip-2 { top: 44%; right: 2%; }
.chip-2 .ico { background: #FCE0E8; color: #C4346E; }
.chip-3 { top: 72%; right: 24%; }
.chip-3 .ico { background: #DDF5EE; color: #0E8F82; }
.chip-4 { top: 8%; right: 34%; transform: rotate(-4deg); }
.chip-4 .ico { background: #FEF0D4; color: #B9801B; }

.heroD .scribble { position: absolute; z-index: 0; opacity: 0.75; }

.heroD__inner { position: relative; z-index: 2; max-width: 820px; padding-top: 60px; }
.heroD__eb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.9);
  backdrop-filter: blur(14px);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--avtec-ink-800);
}
.heroD__eb .pulse { width: 8px; height: 8px; border-radius: 999px; background: var(--avtec-pink-500); box-shadow: 0 0 0 4px rgba(236,62,134,0.18); margin-right: 2px; }
.heroD__eb .what  { font-family: var(--font-mono); font-size: 10px; color: var(--avtec-ink-500); letter-spacing: 0.08em; }
.heroD__eb .tag   { font-weight: 800; color: var(--avtec-pink-600); }

.heroD h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 88px;
  line-height: 0.96;
  letter-spacing: -0.05em;
  margin: 28px 0 24px;
  color: var(--avtec-ink-900);
  max-width: 14ch;
  text-wrap: balance;
}
.heroD h1 em {
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 400;
  font-style: italic;
  color: var(--avtec-pink-600);
  letter-spacing: -0.03em;
}
.heroD .sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--avtec-ink-600);
  max-width: 52ch;
  margin: 0 0 32px;
}
.heroD .ctas { display: flex; gap: 12px; align-items: center; }

.heroD__proof {
  position: absolute;
  bottom: 32px;
  left: 56px;
  right: 56px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 18px 28px;
  border-radius: 18px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 20px 40px -24px rgba(10,20,48,0.16);
}
.heroD__proof .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--avtec-ink-500); font-weight: 700; }
.heroD__proof .logos { display: flex; gap: 28px; align-items: center; margin-left: auto; }
.heroD__proof .logos span { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.02em; color: var(--avtec-ink-700); opacity: 0.72; }
.heroD__proof .logos span:nth-child(2) { font-style: italic; font-weight: 600; }
.heroD__proof .logos span:nth-child(3) { letter-spacing: 0.12em; font-weight: 900; font-size: 13px; text-transform: uppercase; }
.heroD__proof .logos span:nth-child(4) { font-family: 'Georgia', serif; font-weight: 700; }
.heroD__proof .logos span:nth-child(5) { font-weight: 400; font-size: 20px; letter-spacing: -0.05em; }

@media (max-width: 991.98px) {
  .heroD { padding: 48px 24px 100px; }
  .heroD h1 { font-size: clamp(2.75rem, 6vw + 1rem, 88px); }
  .mesh-chip { display: none; }
  .heroD__proof { left: 24px; right: 24px; bottom: 20px; flex-wrap: wrap; gap: 16px; padding: 14px 20px; }
}


/* ============================================================================
   41. HERO E — EDITORIAL IMAGE
   ============================================================================ */

.heroE {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 680px;
  background: var(--avtec-ink-900);
}

.heroE__left {
  position: relative;
  padding: 80px 48px 80px 56px;
  color: #fff;
  background:
    radial-gradient(500px 400px at 80% 10%, rgba(236,62,134,0.28), transparent 60%),
    radial-gradient(500px 400px at 10% 90%, rgba(24,184,220,0.22), transparent 60%),
    var(--avtec-ink-900);
}
.heroE__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--avtec-cyan-400);
  font-weight: 700;
  margin-bottom: 28px;
}
.heroE__eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--avtec-cyan-400); }
.heroE__left h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 84px;
  line-height: 0.95;
  letter-spacing: -0.045em;
  margin: 0 0 28px;
  color: #fff;
  text-wrap: balance;
}
.heroE__left h1 .under {
  background-image: linear-gradient(transparent 65%, rgba(244,183,64,0.75) 65%);
  padding: 0 4px;
}
.heroE__left .sub {
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  max-width: 46ch;
  margin: 0 0 32px;
}
.heroE__left .ctas { display: flex; gap: 12px; }

.heroE__metrics {
  position: absolute;
  bottom: 48px;
  left: 56px;
  right: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.heroE__metrics .m .v {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1;
}
.heroE__metrics .m .v span { color: var(--avtec-cyan-400); }
.heroE__metrics .m .l {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: 8px;
  font-weight: 600;
}

.heroE__right {
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(135deg, rgba(11,58,140,0.25) 0%, rgba(236,62,134,0.15) 100%),
    url("https://images.unsplash.com/photo-1497366216548-37526070297c?w=900&q=70");
  background-size: cover;
  background-position: center;
}
.heroE__right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--avtec-ink-900) 0%, transparent 18%);
}

.quote-card {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 40px;
  background: rgba(255,255,255,0.96);
  border-radius: 20px;
  padding: 28px 30px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.45);
  backdrop-filter: blur(16px);
}
.quote-card .mark {
  color: var(--avtec-pink-600);
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 0.6;
  letter-spacing: -0.04em;
  font-weight: 900;
}
.quote-card blockquote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--avtec-ink-900);
  margin: 0 0 16px;
  text-wrap: balance;
}
.quote-card .who { display: flex; align-items: center; gap: 12px; }
.quote-card .who .avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: linear-gradient(135deg, #EC3E86, #0B3A8C);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-family: var(--font-display);
}
.quote-card .who .meta .name { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--avtec-ink-900); }
.quote-card .who .meta .role { font-size: 12px; color: var(--fg-3); font-family: var(--font-mono); }
.quote-card .tag {
  position: absolute;
  top: -14px;
  right: 24px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--avtec-pink-500);
  color: #fff;
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ribbon {
  position: absolute;
  top: 40px;
  right: 40px;
  background: rgba(10,20,48,0.85);
  backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.6);
}
.ribbon i { color: #F4B740; font-size: 22px; }
.ribbon .t { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.ribbon .v { font-family: var(--font-display); font-size: 14px; font-weight: 700; }

@media (max-width: 991.98px) {
  .heroE { grid-template-columns: 1fr; }
  .heroE__left { padding: 48px 24px 120px; }
  .heroE__left h1 { font-size: clamp(2.5rem, 6vw + 1rem, 84px); }
  .heroE__right { min-height: 400px; }
  .heroE__metrics { left: 24px; right: 24px; bottom: 24px; }
}


/* ============================================================================
   42. DESIGN SYSTEM — KBD
   ============================================================================ */

kbd {
  font-family: var(--font-mono);
  font-size: 0.8em;
  padding: 0.125rem 0.4rem;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  color: var(--fg-1);
}


/* ============================================================================
   43. DESIGN SYSTEM — FOCUS & REDUCED MOTION
   ============================================================================ */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================================
   44. DEMO & DOC UTILITIES
   Shared helpers for brandocs demo pages: dark stage, gradient stage,
   caption labels, hint blocks.
   ============================================================================ */

.demo-dark { background:var(--surface-dark-0); border-radius:var(--radius-lg); padding:2rem; }
.demo-dark .card { background:var(--surface-dark-1) !important; border-color:rgba(255,255,255,.1) !important; }
.demo-dark .card-header { border-bottom-color:rgba(255,255,255,.08) !important; }
.demo-dark .accordion-button { color:#fff !important; }
.demo-dark .accordion-button.collapsed { color:rgba(255,255,255,.7) !important; }
.demo-dark .card-body { color:rgba(255,255,255,.65) !important; }
.demo-dark .accordion-button::after { filter:invert(1); }
.demo-dark .badge { background:rgba(255,255,255,0.08); color:#fff; border-color:rgba(255,255,255,0.12); }
.demo-dark .badge--brand { background:rgba(56,204,236,0.15); color:#38CCEC; border-color:rgba(56,204,236,0.30); }
.demo-dark .badge--accent { background:rgba(244,106,161,0.15); color:#F46AA1; border-color:rgba(244,106,161,0.30); }
.demo-dark .badge--amber { background:rgba(252,205,102,0.14); color:#FCCD66; border-color:rgba(252,205,102,0.30); }
.demo-dark .badge--teal { background:rgba(52,214,196,0.14); color:#4CE0CE; border-color:rgba(52,214,196,0.30); }
.demo-dark .badge--gold { background:rgba(230,192,92,0.14); color:#F3D67E; border-color:rgba(230,192,92,0.30); }
.demo-dark .caption { color:rgba(255,255,255,0.55); }
.demo-dark .nav-link { color:rgba(255,255,255,.6) !important; }
.demo-dark .nav-link:hover { color:rgba(255,255,255,.9) !important; }
.demo-dark .nav-tabs-dark { border-bottom:2px solid rgba(255,255,255,.12); }
.demo-dark .nav-tabs-dark .nav-link { border:none; border-bottom:2px solid transparent; margin-bottom:-2px; border-radius:0; font-family:var(--font-display); font-weight:600; padding:0.75rem 1.25rem; }
.demo-dark .nav-tabs-dark .nav-link.active { color:#fff !important; border-bottom-color:var(--avtec-cyan-400) !important; background:transparent !important; }
.demo-dark .tab-content { color:rgba(255,255,255,.75) !important; }
.demo-dark .tab-content p { color:rgba(255,255,255,.75) !important; }

.demo-gradient { background:var(--gradient-authority); border-radius:var(--radius-lg); padding:2rem; }
.demo-gradient .card { background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.12) !important; backdrop-filter:blur(8px); }
.demo-gradient .card-header { border-bottom-color:rgba(255,255,255,.08) !important; }
.demo-gradient .accordion-button { color:#fff !important; }
.demo-gradient .accordion-button.collapsed { color:rgba(255,255,255,.7) !important; }
.demo-gradient .card-body { color:rgba(255,255,255,.65) !important; }
.demo-gradient .accordion-button::after { filter:invert(1); }

.caption { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.14em; color:var(--fg-3); min-width:100px; }
.section-label { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.14em; color:var(--fg-3); margin-bottom:.5rem; }
.hint { font-size:11px; color:var(--fg-3); font-family:var(--font-mono); margin-top:14px; }
.hint :not(pre) > code { background:var(--surface-2); padding:1px 5px; border-radius:4px; color:var(--avtec-pink-600); }


/* ============================================================================
   45. DESIGN SYSTEM LANDING PAGE
   Index hero, category cards, quick-link grid, token swatches.
   ============================================================================ */

.ds-hero { position:relative; overflow:hidden; background:var(--surface-dark-0); }
.ds-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(900px 600px at 30% 40%,rgba(18,170,213,0.15),transparent 60%),radial-gradient(700px 500px at 70% 60%,rgba(196,52,110,0.12),transparent 60%); }
.ds-hero .container { position:relative; z-index:1; }
.ds-hero h1 { font-family:var(--font-display); font-weight:800; font-size:clamp(2.5rem,5vw,4rem); letter-spacing:-0.04em; line-height:1.05; }
.ds-hero .lead { font-size:1.125rem; max-width:540px; }
.ds-hero .version { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); border-radius:var(--radius-pill); padding:6px 14px; font-size:0.8125rem; font-weight:600; color:rgba(255,255,255,0.65); margin-bottom:1.5rem; }
.ds-hero .version span { color:#38CCEC; }

.cat-card { position:relative; border-radius:var(--radius-lg); padding:2rem 1.75rem; background:#fff; border:1px solid var(--border-1); transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s; cursor:pointer; text-decoration:none !important; display:block; overflow:hidden; }
.cat-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(10,20,48,0.10); }
.cat-card .cat-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:1rem; }
.cat-card h3 { font-family:var(--font-display); font-weight:800; font-size:1.15rem; letter-spacing:-0.02em; color:var(--avtec-ink-900); margin-bottom:0.35rem; }
.cat-card p { font-size:0.8125rem; color:var(--fg-2); line-height:1.55; margin:0; }
.cat-card .cat-count { position:absolute; top:1.5rem; right:1.5rem; background:var(--surface-2); border-radius:var(--radius-pill); padding:2px 10px; font-size:0.6875rem; font-weight:700; color:var(--fg-3); letter-spacing:0.04em; }
.cat-card.dark { background:var(--surface-dark-1); border-color:rgba(255,255,255,0.06); }
.cat-card.dark h3 { color:#fff !important; }
.cat-card.dark p { color:rgba(255,255,255,0.62) !important; }
.cat-card.dark .cat-count { background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.5); }

.quick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; }
.quick-link { display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; background:var(--surface-1); font-size:0.8125rem; font-weight:600; color:var(--avtec-ink-900); text-decoration:none; transition:background .2s,transform .2s; }
.quick-link:hover { background:var(--surface-3); transform:translateY(-1px); color:var(--avtec-cyan-600); }
.quick-link i { font-size:1rem; color:var(--avtec-cyan-600); }

.token-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:1rem; }
.token-swatch { width:40px; height:40px; border-radius:10px; border:1px solid rgba(0,0,0,0.06); }

.doc-link { display:block; padding:12px 0; border-bottom:1px solid var(--border-1); }
.doc-link:last-child { border-bottom:none; }
.doc-link a { font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--avtec-ink-900); text-decoration:none; }
.doc-link a:hover { color:var(--avtec-cyan-600); }
.doc-link p { font-size:14px; color:var(--fg-2); margin:4px 0 0; line-height:1.5; }


/* ============================================================================
   46. ALERT OVERRIDES
   Brand-tinted alert variants.
   ============================================================================ */

.alert { border-radius:var(--radius-md); padding:0.875rem 1.25rem; font-size:0.875rem; font-family:var(--font-body); border-width:1px; border-style:solid; }
.alert-success { background:var(--success-100) !important; border-color:var(--success-500) !important; color:#065F46 !important; }
.alert-info { background:var(--info-100) !important; border-color:var(--avtec-cyan-500) !important; color:var(--avtec-cyan-700) !important; }
.alert-warning { background:var(--warning-100) !important; border-color:var(--warning-500) !important; color:#78350F !important; }
.alert-danger { background:var(--danger-100) !important; border-color:var(--danger-500) !important; color:#991B1B !important; }
.alert-brand { background:rgba(18,170,213,0.08); border:1px solid transparent; border-left:3px solid var(--avtec-cyan-500); color:var(--avtec-ink-800); }
.alert-accent { background:rgba(196,52,110,0.08); border:1px solid transparent; border-left:3px solid var(--avtec-pink-500); color:var(--avtec-ink-800); }
.alert .bi { flex-shrink:0; }
.alert-link { font-weight:700; text-decoration:underline; }
.alert-success .alert-link { color:#065F46 !important; }
.alert-info .alert-link { color:var(--avtec-cyan-700) !important; }
.alert-warning .alert-link { color:#78350F !important; }
.alert-danger .alert-link { color:#991B1B !important; }


/* ============================================================================
   47. ACCORDION OVERRIDES
   Brand-tinted accordion wrappers and icon variant.
   ============================================================================ */

.accordion-wrapper .card { border-color:var(--border-1); }
.accordion-wrapper .card-header { background:transparent; }
.accordion-wrapper .card.plain .card-body { padding-top:0; }
.accordion-wrapper .accordion-button { font-family:var(--font-display); font-weight:700; }
.card.icon .accordion-button span { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:50%; background:rgba(18,170,213,.1); color:var(--avtec-cyan-500); margin-right:.75rem; font-size:1rem; flex-shrink:0; }


/* ============================================================================
   48. ANIMATIONS & KEYFRAMES
   Scroll reveal, brand pulse/shimmer/float/rotate, counter values.
   ============================================================================ */

.anim-box { background:var(--surface-2); border:2px solid var(--border-1); border-radius:var(--radius-lg); padding:1.5rem 2rem; text-align:center; font-weight:600; color:var(--fg-1); }
.anim-box-pink { background:rgba(236,62,134,.08); border-color:var(--avtec-pink-300); color:var(--avtec-pink-700); }
.counter-value { font-size:3rem; font-weight:800; font-family:var(--font-display); color:var(--avtec-cyan-600); line-height:1; }
.counter-label { font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-3); margin-top:.25rem; }

@keyframes brand-pulse { 0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(24,184,220,.4); } 50% { transform:scale(1.04); box-shadow:0 0 0 12px rgba(24,184,220,0); } }
@keyframes brand-shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
@keyframes brand-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes brand-rotate { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

.kf-pulse:hover { animation:brand-pulse 1.2s var(--ease-out) infinite; }
.kf-shimmer { background:linear-gradient(90deg, var(--avtec-cyan-500) 0%, var(--avtec-pink-400) 50%, var(--avtec-cyan-500) 100%); background-size:200% 100%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.kf-shimmer:hover { animation:brand-shimmer 2s linear infinite; }
.kf-float:hover { animation:brand-float 2s var(--ease-in-out) infinite; }
.kf-rotate:hover .kf-icon { animation:brand-rotate 1.5s linear infinite; }

.kf-card { background:var(--surface-1); border:2px solid var(--border-1); border-radius:var(--radius-lg); padding:2rem; text-align:center; cursor:pointer; transition:border-color var(--dur-md) var(--ease-out), box-shadow var(--dur-md) var(--ease-out); }
.kf-card:hover { border-color:var(--avtec-cyan-400); box-shadow:var(--shadow-brand-glow); }
.kf-card .kf-icon { display:inline-block; font-size:2rem; color:var(--avtec-cyan-500); margin-bottom:.75rem; }

.reveal { opacity:0; transform:translateY(30px); transition:opacity var(--dur-xl) var(--ease-out), transform var(--dur-xl) var(--ease-out); }
.reveal.is-visible { opacity:1; transform:translateY(0); }


/* ============================================================================
   49. BACKGROUND & GRADIENT DEMOS
   Swatch boxes, glass pane demos.
   ============================================================================ */

.bg-swatch { min-height:120px; border-radius:var(--radius-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.5rem 1rem; text-align:center; }
.bg-swatch h6, .bg-swatch :not(pre) > code { margin:0; }
.bg-swatch :not(pre) > code { font-size:11px; font-family:var(--font-mono); opacity:.75; }
.gradient-swatch { width:100%; height:80px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:.82rem; }
.glass-demo { position:relative; min-height:160px; border-radius:var(--radius-lg); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.glass-demo .glass-pane { backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-lg); padding:2rem 2.5rem; text-align:center; z-index:1; }


/* ============================================================================
   50. BADGE DEMOS
   Color wheel, dark-mode badge overrides (see also section 44).
   ============================================================================ */

.wheel { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.wheel .pair { border:1px solid var(--border-1); border-radius:10px; padding:10px 12px; background:#fff; display:grid; gap:6px; }
.wheel .pair .t { font-family:var(--font-mono); font-size:9px; color:var(--fg-3); letter-spacing:0.04em; text-transform:uppercase; }
.wheel .pair .ba { display:flex; gap:6px; align-items:center; }
.color-dot { width:10px; height:10px; border-radius:999px; display:inline-block; }
.legend { font-size:11px; color:var(--fg-2); }


/* ============================================================================
   51. TAB STYLES
   Brand tabs, pill tabs, gradient underline tabs, icon-only tabs.
   ============================================================================ */

.nav-tabs-brand { border-bottom:2px solid var(--border-1); }
.nav-tabs-brand .nav-link { font-family:var(--font-display); font-weight:600; color:var(--fg-2); border:none; border-bottom:2px solid transparent; padding:0.75rem 1.25rem 0.75rem; margin-bottom:-2px; border-radius:0; transition:color .2s, border-color .2s; }
.nav-tabs-brand .nav-link:hover { color:var(--avtec-cyan-600); border-bottom-color:var(--avtec-cyan-300); }
.nav-tabs-brand .nav-link.active { color:var(--avtec-cyan-600) !important; border-bottom:2px solid var(--avtec-cyan-500) !important; background:transparent !important; }
.nav-pills-brand .nav-link { font-family:var(--font-display); font-weight:600; border-radius:var(--radius-pill); color:var(--fg-2); padding:0.5rem 1.25rem; transition:all .2s; }
.nav-pills-brand .nav-link:hover { color:var(--avtec-ink-900); background:var(--surface-2); }
.nav-pills-brand .nav-link.active { background:var(--avtec-ink-900) !important; color:#fff !important; }
.nav-tabs-gradient .nav-link { font-family:var(--font-display); font-weight:600; color:var(--fg-2); border:none; border-bottom:2px solid transparent; padding:0.75rem 1.25rem; margin-bottom:-2px; border-radius:0; }
.nav-tabs-gradient .nav-link.active { color:var(--avtec-pink-600) !important; border-bottom:2px solid transparent !important; border-image:linear-gradient(90deg,var(--avtec-cyan-500),var(--avtec-pink-500)) 1 !important; background:transparent !important; }
.nav-icon-only .nav-link { width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-md); color:var(--fg-3); font-size:1.25rem; border:1px solid var(--border-1); transition:all .2s; }
.nav-icon-only .nav-link:hover { color:var(--avtec-cyan-600); border-color:var(--avtec-cyan-300); }
.nav-icon-only .nav-link.active { background:var(--avtec-cyan-500) !important; color:#fff !important; border-color:var(--avtec-cyan-500) !important; }


/* ============================================================================
   52. CAROUSEL SLIDES
   Service slides, testimonial slides, portfolio slides.
   ============================================================================ */

.svc-slide { padding:2rem 1.5rem; border-radius:var(--radius-lg); background:var(--surface-1); border:1px solid var(--border-1); text-align:center; height:100%; }
.svc-slide .svc-icon { width:56px; height:56px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1rem; }
.svc-slide h5 { font-family:var(--font-display); font-size:.95rem; font-weight:700; margin-bottom:.5rem; }
.svc-slide p { font-size:.85rem; color:var(--fg-3); line-height:1.6; }
.testi-slide { background:var(--surface-1); border-radius:var(--radius-lg); padding:2rem; text-align:center; border:1px solid var(--border-1); }
.testi-slide .avatar { width:64px; height:64px; border-radius:50%; margin:0 auto .75rem; object-fit:cover; border:3px solid var(--avtec-cyan-300); }
.testi-slide blockquote { font-size:.9rem; line-height:1.75; color:var(--fg-2); font-style:italic; margin-bottom:1rem; }
.testi-slide .author { font-weight:700; font-size:.85rem; }
.testi-slide .role { font-size:.8rem; color:var(--fg-3); }
.testi-slide .stars { color:#f59e0b; font-size:.85rem; margin-bottom:.75rem; }
.portfolio-slide figure { border-radius:var(--radius-lg); overflow:hidden; margin:0; }
.portfolio-slide figcaption { padding:.75rem 0 0; }
.portfolio-slide figcaption h6 { font-family:var(--font-display); font-weight:700; font-size:.9rem; margin-bottom:.15rem; }
.portfolio-slide figcaption small { color:var(--fg-3); font-size:.8rem; }


/* ============================================================================
   53. DIVIDER STYLES
   Gradient HRs, dotted/dashed/double, icon dividers, wave containers.
   ============================================================================ */

.hr-gradient { border:0; height:3px; background:var(--gradient-authority); border-radius:2px; }
.hr-gradient-pink { border:0; height:3px; background:linear-gradient(90deg, var(--avtec-pink-400), var(--avtec-pink-600)); border-radius:2px; }
.hr-gradient-cyan { border:0; height:3px; background:linear-gradient(90deg, var(--avtec-cyan-300), var(--avtec-cyan-600)); border-radius:2px; }
.hr-gradient-fade { border:0; height:2px; background:linear-gradient(90deg, transparent, var(--avtec-cyan-400), transparent); }
.hr-dotted { border:0; border-top:3px dotted var(--avtec-cyan-300); }
.hr-dashed { border:0; border-top:3px dashed var(--avtec-pink-300); }
.hr-double { border:0; border-top:4px double var(--avtec-deep-300); }
.divider-icon { display:flex; align-items:center; gap:1rem; color:var(--fg-3); }
.divider-icon::before, .divider-icon::after { content:''; flex:1; height:1px; background:var(--border-color, #dee2e6); }
.divider-icon i { font-size:1.2rem; color:var(--avtec-cyan-500); }
.wave-container { position:relative; overflow:hidden; height:80px; }
.wave-container svg { position:absolute; bottom:0; width:100%; }


/* ============================================================================
   54. IMAGE HOVER EFFECTS
   Overlay fade, gradient overlay, scale, caption slide, brand overlay, team.
   ============================================================================ */

.hover-wrap { position:relative; overflow:hidden; border-radius:var(--radius-lg); display:block; }
.hover-wrap img { width:100%; display:block; transition:transform .45s cubic-bezier(.4,0,.2,1); }
.hover-fade .hover-overlay { position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .35s ease; display:flex; align-items:center; justify-content:center; }
.hover-fade:hover .hover-overlay { opacity:1; }
.hover-fade:hover img { transform:scale(1.03); }
.hover-gradient .hover-overlay { position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.7)); display:flex; align-items:flex-end; padding:1.5rem; }
.hover-gradient .hover-overlay .caption-text { transform:translateY(10px); opacity:0; transition:all .35s ease; }
.hover-gradient:hover .hover-overlay .caption-text { transform:translateY(0); opacity:1; }
.hover-scale:hover img { transform:scale(1.12); }
.hover-slide .hover-caption { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(0deg, rgba(0,0,0,.8), transparent); padding:1.5rem; transform:translateY(100%); transition:transform .4s cubic-bezier(.4,0,.2,1); }
.hover-slide:hover .hover-caption { transform:translateY(0); }
.hover-brand .hover-overlay { position:absolute; inset:0; background:linear-gradient(135deg, rgba(18,170,213,.85), rgba(232,62,140,.75)); opacity:0; transition:opacity .4s ease; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.hover-brand:hover .hover-overlay { opacity:1; }
.hover-brand:hover img { transform:scale(1.05); }
.hover-team .hover-overlay { position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, var(--avtec-deep-700)); display:flex; align-items:flex-end; padding:1.25rem; }
.hover-team .hover-overlay .team-info { transform:translateY(8px); opacity:0; transition:all .35s ease; }
.hover-team:hover .hover-overlay .team-info { transform:translateY(0); opacity:1; }
.hover-team:hover img { transform:scale(1.04); }
.team-socials a { color:rgba(255,255,255,.7); margin-right:.75rem; transition:color .2s; }
.team-socials a:hover { color:#fff; }


/* ============================================================================
   55. IMAGE MASKS
   Clip-path shapes, blob morph animation.
   ============================================================================ */

.mask-demo { overflow:hidden; border-radius:var(--radius-lg); }
.mask-diagonal { clip-path:polygon(0 0, 100% 0, 100% 85%, 0 100%); }
.mask-diagonal-reverse { clip-path:polygon(0 0, 100% 15%, 100% 100%, 0 100%); }
.mask-circle-custom { clip-path:circle(45% at 50% 50%); }
.mask-blob-custom { clip-path:path('M 0.5,0 C 0.7,0 1,0.2 1,0.5 C 1,0.8 0.7,1 0.5,1 C 0.3,1 0,0.8 0,0.5 C 0,0.2 0.3,0 0.5,0'); }
@keyframes morph-blob { 0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;} 50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%;} }
.mask-animated { animation:morph-blob 8s ease-in-out infinite; overflow:hidden; }


/* ============================================================================
   56. MODAL DARK
   Dark-mode modal overrides.
   ============================================================================ */

.modal-dark .modal-content { background:var(--surface-dark-1); border:1px solid var(--surface-dark-3); }
.modal-dark .modal-header { border-bottom-color:var(--surface-dark-3); }
.modal-dark .modal-footer { border-top-color:var(--surface-dark-3); }
.modal-dark .btn-close { filter:invert(1) grayscale(100%) brightness(200%); }


/* ============================================================================
   57. SHAPES & DIVIDER CARDS
   SVG divider demo cards, blob wrappers.
   ============================================================================ */

.shape-card { border:none !important; box-shadow:var(--shadow-sm); border-radius:var(--radius-lg) !important; overflow:hidden !important; }
.shape-card .card-body { padding:0 !important; overflow:hidden !important; }
/* Scoped to .shape-card so these don't clobber the hero .divider-top utility
   (which is absolutely positioned at the bottom of .video-wrapper, see section 21). */
.shape-card .divider-top { padding:2.5rem 2rem; text-align:center; }
.shape-card .divider-bottom { padding:2.5rem 2rem; text-align:center; }
.divider-svg { display:block; line-height:0; font-size:0; overflow:hidden; }
.divider-svg svg { display:block; width:100%; height:auto; vertical-align:bottom; }
.blob-wrap { display:flex; align-items:center; justify-content:center; min-height:180px; }


/* ============================================================================
   58. TYPOGRAPHY DEMOS
   Gradient inline text helper.
   ============================================================================ */

.grad-inline { -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; display:inline-block; }


/* ============================================================================
   59. COLOR & SWATCH DEMOS
   Color swatches, ramp cells, semantic toast demos.
   ============================================================================ */

.swatch { width:100%; aspect-ratio:1; border-radius:var(--radius-md); border:1px solid var(--border-1); }
.ramp-cell { height:24px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:10px; font-family:var(--font-mono); font-weight:600; }
.toast-demo { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:10px; border:1px solid; font-size:13px; line-height:1.45; }
.toast-demo .dot { width:8px; height:8px; border-radius:999px; flex:none; margin-top:6px; }
.toast-demo strong { display:block; font-weight:700; font-size:13px; margin-bottom:1px; }
.t-success { background:var(--success-100); border-color:rgba(20,184,166,0.25); color:var(--success-600); }
.t-warning { background:var(--warning-100); border-color:rgba(244,183,64,0.35); color:var(--warning-600); }
.t-danger { background:var(--danger-100); border-color:rgba(240,93,111,0.25); color:var(--danger-600); }
.t-info { background:var(--info-100); border-color:rgba(24,184,220,0.25); color:var(--info-600); }


/* ============================================================================
   60. FONT DEMOS
   Type samples, weight rows, scale tables.
   ============================================================================ */

.type-sample { margin-bottom:1.5rem; }
.type-meta { font-size:11px; color:var(--fg-3); font-family:var(--font-mono); margin-top:4px; }
.weight-row { display:flex; gap:2rem; flex-wrap:wrap; }
.weight-row > div { min-width:180px; }
.scale-table td, .scale-table th { padding:8px 12px; font-size:13px; vertical-align:middle; }
.scale-table th { font-weight:700; text-align:left; }


/* ============================================================================
   61. ICON DEMOS
   Icon wrapper shapes, pills, stamps, gradients, duotone, raw rows, feature grid.
   ============================================================================ */

.cell { display:grid; place-items:center; gap:8px; }
.cell .lbl { font-family:var(--font-mono); font-size:9px; color:var(--fg-3); letter-spacing:0.04em; }
.w-sq { width:48px; height:48px; border-radius:12px; display:grid; place-items:center; font-size:22px; }
.sq-amber { background:#FEF0D4; color:#B9801B; }
.sq-pink { background:#FCE0E8; color:#C4346E; }
.sq-mint { background:#DDF5EE; color:#0E8F82; }
.sq-peach { background:#FDE2D0; color:#B9511B; }
.sq-sky { background:#DDEEFB; color:#2060A0; }
.sq-lilac { background:#E7E1FA; color:#6D4FC9; }
.sq-cyan { background:#DDF4FA; color:#0E96B8; }
.sq-coral { background:#FCE3DD; color:#B1502F; }
.sq-gold { background:#FAF1D1; color:#8A6C12; }
.w-ci { width:44px; height:44px; border-radius:999px; display:grid; place-items:center; font-size:20px; }
.ci-cyan { background:rgba(24,184,220,0.12); color:var(--avtec-cyan-700); }
.ci-pink { background:rgba(236,62,134,0.12); color:var(--avtec-pink-600); }
.ci-deep { background:rgba(11,58,140,0.10); color:var(--avtec-deep-500); }
.ci-ink { background:rgba(10,20,48,0.06); color:var(--avtec-ink-800); }
.w-solid { width:46px; height:46px; border-radius:10px; display:grid; place-items:center; font-size:20px; background:var(--avtec-ink-900); color:var(--avtec-cyan-400); }
.w-solid.alt { background:var(--avtec-deep-700,#062052); color:#F46AA1; }
.w-grad { width:48px; height:48px; border-radius:12px; display:grid; place-items:center; font-size:22px; color:#fff; background-image:linear-gradient(135deg,#18B8DC 0%,#EC3E86 100%); box-shadow:0 6px 14px rgba(236,62,134,0.24); }
.w-grad.cool { background-image:linear-gradient(135deg,#18B8DC 0%,#0B3A8C 100%); box-shadow:0 6px 14px rgba(11,58,140,0.22); }
.w-grad.warm { background-image:linear-gradient(135deg,#F4B740 0%,#EC3E86 100%); box-shadow:0 6px 14px rgba(236,62,134,0.22); }
.w-ring { width:44px; height:44px; border-radius:999px; display:grid; place-items:center; font-size:18px; background:#fff; color:var(--avtec-ink-900); border:1.5px solid var(--border-2); }
.w-ring.cyan { border-color:var(--avtec-cyan-500); color:var(--avtec-cyan-700); }
.w-ring.pink { border-color:var(--avtec-pink-500); color:var(--avtec-pink-600); }
.w-duo { position:relative; width:48px; height:48px; }
.w-duo .back { position:absolute; inset:6px -6px -6px 6px; border-radius:12px; background:rgba(24,184,220,0.18); }
.w-duo .front { position:absolute; inset:-6px 6px 6px -6px; border-radius:12px; background:rgba(236,62,134,0.18); display:grid; place-items:center; color:var(--avtec-pink-600); font-size:20px; }
.w-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 8px; border-radius:999px; border:1px solid var(--border-1); background:#fff; font-size:13px; font-weight:600; color:var(--avtec-ink-900); }
.w-pill .dot { width:26px; height:26px; border-radius:999px; display:grid; place-items:center; font-size:14px; }
.w-stamp { width:56px; height:56px; border-radius:16px; background:var(--avtec-ink-900); color:#fff; display:grid; place-items:center; font-size:24px; position:relative; overflow:hidden; }
.w-stamp::after { content:''; position:absolute; inset:auto -12px -12px auto; width:40px; height:40px; border-radius:999px; background:radial-gradient(circle at 30% 30%,rgba(24,184,220,0.6),transparent 70%); }
.raw-row { display:flex; gap:20px; padding:6px 0; align-items:center; color:var(--avtec-ink-800); }
.raw-row i { font-size:22px; }
.raw-row i.accent-cy { color:var(--avtec-cyan-600); }
.raw-row i.accent-pk { color:var(--avtec-pink-600); }
.raw-row i.accent-dp { color:var(--avtec-deep-500); }
.raw-row i.accent-am { color:#B9801B; }
.raw-row i.accent-tl { color:#0E8F82; }
.raw-row i.size-16 { font-size:16px; }
.raw-row i.size-28 { font-size:28px; }
.raw-row i.size-36 { font-size:36px; }
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.feat { background:#fff; border:1px solid var(--border-1); border-radius:14px; padding:22px 18px; text-align:center; box-shadow:0 2px 6px rgba(10,20,48,0.04); transition:transform .26s cubic-bezier(.22,1,.36,1),box-shadow .26s; }
.feat:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(10,20,48,0.10); }
.feat .ic { margin:0 auto 12px; }
.feat h5 { font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--avtec-ink-900); margin:0 0 4px; }
.feat p { font-size:12px; color:var(--fg-2); margin:0; line-height:1.45; }


/* ============================================================================
   62. MISC DEMOS
   Spacing bars, radius demos, shadow demos, brand voice, logo cells.
   ============================================================================ */

.spacing-bar { background:var(--avtec-cyan-500); height:20px; border-radius:2px; }
.radius-demo { width:72px; height:72px; background:var(--surface-3); border:2px solid var(--avtec-cyan-500); }
.shadow-demo { background:#fff; border-radius:var(--radius-md); height:90px; display:flex; align-items:center; justify-content:center; font-size:.78rem; color:var(--fg-3); }
.voice-block { border:1px solid var(--border-1); border-radius:10px; padding:14px 16px; background:var(--surface-0); }
.voice-block .head { font-size:10px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; }
.voice-wrong .head { color:#C42F3D; }
.voice-right .head { color:#0E9F6E; }
.voice-wrong p { color:var(--fg-2); text-decoration:line-through; text-decoration-color:rgba(196,47,61,0.35); }
.logo-cell { display:flex; align-items:center; justify-content:center; padding:3rem; min-height:180px; position:relative; }
.logo-cell .tag { position:absolute; bottom:12px; left:16px; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; font-weight:700; color:var(--fg-3); }
.logo-cell.on-dark { background:var(--avtec-ink-900); }
.logo-cell.on-dark .tag { color:rgba(255,255,255,0.55); }


/* ============================================================================
   63. SERVICE CARDS
   App-style icon+text grid with tinted icon variants.
   ============================================================================ */

.svc-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.svc-card { display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--border-1); border-radius:14px; padding:16px; box-shadow:0 2px 6px rgba(10,20,48,0.04); transition:transform .26s cubic-bezier(.22,1,.36,1),box-shadow .26s,border-color .26s; cursor:pointer; }
.svc-card:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(10,20,48,0.10); border-color:var(--border-2); }
.svc-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px; }
.svc-icon.amber { background:#FEF0D4; color:#B9801B; }
.svc-icon.pink  { background:#FCE0E8; color:#C4346E; }
.svc-icon.mint  { background:#DDF5EE; color:#0E8F82; }
.svc-icon.peach { background:#FDE2D0; color:#B9511B; }
.svc-icon.sky   { background:#DDEEFB; color:#2060A0; }
.svc-icon.lilac { background:#E7E1FA; color:#6D4FC9; }
.svc-card h4 { font-family:var(--font-display); font-weight:700; font-size:15px !important; letter-spacing:-0.015em; color:var(--avtec-ink-900); margin:2px 0 2px; }
.svc-card h4 a { color:inherit; text-decoration:none; }
.svc-card h4 a:hover { color:inherit; }
.svc-card p  { font-size:13px; color:var(--fg-2); line-height:1.45; margin:0; }


/* ============================================================================
   64. GLASS STAGE & PILLS
   Dark stage with grid pattern, frosted glass pill cards.
   ============================================================================ */

.glass-stage { position:relative; padding:32px 28px 28px; background:radial-gradient(900px 500px at 20% 30%,#0F2D6B 0%,var(--avtec-ink-900) 60%),var(--avtec-ink-900); border-radius:18px; overflow:hidden; }
.glass-stage::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:24px 24px; mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 85%); }
.glass-col { position:relative; display:grid; gap:10px; z-index:1; }
.glass-row { display:flex; gap:10px; flex-wrap:wrap; }
.glass-card-pill { display:inline-flex; align-items:center; gap:10px; padding:10px 16px 10px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:#fff; font-family:var(--font-display); font-weight:700; font-size:13.5px; letter-spacing:-.01em; transition:transform .32s cubic-bezier(.22,1,.36,1),background .32s,border-color .32s,box-shadow .32s; cursor:pointer; }
.glass-card-pill:hover { transform:translateY(-3px); background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.22); box-shadow:0 10px 24px rgba(5,12,30,.5),0 0 0 1px rgba(24,184,220,.14) inset; }
.glass-ic { width:30px; height:30px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:14px; }
.glass-ic.cy { background:rgba(24,184,220,.14); color:#38CCEC; }
.glass-ic.pk { background:rgba(236,62,134,.18); color:#F46AA1; }
.glass-ic.mt { background:rgba(20,184,166,.16); color:#34D6C4; }
.glass-ic.am { background:rgba(244,183,64,.18); color:#FCCD66; }
.glass-ic.ll { background:rgba(139,111,230,.22); color:#B9A5FF; }
.glass-ic.rs { background:rgba(240,93,111,.18); color:#FC8D9B; }
.glass-offset-1 { margin-left:18px; }
.glass-offset-2 { margin-left:44px; }
.glass-offset-3 { margin-left:8px; }


/* ============================================================================
   65. SPOTLIGHT CARDS
   Mouse-follow gradient spotlight with glow variants, image, horizontal.
   ============================================================================ */

.expert-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.spot-card { position:relative; padding:22px 22px 60px; border-radius:16px; background:#fff; border:1px solid var(--border-1); overflow:hidden; transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s; isolation:isolate; cursor:pointer; }
.spot-card::before { content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; background:radial-gradient(250px circle at var(--mx,50%) var(--my,50%),rgba(24,184,220,.18),transparent 55%); opacity:0; transition:opacity .32s; }
.spot-card::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; padding:1.5px; background:linear-gradient(135deg,var(--avtec-cyan-500) 0%,var(--avtec-pink-500) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .32s; }
.spot-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(10,20,48,.12); }
.spot-card:hover::before,.spot-card:hover::after { opacity:1; }
.spot-card .kicker { font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--avtec-cyan-600); }
.spot-card h4 { font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:-.03em; color:var(--avtec-ink-900); margin:10px 0 6px; line-height:1.1; }
.spot-card p { font-size:13.5px; color:var(--fg-2); line-height:1.5; margin:0; }
.spot-card .arrow { position:absolute; right:18px; bottom:18px; width:28px; height:28px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:12px; line-height:1; background:var(--avtec-ink-900); color:#fff; transition:transform .32s,background .32s; }
.spot-card:hover .arrow { transform:translateX(4px); background-image:linear-gradient(120deg,var(--avtec-cyan-600),var(--avtec-pink-600)); }
.spot-card.dark { background:var(--avtec-ink-900); border-color:rgba(255,255,255,.08); color:#fff; }
.spot-card.dark h4 { color:#fff !important; }
.spot-card.dark p  { color:rgba(255,255,255,.68) !important; }
.spot-card.dark .kicker { color:#38CCEC; }
.spot-card.dark .arrow { background:#fff; color:var(--avtec-ink-900); }
.spot-card.dark::before { background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(236,62,134,.22),transparent 55%); }
.spot-card .kpi { font-family:var(--font-display); font-weight:800; font-size:48px; line-height:1; letter-spacing:-.04em; margin-top:6px; }
.spot-card.dark .kpi { background-image:linear-gradient(110deg,#38CCEC 0%,#F46AA1 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.spot-card.glow-pink::before { background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(196,52,110,.22),transparent 55%); }
.spot-card.glow-pink::after  { background:linear-gradient(135deg,var(--avtec-pink-500) 0%,#C44AE0 100%); }
.spot-card.glow-pink .kicker  { color:var(--avtec-pink-600); }
.spot-card.glow-deep::before { background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(11,58,140,.20),transparent 55%); }
.spot-card.glow-deep::after  { background:linear-gradient(135deg,var(--avtec-deep-500) 0%,var(--avtec-cyan-500) 100%); }
.spot-card.glow-deep .kicker  { color:var(--avtec-deep-500); }
.spot-card.glow-aurora::before { background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(138,43,226,.18),transparent 55%); }
.spot-card.glow-aurora::after  { background:conic-gradient(from 180deg,var(--avtec-cyan-500),var(--avtec-pink-500),#C44AE0,var(--avtec-cyan-500)); }
.spot-card.glow-aurora .kicker { color:#8A2BE2; }
.spot-card .spot-img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:10px; margin-bottom:14px; }
.spot-card.horizontal { display:grid; grid-template-columns:140px 1fr; gap:18px; align-items:center; padding:22px 60px 22px 22px; }
.spot-card.horizontal .spot-thumb { width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; }
.spot-card.horizontal .arrow { right:18px; top:50%; transform:translateY(-50%); bottom:auto; }
.spot-card.horizontal:hover .arrow { transform:translateY(-50%) translateX(4px); }
.spot-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }


/* ============================================================================
   66. BLOCK — ABOUT
   Intro grid, values grid, team grid, timeline, stats strip, dark intro.
   ============================================================================ */

.about-intro { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.about-intro img { width:100%; border-radius:16px; object-fit:cover; aspect-ratio:4/3; }
.about-intro h2 { font-family:var(--font-display); font-weight:800; font-size:32px; letter-spacing:-.03em; color:var(--avtec-ink-900); margin:0 0 16px; }
.about-intro p { font-size:15px; color:var(--fg-2); line-height:1.65; margin:0 0 12px; }
.about-intro .stat-row { display:flex; gap:28px; margin-top:20px; }
.about-intro .stat-item .num { font-family:var(--font-display); font-weight:800; font-size:28px; letter-spacing:-.02em; color:var(--avtec-ink-900); }
.about-intro .stat-item .lbl { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); }
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.value-card { padding:28px; border-radius:14px; background:var(--surface-2); border:1px solid var(--border-1); }
.value-card .icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:14px; }
.value-card h4 { font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:-.015em; color:var(--avtec-ink-900); margin:0 0 6px; }
.value-card p { font-size:13.5px; color:var(--fg-2); line-height:1.5; margin:0; }
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.team-card { text-align:center; }
.team-card img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:14px; margin-bottom:12px; }
.team-card h4 { font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--avtec-ink-900); margin:0 0 2px; }
.team-card .role { font-size:13px; color:var(--fg-3); }
.timeline { position:relative; padding-left:40px; }
.timeline::before { content:''; position:absolute; left:15px; top:0; bottom:0; width:2px; background:var(--border-1); }
.timeline-item { position:relative; padding-bottom:32px; }
.timeline-item:last-child { padding-bottom:0; }
.timeline-item::before { content:''; position:absolute; left:-29px; top:4px; width:12px; height:12px; border-radius:999px; background:var(--avtec-cyan-500); border:3px solid #fff; box-shadow:0 0 0 2px var(--avtec-cyan-500); }
.timeline-item .year { font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--avtec-cyan-600); margin-bottom:4px; }
.timeline-item h4 { font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--avtec-ink-900); margin:0 0 4px; }
.timeline-item p { font-size:13.5px; color:var(--fg-2); line-height:1.5; margin:0; }
.stats-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stats-strip .stat { padding:24px; }
.stats-strip .stat .number { font-family:var(--font-display); font-weight:800; font-size:42px; letter-spacing:-.03em; color:var(--avtec-cyan-500); }
.stats-strip .stat .label { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-3); margin-top:4px; }
.dark-intro { border-radius:var(--radius-lg); overflow:hidden; background:radial-gradient(900px 500px at 30% 30%,#0F2D6B 0%,var(--avtec-ink-900) 60%); padding:48px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.dark-intro img { width:100%; border-radius:14px; aspect-ratio:4/3; object-fit:cover; }


/* ============================================================================
   67. BLOCK — BLOG
   Blog grids, featured post, sidebar, list items, masonry, dark variant.
   ============================================================================ */

.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card { border-radius:14px; overflow:hidden; border:1px solid var(--border-1); background:var(--surface-1); }
.blog-card img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.blog-card .body { padding:20px; }
.blog-card .meta { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.blog-card .tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:3px 10px; border-radius:6px; background:var(--avtec-cyan-50); color:var(--avtec-cyan-700); }
.blog-card .date { font-size:12px; color:var(--fg-3); }
.blog-card h4 { font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.015em; color:var(--avtec-ink-900); margin:0 0 6px; line-height:1.35; }
.blog-card p { font-size:13.5px; color:var(--fg-2); line-height:1.5; margin:0; }
.featured-post { display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; }
.featured-post img { width:100%; border-radius:16px; aspect-ratio:16/10; object-fit:cover; }
.featured-post .tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:3px 10px; border-radius:6px; display:inline-block; margin-bottom:12px; background:var(--avtec-pink-50); color:var(--avtec-pink-600); }
.featured-post h3 { font-family:var(--font-display); font-weight:800; font-size:26px; letter-spacing:-.03em; color:var(--avtec-ink-900); margin:0 0 10px; line-height:1.25; }
.featured-post p { font-size:15px; color:var(--fg-2); line-height:1.65; margin:0 0 16px; }
.featured-post .author { display:flex; align-items:center; gap:10px; }
.featured-post .author img { width:36px; height:36px; border-radius:999px; aspect-ratio:1; }
.featured-post .author .name { font-size:13px; font-weight:600; color:var(--avtec-ink-900); }
.featured-post .author .date { font-size:12px; color:var(--fg-3); }
.blog-sidebar-layout { display:grid; grid-template-columns:2fr 1fr; gap:32px; }
.blog-sidebar .widget { padding:20px; border-radius:12px; border:1px solid var(--border-1); background:var(--surface-1); margin-bottom:16px; }
.blog-sidebar .widget h5 { font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--avtec-ink-900); margin:0 0 12px; }
.blog-sidebar .widget li { font-size:13.5px; color:var(--fg-2); padding:4px 0; }
.blog-list-item { display:grid; grid-template-columns:180px 1fr; gap:20px; align-items:center; padding:16px 0; border-bottom:1px solid var(--border-1); }
.blog-list-item:last-child { border-bottom:0; }
.blog-list-item img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:10px; }
.blog-list-item h4 { font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--avtec-ink-900); margin:0 0 4px; }
.blog-list-item p { font-size:13px; color:var(--fg-2); line-height:1.5; margin:0 0 6px; }
.blog-list-item .date { font-size:12px; color:var(--fg-3); }
.masonry-grid { columns:3; column-gap:20px; }
.masonry-grid .m-card { break-inside:avoid; margin-bottom:20px; border-radius:12px; overflow:hidden; border:1px solid var(--border-1); background:var(--surface-1); }
.masonry-grid .m-card img { width:100%; display:block; }
.masonry-grid .m-card .body { padding:16px; }
.masonry-grid .m-card h4 { font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--avtec-ink-900); margin:0 0 4px; }
.masonry-grid .m-card p { font-size:13px; color:var(--fg-2); line-height:1.45; margin:0; }
.dark-blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.dark-blog-card { border-radius:14px; overflow:hidden; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.dark-blog-card img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.dark-blog-card .body { padding:20px; }
.dark-blog-card .tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:3px 10px; border-radius:6px; display:inline-block; margin-bottom:10px; background:rgba(18,170,213,.15); color:var(--avtec-cyan-400); }
.dark-blog-card h4 { font-family:var(--font-display); font-weight:700; font-size:16px; color:#fff !important; margin:0 0 6px; line-height:1.35; }
.dark-blog-card p { font-size:13px; color:rgba(255,255,255,.6) !important; line-height:1.5; margin:0; }


/* ============================================================================
   68. BLOCK — CLIENTS
   Logo strips, logo grids, marquee, partner cards, client stats, dark logos.
   ============================================================================ */

.logo-strip { display:flex; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap; padding:24px 0; }
.logo-strip img { height:40px; width:auto; filter:grayscale(1); opacity:.5; transition:all .3s ease; }
.logo-strip img:hover { filter:grayscale(0); opacity:1; }
.logo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.logo-grid-item { display:flex; align-items:center; justify-content:center; padding:28px 20px; border-radius:12px; border:1px solid var(--border-1); background:var(--surface-1); min-height:100px; }
.logo-grid-item img { max-height:44px; width:auto; }
.marquee-wrap { overflow:hidden; position:relative; padding:20px 0; }
.marquee-wrap::before, .marquee-wrap::after { content:''; position:absolute; top:0; bottom:0; width:80px; z-index:1; pointer-events:none; }
.marquee-wrap::before { left:0; background:linear-gradient(90deg,var(--surface-1),transparent); }
.marquee-wrap::after { right:0; background:linear-gradient(270deg,var(--surface-1),transparent); }
.marquee-track { display:flex; align-items:center; gap:48px; animation:marqueeScroll 30s linear infinite; width:max-content; }
.marquee-track img { height:36px; width:auto; filter:grayscale(1); opacity:.5; }
@keyframes marqueeScroll { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
.partner-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.partner-card { padding:28px; border-radius:14px; border:1px solid var(--border-1); background:var(--surface-1); }
.partner-card img { height:36px; width:auto; margin-bottom:14px; }
.partner-card h4 { font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--avtec-ink-900); margin:0 0 6px; }
.partner-card p { font-size:13.5px; color:var(--fg-2); line-height:1.5; margin:0; }
.client-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.client-stat { padding:28px 16px; border-radius:14px; border:1px solid var(--border-1); background:var(--surface-1); }
.client-stat .number { font-family:var(--font-display); font-weight:800; font-size:36px; letter-spacing:-.03em; color:var(--avtec-cyan-500); }
.client-stat .label { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-3); margin-top:4px; }
.dark-logo-strip { display:flex; align-items:center; justify-content:center; gap:48px; flex-wrap:wrap; padding:32px; }
.dark-logo-strip img { height:40px; width:auto; filter:brightness(0) invert(1); opacity:.4; transition:opacity .3s ease; }
.dark-logo-strip img:hover { opacity:.8; }


/* ============================================================================
   69. BLOCK — CONTACT
   Map/form split, contact cards, offices, CTA combos, dark contact.
   ============================================================================ */

.map-form-split { display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:14px; overflow:hidden; border:1px solid var(--border-1); }
.map-form-split .map-side { background:var(--surface-2); display:flex; align-items:center; justify-content:center; min-height:400px; position:relative; }
.map-form-split .map-side img { width:100%; height:100%; object-fit:cover; }
.map-form-split .form-side { padding:36px; background:var(--surface-1); }
.map-form-split .form-side h3 { font-family:var(--font-display); font-weight:800; font-size:24px; letter-spacing:-.03em; color:var(--avtec-ink-900); margin:0 0 6px; }
.map-form-split .form-side p { font-size:14px; color:var(--fg-2); margin:0 0 20px; }
.contact-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.contact-card { padding:28px; border-radius:14px; border:1px solid var(--border-1); background:var(--surface-1); text-align:center; }
.contact-card .icon { width:52px; height:52px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px; }
.contact-card h4 { font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--avtec-ink-900); margin:0 0 6px; }
.contact-card p { font-size:14px; color:var(--fg-2); line-height:1.5; margin:0; }
.contact-card a { color:var(--avtec-cyan-600); text-decoration:none; font-weight:600; }
.full-form { max-width:640px; margin:0 auto; }
.full-form h3 { font-family:var(--font-display); font-weight:800; font-size:26px; letter-spacing:-.03em; color:var(--avtec-ink-900); margin:0 0 6px; text-align:center; }
.full-form p { font-size:15px; color:var(--fg-2); text-align:center; margin:0 0 28px; }
.office-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.office-card { border-radius:14px; overflow:hidden; border:1px solid var(--border-1); background:var(--surface-1); }
.office-card img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.office-card .body { padding:20px; }
.office-card h4 { font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--avtec-ink-900); margin:0 0 4px; }
.office-card .addr { font-size:13.5px; color:var(--fg-2); line-height:1.5; margin:0 0 8px; }
.office-card .hours { font-size:12px; font-weight:600; color:var(--fg-3); text-transform:uppercase; letter-spacing:.04em; }
.cta-form-combo { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.cta-form-combo .cta-text h3 { font-family:var(--font-display); font-weight:800; font-size:28px; letter-spacing:-.03em; color:var(--avtec-ink-900); margin:0 0 12px; }
.cta-form-combo .cta-text p { font-size:15px; color:var(--fg-2); line-height:1.65; margin:0 0 16px; }
.cta-form-combo .cta-text .info-item { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.cta-form-combo .cta-text .info-item i { font-size:18px; color:var(--avtec-cyan-500); }
.cta-form-combo .cta-text .info-item span { font-size:14px; color:var(--fg-2); }
.dark-contact { border-radius:var(--radius-lg); overflow:hidden; background:radial-gradient(900px 500px at 30% 30%,#0F2D6B 0%,var(--avtec-ink-900) 60%); padding:48px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.dark-contact h3 { font-family:var(--font-display); font-weight:800; font-size:26px; color:#fff !important; margin:0 0 10px; }
.dark-contact p { font-size:15px; color:rgba(255,255,255,.65) !important; line-height:1.65; margin:0 0 20px; }
.dark-contact .info-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.dark-contact .info-row i { font-size:18px; color:var(--avtec-cyan-400); }
.dark-contact .info-row span { font-size:14px; color:rgba(255,255,255,.7) !important; }
.dark-contact .form-control { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); color:#fff; }
.dark-contact .form-control::placeholder { color:rgba(255,255,255,.35); }
.dark-contact .form-label { color:rgba(255,255,255,.6) !important; font-size:13px; font-weight:600; }


/* ============================================================================
   70. BLOCK — FACTS & COUNTERS
   Counter rows, KPI grids, icon stats, large numbers, comparison, dark stats.
   ============================================================================ */

.counter-row { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.counter-row .counter { padding:28px 16px; }
.counter-row .counter .number { font-family:var(--font-display); font-weight:800; font-size:48px; letter-spacing:-.03em; color:var(--avtec-cyan-500); line-height:1; }
.counter-row .counter .label { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-3); margin-top:8px; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.kpi-card { padding:28px; border-radius:14px; border:1px solid var(--border-1); background:var(--surface-1); text-align:center; }
.kpi-card .kpi-number { font-family:var(--font-display); font-weight:800; font-size:36px; letter-spacing:-.03em; line-height:1; margin-bottom:4px; }
.kpi-card .kpi-label { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-3); }
.kpi-card .kpi-desc { font-size:12.5px; color:var(--fg-2); margin-top:8px; line-height:1.4; }
.icon-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.icon-stat { display:flex; align-items:flex-start; gap:16px; padding:24px; border-radius:14px; border:1px solid var(--border-1); background:var(--surface-1); }
.icon-stat .stat-icon { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.icon-stat .number { font-family:var(--font-display); font-weight:800; font-size:28px; letter-spacing:-.02em; color:var(--avtec-ink-900); line-height:1; }
.icon-stat .label { font-size:13px; font-weight:600; color:var(--fg-3); margin-top:4px; }
.large-numbers { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; text-align:center; padding:40px 0; }
.large-numbers .item .big { font-family:var(--font-display); font-weight:900; font-size:72px; letter-spacing:-.04em; line-height:1; background:var(--gradient-authority); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.large-numbers .item .desc { font-size:15px; font-weight:600; color:var(--fg-2); margin-top:8px; }
.comparison-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.compare-card { padding:32px; border-radius:14px; text-align:center; }
.compare-card.before { border:1px solid var(--border-1); background:var(--surface-2); }
.compare-card.after { border:2px solid var(--avtec-cyan-300); background:var(--avtec-cyan-50); }
.compare-card .tag { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:3px 12px; border-radius:6px; display:inline-block; margin-bottom:16px; }
.compare-card.before .tag { background:var(--surface-3); color:var(--fg-3); }
.compare-card.after .tag { background:var(--avtec-cyan-100); color:var(--avtec-cyan-700); }
.compare-card .stats { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:12px; }
.compare-card .stat-item .num { font-family:var(--font-display); font-weight:800; font-size:28px; letter-spacing:-.02em; line-height:1; }
.compare-card.before .stat-item .num { color:var(--fg-3); }
.compare-card.after .stat-item .num { color:var(--avtec-cyan-600); }
.compare-card .stat-item .lbl { font-size:12px; font-weight:600; color:var(--fg-3); margin-top:4px; }
.dark-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:center; }
.dark-stats .stat .number { font-family:var(--font-display); font-weight:800; font-size:48px; letter-spacing:-.03em; color:var(--avtec-cyan-400); line-height:1; }
.dark-stats .stat .label { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.5) !important; margin-top:8px; }
.dark-stats .stat .desc { font-size:13px; color:rgba(255,255,255,.4) !important; margin-top:4px; }


/* ============================================================================
   71. BLOCK — FAQ
   Two-column layout, tabbed FAQ, search, FAQ cards, dark accordion override.
   ============================================================================ */

.faq-two-col { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.faq-tabs .nav-link { font-family:var(--font-display); font-weight:600; font-size:14px; padding:8px 18px; border-radius:8px; color:var(--fg-2); border:1px solid transparent; }
.faq-tabs .nav-link.active { background:var(--avtec-cyan-50); color:var(--avtec-cyan-700); border-color:var(--avtec-cyan-200); }
.faq-search { max-width:480px; margin:0 auto 28px; position:relative; }
.faq-search input { padding-left:44px; border-radius:12px; border:1px solid var(--border-1); font-size:15px; height:48px; }
.faq-search i { position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:18px; color:var(--fg-3); }
.faq-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.faq-card { padding:24px; border-radius:14px; border:1px solid var(--border-1); background:var(--surface-1); }
.faq-card .icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:12px; }
.faq-card h4 { font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--avtec-ink-900); margin:0 0 6px; }
.faq-card p { font-size:13.5px; color:var(--fg-2); line-height:1.5; margin:0; }


/* ============================================================================
   72. BLOCK — FEATURES & CTA
   Product suite, process strip, CTA bands, stat rows, inline CTA.
   ============================================================================ */

.prod-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.prod-card { border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:24px; background:rgba(255,255,255,.02); transition:border-color .3s,background .3s; }
.prod-card:hover { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.05); }
.prod-card .kicker { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#38CCEC; }
.prod-card h4 { font-family:var(--font-display); font-size:22px !important; font-weight:800; letter-spacing:-.02em; color:#fff; margin:8px 0 6px; }
.prod-card p  { font-size:13px; color:rgba(255,255,255,.7); margin:0 0 14px; line-height:1.5; }
.prod-card .link { font-size:13px; font-weight:700; color:#38CCEC; text-decoration:none; }
.prod-card .link:hover { text-decoration:underline; }

.process-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:step; }
.process-step { position:relative; padding-top:40px; }
.process-step::before { counter-increment:step; content:counter(step); position:absolute; top:0; left:0; width:32px; height:32px; border-radius:999px; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:14px; letter-spacing:-.02em; }
.process-step.on-light::before { background:var(--avtec-ink-900); color:#fff; }
.process-step.on-dark::before  { background:#38CCEC; color:var(--avtec-ink-900); }
.process-step h4 { font-family:var(--font-display); font-weight:700; font-size:16px !important; letter-spacing:-.02em; margin:0 0 6px; }
.process-step p  { font-size:13px; line-height:1.5; margin:0; }
.process-step.on-light h4 { color:var(--avtec-ink-900); }
.process-step.on-light p  { color:var(--fg-2); }
.process-step.on-dark h4  { color:#fff; }
.process-step.on-dark p   { color:rgba(255,255,255,.7); }
.process-line { position:relative; }
.process-line::after { content:''; position:absolute; top:16px; left:32px; right:0; height:1px; }
.process-line.on-light::after { background:var(--border-1); }
.process-line.on-dark::after  { background:rgba(255,255,255,.1); }

.cta-band { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; border-radius:20px; padding:48px; align-items:center; }
.cta-band--light { background:var(--surface-2); border:1px solid var(--border-1); }
.cta-band--dark  { background:var(--avtec-ink-900); }
.cta-band h3 { font-family:var(--font-display); font-size:32px; font-weight:800; letter-spacing:-.03em; line-height:1.05; margin:0 0 12px; }
.cta-band--light h3 { color:var(--avtec-ink-900); }
.cta-band--dark h3  { color:#fff; }
.cta-band p  { font-size:15px; margin:0 0 20px; }
.cta-band--light p { color:var(--fg-2); }
.cta-band--dark p  { color:rgba(255,255,255,.72); }
.cta-spec { display:grid; gap:10px; }
.cta-spec-item { display:flex; gap:10px; align-items:center; font-size:14px; }
.cta-spec-item i { flex-shrink:0; }
.cta-band--light .cta-spec-item { color:var(--fg-1); }
.cta-band--light .cta-spec-item i { color:var(--avtec-cyan-600); }
.cta-band--dark .cta-spec .cta-spec-item,
.cta-band--dark .cta-spec .cta-spec-item span { color:#fff; }
.cta-band--dark .cta-spec .cta-spec-item i { color:#fff; }

.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.stat-card { text-align:center; padding:24px 16px; border-radius:14px; }
.stat-card.on-light { background:var(--surface-2); border:1px solid var(--border-1); }
.stat-card.on-dark  { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.stat-card .num { font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; line-height:1; }
.stat-card.on-light .num { font-size:36px; color:var(--avtec-ink-900); }
.stat-card.on-dark .num  { font-size:36px; }
.stat-card.on-dark .num .accent { color:#38CCEC; }
.stat-card .lbl { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-top:6px; }
.stat-card.on-light .lbl { color:var(--fg-3); }
.stat-card.on-dark .lbl  { color:rgba(255,255,255,.5); }

.cta-inline { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 32px; border-radius:14px; }
.cta-inline.on-brand { background:var(--gradient-signature); }
.cta-inline.on-brand p  { color:#fff; font-size:16px; font-weight:600; margin:0; }


/* ============================================================================
   73. BLOCK — FOOTER & NAVBAR DEMOS
   Wrapper styles for footer and navbar demo containers.
   ============================================================================ */

.footer-demo { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-1); }
.footer-demo footer { position:relative; }
.footer-demo a { text-decoration:none; }
.footer-demo .footer-logo { height:36px; width:auto; }
.footer-demo .social-icon { width:36px; height:36px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:16px; transition:background .2s; }
.footer-demo ul { list-style:none; padding:0; margin:0; }
.footer-demo ul li { margin-bottom:6px; }

.navbar-demo { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-1); }
.navbar-demo nav { position:relative; }
.navbar-demo a { text-decoration:none; }
.navbar-demo .nav-logo { height:32px; width:auto; }
.navbar-demo .nav-link-item { font-size:14px; font-weight:600; padding:8px 16px; transition:color .2s; }


/* ============================================================================
   74. BLOCK — HERO FRAMES
   Hero demo wrappers, labels, hyperfield helpers.
   ============================================================================ */

.hero-frame { border-radius:16px; overflow:hidden; border:1px solid var(--border-1); box-shadow:0 30px 80px -20px rgba(10,20,48,.18); }
.hero-label { display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 8px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border-1); font-size:12px; font-weight:700; font-family:var(--font-mono); letter-spacing:.06em; color:var(--fg-3); margin-bottom:20px; }
.hero-label .dot { width:8px; height:8px; border-radius:999px; }
.hero-desc { font-size:15px; line-height:1.6; color:var(--fg-2); max-width:64ch; margin:0 0 28px; }
.hyper-wrap { min-height:420px; display:flex; align-items:center; justify-content:center; text-align:center; padding:3rem; }
.hyper-label { display:inline-block; padding:4px 10px; border-radius:6px; font-size:12px; font-family:var(--font-mono); font-weight:600; letter-spacing:.04em; margin-bottom:10px; }
.hyper-label-light { background:rgba(255,255,255,.15); color:#fff; }
.hyper-label-dark  { background:rgba(10,20,48,.08); color:var(--avtec-ink-700); }
.heroB__left h1, .heroB__left h2, .heroB__left h3, .heroB__left h4,
.heroE__left h1, .heroE__left h2, .heroE__left h3, .heroE__left h4,
.tile.t1 .name, .tile.t4 .name { color:#fff !important; }
.heroE__left h1 .under { color:#fff !important; }


/* ============================================================================
   75. BLOCK — PORTFOLIO
   Portfolio cards, overlay cards, filter buttons.
   ============================================================================ */

.portfolio-demo { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-1); }
.portfolio-demo a { text-decoration:none; }
.portfolio-card { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-1); background:#fff; transition:box-shadow .25s, transform .25s; }
.portfolio-card:hover { box-shadow:0 8px 32px rgba(0,0,0,.08); transform:translateY(-4px); }
.portfolio-card img { width:100%; height:200px; object-fit:cover; }
.portfolio-badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; }
.overlay-card { position:relative; border-radius:var(--radius-lg); overflow:hidden; }
.overlay-card img { width:100%; height:260px; object-fit:cover; display:block; }
.overlay-card .overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(10,20,48,.85) 0%, transparent 60%); display:flex; flex-direction:column; justify-content:flex-end; padding:24px; }
.filter-btn { padding:6px 18px; border-radius:999px; border:1px solid var(--border-1); background:#fff; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; }
.filter-btn.active, .filter-btn:hover { background:var(--avtec-cyan-500); color:#fff !important; border-color:var(--avtec-cyan-500); }


/* ============================================================================
   76. BLOCK — PRICING
   Pricing cards, toggle, comparison table.
   ============================================================================ */

.pricing-demo { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-1); }
.pricing-card { border-radius:var(--radius-lg); border:1px solid var(--border-1); padding:32px; background:#fff; text-align:center; }
.pricing-card.featured { border-color:var(--avtec-cyan-500); box-shadow:0 0 0 1px var(--avtec-cyan-500); position:relative; }
.pricing-card .price { font-family:var(--font-display); font-size:36px; font-weight:800; color:var(--avtec-ink-900); }
.pricing-card .price span { font-size:15px; font-weight:500; color:var(--fg-3); }
.pricing-card ul { list-style:none; padding:0; margin:16px 0 24px; text-align:left; }
.pricing-card ul li { padding:8px 0; font-size:14px; color:var(--fg-2); border-bottom:1px solid var(--border-1); display:flex; align-items:center; gap:8px; }
.pricing-card ul li i { color:var(--avtec-cyan-600); font-size:14px; }
.toggle-wrap { display:inline-flex; align-items:center; gap:12px; padding:6px; background:var(--surface-2); border-radius:999px; }
.toggle-btn { padding:6px 20px; border-radius:999px; border:none; font-size:13px; font-weight:600; cursor:pointer; background:transparent; color:var(--fg-2); }
.toggle-btn.active { background:#fff; color:var(--avtec-ink-900); box-shadow:0 1px 4px rgba(0,0,0,.1); }
.compare-table { width:100%; border-collapse:collapse; font-size:14px; }
.compare-table th, .compare-table td { padding:12px 16px; border-bottom:1px solid var(--border-1); text-align:center; }
.compare-table th:first-child, .compare-table td:first-child { text-align:left; font-weight:600; color:var(--avtec-ink-700); }
.compare-table thead th { font-size:13px; font-weight:700; color:var(--avtec-ink-900); background:var(--surface-2); }


/* ============================================================================
   77. BLOCK — PROCESS
   Step cards, timeline, numbered dots.
   ============================================================================ */

.process-demo { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-1); }
.step-card { text-align:center; padding:24px 16px; }
.step-icon { width:56px; height:56px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:16px; }
.step-num { width:36px; height:36px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; }
.timeline-line { position:relative; padding-left:40px; }
.timeline-line::before { content:''; position:absolute; left:15px; top:0; bottom:0; width:2px; background:var(--border-1); }
.timeline-dot { width:32px; height:32px; border-radius:999px; position:absolute; left:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff !important; }


/* ============================================================================
   78. BLOCK — TESTIMONIALS
   Quote icons, testimonial cards, star rows, carousel dots, video placeholder.
   ============================================================================ */

.testimonial-card { border-radius:14px; padding:28px; border:1px solid var(--border-1); background:#fff; }
.testimonial-card .avatar { width:48px; height:48px; border-radius:999px; object-fit:cover; }
.star-row { color:#F4B740; font-size:14px; letter-spacing:2px; margin-bottom:12px; }
.carousel-dots { display:flex; gap:8px; justify-content:center; margin-top:24px; }
.carousel-dots .dot { width:10px; height:10px; border-radius:999px; background:var(--border-1); }
.carousel-dots .dot.active { background:var(--avtec-pink-500); width:28px; }
.video-placeholder { position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16/9; background:#000; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.video-placeholder img { width:100%; height:100%; object-fit:cover; opacity:.6; }
.video-placeholder .play-btn { position:absolute; width:64px; height:64px; border-radius:999px; background:rgba(255,255,255,.95); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(0,0,0,.2); }


/* ============================================================================
   79. RESPONSIVE OVERRIDES — ALL COMPONENTS
   Mobile breakpoints for grids, splits, and multi-column layouts.
   ============================================================================ */

@media(max-width:991.98px) {
  .about-intro, .dark-intro { grid-template-columns:1fr; }
  .values-grid, .team-grid { grid-template-columns:1fr; }
  .stats-strip { grid-template-columns:1fr 1fr; }
  .blog-grid, .dark-blog-grid { grid-template-columns:1fr; }
  .featured-post, .blog-sidebar-layout { grid-template-columns:1fr; }
  .masonry-grid { columns:1; }
  .blog-list-item { grid-template-columns:1fr; }
  .logo-grid, .partner-grid { grid-template-columns:1fr 1fr; }
  .client-stats { grid-template-columns:1fr 1fr; }
  .map-form-split, .contact-cards, .office-grid, .cta-form-combo, .dark-contact { grid-template-columns:1fr; }
  .counter-row, .kpi-grid, .icon-stats, .dark-stats { grid-template-columns:1fr 1fr; }
  .large-numbers { grid-template-columns:1fr; }
  .large-numbers .item .big { font-size:52px; }
  .comparison-grid { grid-template-columns:1fr; }
  .faq-two-col, .faq-cards { grid-template-columns:1fr; }
}

@media(max-width:767.98px) {
  .svc-grid, .expert-row, .prod-grid { grid-template-columns:1fr; }
  .spot-grid-3 { grid-template-columns:1fr; }
  .process-strip { grid-template-columns:1fr 1fr; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .cta-band { grid-template-columns:1fr; }
}