/* === styles.css === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

/* Grid Pattern */
.grid-pattern {
    background-image: 
        linear-gradient(rgba(6, 182, 212, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 182, 212, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 18s linear infinite;
}

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

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulseSlow {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 1s ease-out;
}

.animate-pulse-slow {
    animation: pulseSlow 4s ease-in-out infinite;
}

.animate-slide-in-left {
    animation: slideInLeft 0.6s ease-out;
}

.animate-slide-in-right {
    animation: slideInRight 0.6s ease-out;
}

.animate-slide-in-up {
    animation: slideInUp 0.6s ease-out;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #334155;
}

/* ============================================
   PROFESSIONAL CARD HOVER SYSTEM
   ============================================ */

/* Base card styles - ALL card types */
.service-card,
.impact-card,
.deliverable-card,
.package-card,
.process-card,
.training-card,
.portfolio-card,
.team-card,
.pentesting-item,
.programming-item,
.training-service-item {
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow, border-color;
    overflow: hidden;
}

/* Main theme cards - Professional hover (keine Text-Color-Änderungen) */
.service-card,
.package-card,
.portfolio-card,
.training-card {
    transform: translateY(0);
}

.service-card:hover,
.package-card:hover,
.portfolio-card:hover,
.training-card:hover {
    transform: translateY(-6px);
    z-index: 10;
}

/* Sub-theme items - Subtle hover */
.pentesting-item,
.programming-item,
.training-service-item,
.impact-card,
.deliverable-card,
.process-card {
    transform: translateY(0);
}

.pentesting-item:hover,
.programming-item:hover,
.training-service-item:hover,
.impact-card:hover,
.deliverable-card:hover,
.process-card:hover {
    transform: translateY(-3px);
    z-index: 5;
}

/* Accordion */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-content.active {
    max-height: 500px;
    transition: max-height 0.5s ease-in;
}


/* Home teaser RTL helpers */
@media (min-width: 768px){
  [dir="rtl"] .home-row{ flex-direction: row-reverse; }
}
[dir="rtl"] .home-bullet{ flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .home-step .flex{ flex-direction: row-reverse; }

/* RTL Support */
[dir="rtl"] {
    direction: rtl;
}

[dir="rtl"] .space-x-2 > * + *,
[dir="rtl"] .space-x-4 > * + *,
[dir="rtl"] .space-x-8 > * + * {
    margin-left: 0;
}

[dir="rtl"] .space-x-2 > * {
    margin-right: 0.5rem;
}

[dir="rtl"] .space-x-4 > * {
    margin-right: 1rem;
}

[dir="rtl"] .space-x-8 > * {
    margin-right: 2rem;
}

/* Loading State */
.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Form Success/Error Messages */
.form-message {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
}

.form-message.success {
    background-color: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: #06b6d4;
}

.form-message.error {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* Responsive Typography */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.5rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
}

/* Smooth Transitions */
a, button {
    transition: all 0.2s ease;
}

/* Focus States */
input:focus,
textarea:focus,
select:focus,
button:focus {
    outline: 2px solid #06b6d4;
    outline-offset: 2px;
}

/* Team Member Social Icons */
.team-social {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.team-card:hover .team-social {
    opacity: 1;
    transform: translateY(0);
}

/* Header Scroll Effect */
.header-scrolled {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* ============================================
   PROFESSIONAL SMOOTH SCROLLING
   ============================================ */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* ============================================
   PROFESSIONAL SELECTION
   ============================================ */

::selection {
  background: rgba(6, 182, 212, 0.35);
  color: white;
}

::-moz-selection {
  background: rgba(6, 182, 212, 0.35);
  color: white;
}
/* ----------------------------------------
   Aesthetic upgrades (keep existing content)
----------------------------------------- */

:root {
  --bg: #020617; /* slate-950 */
  --card: rgba(15, 23, 42, 0.85); /* slate-900 */
  --border: rgba(51, 65, 85, 0.45); /* slate-700/?? */
  --cyan: #06b6d4;
}

/* Subtle background depth + noise */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 700px at 15% 10%, rgba(6, 182, 212, 0.12), transparent 55%),
    radial-gradient(900px 600px at 85% 20%, rgba(56, 189, 248, 0.10), transparent 55%),
    radial-gradient(900px 650px at 50% 90%, rgba(99, 102, 241, 0.08), transparent 60%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  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='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

::selection {
  background: rgba(6, 182, 212, 0.35);
}

/* Hero title: gradient text for a more "wow" look */
.hero-title {
  background: linear-gradient(90deg, #ffffff 0%, rgba(6, 182, 212, 0.95) 35%, #ffffff 75%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 35px rgba(6, 182, 212, 0.12);
}

/* Header scrolled state (JS already toggles this class) */
.header-scrolled {
  background: rgba(2, 6, 23, 0.92) !important;
  border-bottom-color: rgba(51, 65, 85, 0.55) !important;
  box-shadow:
    0 10px 35px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(6, 182, 212, 0.10) inset;
}

/* Nav links: underline glow */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.9), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms ease;
}

.nav-link:hover::after {
  transform: scaleX(1);
}

/* ============================================
   PROFESSIONAL GLOW & SHADOW SYSTEM
   ============================================ */

/* Enhanced glass effect for all cards */
.service-card,
.impact-card,
.deliverable-card,
.package-card,
.process-card,
.training-card,
.portfolio-card,
.team-card,
.pentesting-item,
.programming-item,
.training-service-item {
  position: relative;
  overflow: hidden;
  background: var(--card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Animated gradient overlay - Main themes */
.service-card::before,
.package-card::before,
.portfolio-card::before,
.training-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(800px 300px at 20% 0%, rgba(6, 182, 212, 0.25), transparent 65%),
    radial-gradient(700px 350px at 80% 20%, rgba(56, 189, 248, 0.18), transparent 65%),
    radial-gradient(600px 400px at 50% 100%, rgba(99, 102, 241, 0.12), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}

/* Animated gradient overlay - Sub themes */
.impact-card::before,
.deliverable-card::before,
.process-card::before,
.pentesting-item::before,
.programming-item::before,
.training-service-item::before {
  content: "";
  position: absolute;
  inset: -1px;
  background:
    radial-gradient(500px 200px at 30% 0%, rgba(6, 182, 212, 0.15), transparent 60%),
    radial-gradient(450px 250px at 70% 10%, rgba(56, 189, 248, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}

/* Hover state - Main themes */
.service-card:hover::before,
.package-card:hover::before,
.portfolio-card:hover::before,
.training-card:hover::before {
  opacity: 1;
}

/* Hover state - Sub themes */
.impact-card:hover::before,
.deliverable-card:hover::before,
.process-card:hover::before,
.pentesting-item:hover::before,
.programming-item:hover::before,
.training-service-item:hover::before {
  opacity: 0.8;
}

/* Professional shadow system - Main themes (subtiler, Text bleibt lesbar) */
.service-card:hover,
.package-card:hover,
.portfolio-card:hover,
.training-card:hover {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.35),
    0 8px 25px rgba(6, 182, 212, 0.12),
    0 0 0 1px rgba(6, 182, 212, 0.25) inset;
}

/* Professional shadow system - Sub themes */
.impact-card:hover,
.deliverable-card:hover,
.process-card:hover,
.pentesting-item:hover,
.programming-item:hover,
.training-service-item:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.25),
    0 4px 15px rgba(6, 182, 212, 0.1),
    0 0 0 1px rgba(6, 182, 212, 0.2) inset;
}

/* Border glow effect on hover (subtiler) */
.service-card:hover,
.package-card:hover,
.portfolio-card:hover,
.training-card:hover {
  border-color: rgba(6, 182, 212, 0.4) !important;
}

.impact-card:hover,
.deliverable-card:hover,
.process-card:hover,
.pentesting-item:hover,
.programming-item:hover,
.training-service-item:hover {
  border-color: rgba(6, 182, 212, 0.3) !important;
}

/* ============================================
   PROFESSIONAL BUTTON SYSTEM
   ============================================ */

.cta-primary,
.contact-btn {
  position: relative;
  overflow: hidden;
  box-shadow:
    0 18px 50px rgba(6, 182, 212, 0.18),
    0 0 0 1px rgba(6, 182, 212, 0.15) inset;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-primary::before,
.contact-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.cta-primary:hover::before,
.contact-btn:hover::before {
  width: 300px;
  height: 300px;
}

.cta-primary:hover,
.contact-btn:hover {
  box-shadow:
    0 25px 70px rgba(6, 182, 212, 0.35),
    0 0 0 1px rgba(6, 182, 212, 0.25) inset,
    0 0 40px rgba(6, 182, 212, 0.2);
  transform: translateY(-2px);
}

.cta-primary:active,
.contact-btn:active {
  transform: translateY(0);
}

/* Secondary button hover */
a[class*="border-2"]:not(.cta-primary):not(.contact-btn) {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

a[class*="border-2"]:not(.cta-primary):not(.contact-btn)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(56, 189, 248, 0.1));
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

a[class*="border-2"]:not(.cta-primary):not(.contact-btn):hover::before {
  opacity: 1;
}

/* Inputs: nicer focus */
input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.15);
}

/* Mobile menu entrance animation */
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-menu-in {
  animation: menuIn 220ms ease-out;
}

/* Scroll progress + Back-to-top */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.0), rgba(6, 182, 212, 0.95), rgba(56, 189, 248, 0.95));
  z-index: 60;
  box-shadow: 0 0 24px rgba(6, 182, 212, 0.35);
}

.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(51, 65, 85, 0.6);
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #e2e8f0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease, border-color 220ms ease;
}

.back-to-top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  border-color: rgba(6, 182, 212, 0.55);
  box-shadow: 0 18px 60px rgba(6, 182, 212, 0.18);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.2px;
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes menuOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

.animate-menu-in  { animation: menuIn 180ms ease-out both; }
.animate-menu-out { animation: menuOut 180ms ease-in  both; }

/* === enhancements.css === */

/* Enhancements: section dividers + form validation + toast (non-destructive) */

:root {
  --divider-a: rgba(34, 211, 238, 0.55);
  --divider-b: rgba(56, 189, 248, 0.25);
  --divider-c: rgba(15, 23, 42, 0.0);
}

/* Soft gradient dividers between sections */
section { position: relative; }
section:not(#hero)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--divider-c), var(--divider-a), var(--divider-c));
  opacity: 0.9;
  pointer-events: none;
}
section:not(#hero)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 28px;
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.10), rgba(15, 23, 42, 0));
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.7;
}

/* Invalid field styling (works with Tailwind classes too) */
.is-invalid {
  outline: none !important;
  border-color: rgba(248, 113, 113, 0.75) !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15) !important;
}

/* Toasts */
.toast-container {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(420px, calc(100vw - 36px));
}

.toast {
  background: rgba(2, 6, 23, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  overflow: hidden;
  transform: translateY(8px);
  opacity: 0;
  animation: toast-in 200ms ease-out forwards;
}
.toast-inner {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 12px 12px;
}
.toast-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.8);
  box-shadow: 0 0 0 6px rgba(148, 163, 184, 0.12);
}
.toast-text {
  color: rgba(226, 232, 240, 0.95);
  font-size: 14px;
  line-height: 1.35;
}
.toast-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(226, 232, 240, 0.75);
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.toast-close:hover {
  background: rgba(148, 163, 184, 0.12);
  color: rgba(226, 232, 240, 0.95);
}

.toast-success { border-color: rgba(34, 211, 238, 0.35); }
.toast-success .toast-dot { background: rgba(34, 211, 238, 0.95); box-shadow: 0 0 0 6px rgba(34, 211, 238, 0.14); }

.toast-error { border-color: rgba(248, 113, 113, 0.35); }
.toast-error .toast-dot { background: rgba(248, 113, 113, 0.95); box-shadow: 0 0 0 6px rgba(248, 113, 113, 0.14); }

.toast-hide { animation: toast-out 200ms ease-in forwards; }

@keyframes toast-in { to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ============================================
   PROFESSIONAL ICON & LINK ANIMATIONS
   ============================================ */

/* Icon hover animations - unified */
.service-card i[data-lucide],
.package-card i[data-lucide],
.portfolio-card i[data-lucide],
.training-card i[data-lucide],
.impact-card i[data-lucide],
.deliverable-card i[data-lucide],
.process-card i[data-lucide],
.pentesting-item i[data-lucide],
.programming-item i[data-lucide],
.training-service-item i[data-lucide] {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon animations - subtil, keine Text-Beeinträchtigung */
.service-card:hover i[data-lucide],
.package-card:hover i[data-lucide],
.portfolio-card:hover i[data-lucide],
.training-card:hover i[data-lucide] {
  transform: scale(1.08);
  filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.3));
}

.impact-card:hover i[data-lucide],
.deliverable-card:hover i[data-lucide],
.process-card:hover i[data-lucide],
.pentesting-item:hover i[data-lucide],
.programming-item:hover i[data-lucide],
.training-service-item:hover i[data-lucide] {
  transform: scale(1.05);
  filter: drop-shadow(0 0 4px rgba(6, 182, 212, 0.25));
}

/* Link arrow animations */
a[href] i[data-lucide="arrow-right"],
a[href] i[data-lucide="chevron-right"] {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover i[data-lucide="chevron-right"],
.portfolio-card:hover i[data-lucide="arrow-right"],
a:hover i[data-lucide="arrow-right"] {
  transform: translateX(4px);
}

/* Tag hover effects */
span[class*="border"]:not([class*="rounded-full"]) {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

span[class*="border"]:not([class*="rounded-full"])::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(56, 189, 248, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

span[class*="border"]:not([class*="rounded-full"]):hover::before {
  opacity: 1;
}

span[class*="border"]:not([class*="rounded-full"]):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2);
}

/* ============================================
   PROFESSIONAL NAVIGATION HOVER
   ============================================ */

.nav-link,
.mobile-nav-link {
  position: relative;
  transition: color 0.3s ease;
}

.nav-link::after,
.mobile-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.9), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover::after,
.mobile-nav-link:hover::after {
  transform: scaleX(1);
}

.nav-link:hover,
.mobile-nav-link:hover {
  color: #06b6d4 !important;
  text-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
}

/* ============================================
   PROFESSIONAL FORM INPUT HOVER
   ============================================ */

input[type="text"],
input[type="email"],
textarea,
select {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

input[type="text"]:hover:not(:focus),
input[type="email"]:hover:not(:focus),
textarea:hover:not(:focus),
select:hover:not(:focus) {
  border-color: rgba(6, 182, 212, 0.4);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.05);
}

/* ============================================
   PROFESSIONAL CONTACT INFO CARDS
   ============================================ */

.bg-slate-900[class*="border"]:not(.service-card):not(.package-card) {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.bg-slate-900[class*="border"]:not(.service-card):not(.package-card)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(6, 182, 212, 0.1), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.bg-slate-900[class*="border"]:not(.service-card):not(.package-card):hover::before {
  opacity: 1;
}

.bg-slate-900[class*="border"]:not(.service-card):not(.package-card):hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(6, 182, 212, 0.3);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; opacity: 1; transform: none; }
  .toast-hide { animation: none; }
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Loading spinner animation */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-spinner {
  animation: spin 1s linear infinite;
}

/* Button loading state */
.contact-btn.loading {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

.contact-btn.loading .contact-btn-text::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ============================================
   PROFESSIONAL HERO BADGE HOVER
   ============================================ */

.hero-badge {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-badge:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 25px rgba(6, 182, 212, 0.25);
}

/* ============================================
   PROFESSIONAL SECTION TITLES
   ============================================ */

h2[class*="-title"],
h3[class*="-title"] {
  position: relative;
  display: inline-block;
}

h2[class*="-title"]::after,
h3[class*="-title"]::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.8), transparent);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

section:hover h2[class*="-title"]::after,
section:hover h3[class*="-title"]::after {
  transform: translateX(-50%) scaleX(1);
}

/* ============================================
   PROFESSIONAL FOOTER LINKS
   ============================================ */

footer a {
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

footer a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: rgba(6, 182, 212, 0.8);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

footer a:hover::before {
  width: 100%;
}

footer a:hover {
  transform: translateX(4px);
  text-shadow: 0 0 8px rgba(6, 182, 212, 0.3);
}

/* ============================================
   PROFESSIONAL SOCIAL ICONS
   ============================================ */

footer a[aria-label] {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

footer a[aria-label]:hover {
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 8px 25px rgba(6, 182, 212, 0.3);
}

/* ============================================
   PROFESSIONAL BACK TO TOP BUTTON
   ============================================ */

.back-to-top {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.back-to-top:hover {
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 12px 40px rgba(6, 182, 212, 0.4);
}

.back-to-top:active {
  transform: translateY(-2px) scale(1.05);
}

/* ============================================
   PROFESSIONAL ACCORDION ANIMATIONS
   ============================================ */

.accordion-content {
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 0;
}

.accordion-content.active {
  opacity: 1;
}

/* ============================================
   PROFESSIONAL DETAILS/SUMMARY STYLING
   ============================================ */

details {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

details:hover {
  border-color: rgba(6, 182, 212, 0.3) !important;
}

details[open] {
  border-color: rgba(6, 182, 212, 0.4) !important;
}

details summary {
  transition: all 0.3s ease;
}

details summary:hover {
  color: #06b6d4;
}

details[open] summary {
  color: #06b6d4;
}

/* ============================================
   PROFESSIONAL PRICE BADGES
   ============================================ */

span[class*="bg-cyan-500"]:not(.hero-badge):not([class*="rounded-full"]) {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

span[class*="bg-cyan-500"]:not(.hero-badge):not([class*="rounded-full"])::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

span[class*="bg-cyan-500"]:not(.hero-badge):not([class*="rounded-full"]):hover::before {
  opacity: 1;
}

/* ============================================
   PROFESSIONAL CHECKBOX STYLING
   ============================================ */

input[type="checkbox"] {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

input[type="checkbox"]:hover:not(:checked) {
  border-color: rgba(6, 182, 212, 0.5);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

input[type="checkbox"]:checked {
  background-color: #06b6d4;
  border-color: #06b6d4;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
}

/* ============================================
   PROFESSIONAL IMAGE OVERLAY EFFECTS
   ============================================ */

.portfolio-card img,
.team-card img {
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-card:hover img,
.team-card:hover img {
  transform: scale(1.15);
}

/* ============================================
   PROFESSIONAL GRADIENT TEXT EFFECTS
   ============================================ */

.text-gradient {
  background: linear-gradient(135deg, #06b6d4, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================
   PROFESSIONAL FOCUS RING IMPROVEMENTS
   ============================================ */

*:focus-visible {
  outline: 2px solid rgba(6, 182, 212, 0.6);
  outline-offset: 2px;
  border-radius: 4px;
}

button:focus-visible,
a:focus-visible {
  outline-offset: 4px;
}

/* ============================================
   PROFESSIONAL PROCESS PAGE CARDS
   ============================================ */

.bg-slate-900[class*="border"]:not(.service-card):not(.package-card):not(.portfolio-card):not(.training-card) {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.bg-slate-900[class*="border"]:not(.service-card):not(.package-card):not(.portfolio-card):not(.training-card)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(6, 182, 212, 0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.bg-slate-900[class*="border"]:not(.service-card):not(.package-card):not(.portfolio-card):not(.training-card):hover::before {
  opacity: 1;
}

.bg-slate-900[class*="border"]:not(.service-card):not(.package-card):not(.portfolio-card):not(.training-card):hover {
  transform: translateY(-4px);
  border-color: rgba(6, 182, 212, 0.3) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(6, 182, 212, 0.2);
}

.bg-slate-900[class*="border"]:not(.service-card):not(.package-card):not(.portfolio-card):not(.training-card) > * {
  position: relative;
  z-index: 1;
}

/* Process page pillar cards */
.bg-slate-900.border.border-slate-800.rounded-xl {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.bg-slate-900.border.border-slate-800.rounded-xl:hover {
  transform: translateY(-6px);
  border-color: rgba(6, 182, 212, 0.4) !important;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(6, 182, 212, 0.25);
}

.bg-slate-900.border.border-slate-800.rounded-xl:hover span[class*="bg-cyan-500/10"] {
  background: rgba(6, 182, 212, 0.2) !important;
  border-color: rgba(6, 182, 212, 0.4) !important;
  transform: scale(1.1);
}

.bg-slate-900.border.border-slate-800.rounded-xl:hover i[data-lucide] {
  transform: scale(1.2) rotate(5deg);
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.5));
}

.bg-slate-900.border.border-slate-800.rounded-xl:hover h3 {
  color: #06b6d4 !important;
}

/* Timeline cards */
.bg-slate-900.border.border-slate-800.rounded-xl.p-6 {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bg-slate-900.border.border-slate-800.rounded-xl.p-6:hover {
  transform: translateY(-4px);
  border-color: rgba(6, 182, 212, 0.35) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(6, 182, 212, 0.2);
}

.bg-slate-900.border.border-slate-800.rounded-xl.p-6:hover h3 {
  color: #06b6d4 !important;
}

.bg-slate-900.border.border-slate-800.rounded-xl.p-6:hover span[class*="bg-cyan-500/10"] {
  background: rgba(6, 182, 212, 0.2) !important;
  border-color: rgba(6, 182, 212, 0.4) !important;
}

/* ============================================
   PROFESSIONAL LIST ITEM HOVER
   ============================================ */

ul li {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

ul li:hover {
  transform: translateX(4px);
}

ul li:hover i[data-lucide] {
  transform: scale(1.2);
  filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.4));
}

/* ============================================
   PROFESSIONAL CTA SECTION
   ============================================ */

.bg-gradient-to-r[class*="from-cyan-500"] {
  position: relative;
  overflow: hidden;
}

.bg-gradient-to-r[class*="from-cyan-500"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(99, 102, 241, 0.1));
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.bg-gradient-to-r[class*="from-cyan-500"]:hover::before {
  opacity: 1;
}

/* ============================================
   PROFESSIONAL SCROLL INDICATOR
   ============================================ */

#scroll-progress {
  transition: width 0.1s ease-out;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}

/* === security-light-theme.css === */
/* Codex Operation – color-only theme override
   Warm off-white + graphite/navy + cyber-cyan.
   Layout, spacing, components and animations are intentionally unchanged. */
:root {
  --co-page: #e6eaed;
  --co-page-soft: #dde3e7;
  --co-surface: #f1f3f4;
  --co-graphite: #3b485c;
  --co-graphite-deep: #303b4d;
  --co-text: #303b4d;
  --co-muted: #657080;
  --co-border: #c8d0d7;
  --co-cyan: #00a8c2;
  --co-cyan-dark: #008ca3;
  --co-cyan-soft: #d8f1f4;
  --co-cyan-line: rgba(0, 168, 194, .28);
}

html, body { background: var(--co-page) !important; color: var(--co-text) !important; }
::selection { background: rgba(0,168,194,.22); color: var(--co-graphite-deep); }

/* Header */
#header {
  background: rgba(246,248,249,.94) !important;
  border-color: #e3e8eb !important;
  box-shadow: 0 8px 30px rgba(52,64,84,.06) !important;
}
#header.header-scrolled {
  background: rgba(246,248,249,.98) !important;
  box-shadow: 0 12px 34px rgba(52,64,84,.10) !important;
}
#header .text-white, #header .text-slate-300, #header .text-slate-400 { color: var(--co-graphite) !important; }
#header .text-slate-600 { color: #98a2b3 !important; }
#header .text-cyan-400, #header .hover\:text-cyan-400:hover { color: var(--co-cyan) !important; }
#header .bg-cyan-500 { background: var(--co-cyan) !important; }
#header .bg-cyan-500 .text-slate-900 { color: #ffffff !important; }
#header .border-slate-800 { border-color: #e3e8eb !important; }
.nav-link::after, .mobile-nav-link::after { background: var(--co-cyan) !important; box-shadow: none !important; }
#mobile-menu { background: rgba(246,248,249,.98) !important; }

/* Hero: same image/video and geometry, only the palette changes */
#hero { background: var(--co-page) !important; }
#hero .bg-gradient-to-br {
  background: linear-gradient(90deg, rgba(238,241,242,.97) 0%, rgba(230,234,237,.92) 48%, rgba(221,227,231,.78) 100%) !important;
}
#hero .grid-pattern { opacity: .28 !important; }
#hero .text-white { color: var(--co-graphite) !important; }
#hero .text-slate-300, #hero .text-slate-400 { color: var(--co-muted) !important; }
#hero .text-cyan-300, #hero .text-cyan-400 { color: var(--co-cyan-dark) !important; }
#hero .bg-cyan-500\/10 { background: rgba(0,168,194,.08) !important; }
#hero .border-cyan-500\/30, #hero .border-cyan-400 { border-color: var(--co-cyan-line) !important; }
#hero .bg-cyan-500 { background: var(--co-graphite) !important; }
#hero .hover\:bg-cyan-600:hover { background: var(--co-cyan) !important; }
#hero .text-slate-900 { color: #fff !important; }
#hero .shadow-cyan-500\/30, #hero .shadow-cyan-500\/50 { --tw-shadow-color: rgba(52,64,84,.16) !important; }
#hero [style*="var(--co-cyan)"] { color: var(--co-cyan) !important; }

/* Alternating page sections: warm light / graphite, matching the reference mood */
main > section.bg-slate-950 { background: var(--co-page) !important; }
main > section.bg-slate-900 { background: var(--co-graphite) !important; }

/* Typography on LIGHT top-level sections */
main > section.bg-slate-950 > div .text-white { color: var(--co-graphite) !important; }
main > section.bg-slate-950 > div .text-slate-200,
main > section.bg-slate-950 > div .text-slate-300 { color: #536071 !important; }
main > section.bg-slate-950 > div .text-slate-400,
main > section.bg-slate-950 > div .text-slate-500 { color: var(--co-muted) !important; }

/* Dark cards inside light sections keep readable light text */
main > section.bg-slate-950 .bg-slate-900,
main > section.bg-slate-950 .bg-slate-900\/40,
main > section.bg-slate-950 .bg-slate-900\/50,
main > section.bg-slate-950 .bg-slate-900\/60,
main > section.bg-slate-950 .bg-slate-900\/80,
main > section.bg-slate-950 .bg-slate-800 {
  background-color: var(--co-graphite) !important;
}
main > section.bg-slate-950 .bg-slate-900 .text-white,
main > section.bg-slate-950 .bg-slate-900\/40 .text-white,
main > section.bg-slate-950 .bg-slate-900\/50 .text-white,
main > section.bg-slate-950 .bg-slate-900\/60 .text-white,
main > section.bg-slate-950 .bg-slate-800 .text-white { color:#fff !important; }
main > section.bg-slate-950 .bg-slate-900 .text-slate-300,
main > section.bg-slate-950 .bg-slate-900 .text-slate-400,
main > section.bg-slate-950 .bg-slate-900\/40 .text-slate-300,
main > section.bg-slate-950 .bg-slate-900\/40 .text-slate-400 { color:#d4dbe4 !important; }

/* Typography on DARK top-level sections */
main > section.bg-slate-900 .text-white { color:#fff !important; }
main > section.bg-slate-900 .text-slate-200,
main > section.bg-slate-900 .text-slate-300 { color:#edf1f5 !important; }
main > section.bg-slate-900 .text-slate-400 { color:#c7d0da !important; }
main > section.bg-slate-900 .text-slate-500 { color:#aeb9c5 !important; }
main > section.bg-slate-900 .bg-slate-950,
main > section.bg-slate-900 .bg-slate-950\/40,
main > section.bg-slate-900 .bg-slate-950\/50,
main > section.bg-slate-900 .bg-slate-950\/60 { background-color: var(--co-graphite-deep) !important; }

/* Cards, borders, inputs */
.border-slate-800, .border-slate-700 { border-color: rgba(152,162,179,.30) !important; }
main > section.bg-slate-950 > div > .bg-slate-900,
main > section.bg-slate-950 .border-slate-800.bg-slate-900 { border-color: rgba(0,168,194,.20) !important; }

/* Cyan becomes the single security accent */
.text-cyan-300, .text-cyan-400, .text-cyan-500 { color: var(--co-cyan) !important; }
.bg-cyan-500 { background-color: var(--co-cyan) !important; }
.bg-cyan-500\/10 { background-color: rgba(0,168,194,.09) !important; }
.bg-cyan-500\/20 { background-color: rgba(0,168,194,.14) !important; }
.border-cyan-400, .border-cyan-500, .border-cyan-500\/30 { border-color: var(--co-cyan-line) !important; }
.hover\:text-cyan-300:hover, .hover\:text-cyan-400:hover { color: var(--co-cyan-dark) !important; }
.hover\:bg-cyan-500:hover, .hover\:bg-cyan-600:hover { background-color: var(--co-cyan-dark) !important; }
.focus\:border-cyan-500:focus { border-color: var(--co-cyan) !important; }

/* Contact light area */
#contact input, #contact select, #contact textarea {
  background: #fff !important;
  border-color: #d7dee3 !important;
  color: var(--co-graphite) !important;
}
#contact input:focus, #contact select:focus, #contact textarea:focus {
  border-color: var(--co-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,168,194,.12) !important;
}
#contact option { color: var(--co-graphite); background:#fff; }

/* Footer stays graphite, like the dark reference section */
footer.bg-slate-950 { background: var(--co-graphite) !important; border-color: rgba(255,255,255,.10) !important; }
footer .text-white { color:#fff !important; }
footer .text-slate-300, footer .text-slate-400 { color:#d4dbe4 !important; }
footer .text-slate-500 { color:#aeb8c4 !important; }
footer .bg-slate-800 { background: var(--co-graphite-deep) !important; }
footer .border-slate-800 { border-color: rgba(255,255,255,.10) !important; }
footer [style*="var(--co-cyan)"] { color: var(--co-cyan) !important; }

/* Legal/detail pages that use a dark body directly */
body.bg-slate-950 > main { background: var(--co-page) !important; }
body.bg-slate-950 > main .text-white { color: var(--co-graphite) !important; }
body.bg-slate-950 > main .text-slate-300 { color:#536071 !important; }
body.bg-slate-950 > main .text-slate-400, body.bg-slate-950 > main .text-slate-500 { color:var(--co-muted) !important; }

/* Preserve white text on explicitly dark blocks on detail pages */
body.bg-slate-950 > main .bg-slate-900 .text-white,
body.bg-slate-950 > main .bg-slate-800 .text-white { color:#fff !important; }
body.bg-slate-950 > main .bg-slate-900 .text-slate-300,
body.bg-slate-950 > main .bg-slate-900 .text-slate-400 { color:#d4dbe4 !important; }
body.bg-slate-950 > main .bg-slate-900 { background:var(--co-graphite) !important; }
body.bg-slate-950 > main .bg-slate-800 { background:var(--co-graphite-deep) !important; }

/* Soft decorative backgrounds */
.bg-blue-500\/10, .bg-violet-500\/10, .bg-emerald-500\/10 { background-color: rgba(0,168,194,.08) !important; }
.text-blue-400, .text-violet-400, .text-emerald-400 { color: var(--co-cyan) !important; }
.border-blue-400\/20, .border-violet-400\/20, .border-emerald-400\/20 { border-color: rgba(0,168,194,.20) !important; }

/* =========================================================
   Homepage refinement: hero service marquee + contact system
   ========================================================= */

/* Hero keyword carousel */
#hero { position: relative; }
.service-marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34px;
  z-index: 20;
  width: 100%;
  overflow: hidden;
  pointer-events: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.service-marquee-track {
  display: flex;
  width: max-content;
  animation: coServiceMarquee 40s linear infinite;
  will-change: transform;
}
.service-marquee-group {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 12px;
}
.service-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 9px 16px;
  border: 1px solid rgba(0,168,194,.24);
  border-radius: 999px;
  background: rgba(248,250,251,.70);
  color: #344054;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.01em;
  box-shadow: 0 4px 18px rgba(48,59,77,.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.service-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 9px;
  border-radius: 999px;
  background: var(--co-cyan);
  box-shadow: 0 0 0 4px rgba(0,168,194,.10);
}
.service-chip:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.94);
  border-color: rgba(0,168,194,.48);
  box-shadow: 0 8px 22px rgba(48,59,77,.10);
}
.service-marquee:hover .service-marquee-track { animation-play-state: paused; }
@keyframes coServiceMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Contact: one coherent shell, with a dark form and lighter info cards */
#contact {
  background: #e6eaed !important;
}
#contact .contact-title { color: var(--co-graphite-deep) !important; }
#contact .contact-subtitle { color: var(--co-muted) !important; }
.contact-shell {
  padding: 22px;
  border: 1px solid rgba(48,59,77,.08);
  border-radius: 22px;
  background: rgba(248,250,251,.88);
  box-shadow: 0 22px 55px rgba(48,59,77,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#contact .contact-form-card {
  background: #3b485c !important;
  border: 1px solid rgba(0,168,194,.22) !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 36px rgba(48,59,77,.13);
}
#contact .contact-form-card .text-white,
#contact .contact-form-card h3 { color: #f8fafc !important; }
#contact .contact-form-card label,
#contact .contact-form-card .text-slate-300 { color: #e5ebf1 !important; }
#contact input,
#contact select,
#contact textarea {
  background: #f9fbfc !important;
  border: 1px solid #d4dce2 !important;
  color: #303b4d !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
#contact input:hover,
#contact select:hover,
#contact textarea:hover { border-color: #bdc9d1 !important; }
#contact input:focus,
#contact select:focus,
#contact textarea:focus {
  border-color: var(--co-cyan) !important;
  box-shadow: 0 0 0 4px rgba(0,168,194,.12) !important;
}
#contact .contact-btn {
  background: var(--co-cyan) !important;
  color: #142632 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 26px rgba(0,168,194,.22) !important;
}
#contact .contact-btn:hover {
  background: var(--co-cyan-dark) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
#contact .contact-info-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#contact .contact-info-card {
  background: #eef3f5 !important;
  border: 1px solid #d6e0e5 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(48,59,77,.055);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
#contact .contact-info-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0,168,194,.48) !important;
  box-shadow: 0 12px 30px rgba(48,59,77,.09);
}
#contact .contact-info-card h3,
#contact .contact-info-card .text-white { color: var(--co-graphite-deep) !important; }
#contact .contact-info-card p,
#contact .contact-info-card .text-slate-400 { color: #657080 !important; }
#contact .contact-info-card .bg-cyan-500\/10 { background: rgba(0,168,194,.10) !important; }
#contact .contact-info-card .text-cyan-400 { color: var(--co-cyan-dark) !important; }
#contact .contact-info-card a { color: var(--co-cyan-dark) !important; }
#contact .contact-info-card a:hover { color: #006f82 !important; }
#contact .contact-consent-link { color: #43d0e2 !important; }
#contact .contact-consent-link:hover { color: #83e4ef !important; }

@media (max-width: 900px) {
  .service-marquee { bottom: 22px; }
  .service-marquee-track { animation-duration: 34s; }
  .contact-shell { padding: 16px; border-radius: 18px; }
}
@media (max-width: 640px) {
  .service-marquee { bottom: 14px; }
  .service-chip { padding: 8px 13px; font-size: 12px; }
  .service-marquee-group { gap: 9px; padding-right: 9px; }
  .contact-shell { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .service-marquee-track { animation: none; }
  .service-marquee { overflow-x: auto; }
  #contact .contact-info-card, #contact .contact-btn, .service-chip { transition: none !important; }
}


/* =========================================================
   2026-08 consistency pass: nav, filters, pricing, FAQ motion
   ========================================================= */

/* Keep all portfolio filter labels white, including the active filter. */
#portfolio-filters .portfolio-filter-chip,
#portfolio-filters .portfolio-filter-chip:hover,
#portfolio-filters .portfolio-filter-chip:focus {
  color: #fff !important;
}
#portfolio-filters .portfolio-filter-chip.bg-cyan-700 {
  background-color: #087f91 !important;
  border-color: #17a7bb !important;
}

/* Package prices: high-emphasis white bold text. */
.package-price {
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
}

/* Smooth, restrained FAQ accordion. */
.faq-smooth-item {
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease, background-color .35s ease;
}
.faq-smooth-item:hover,
.faq-smooth-item.is-open {
  border-color: rgba(0,168,194,.42) !important;
}
.faq-smooth-item.is-open {
  box-shadow: 0 14px 34px rgba(35,48,68,.10);
}
.faq-smooth-question {
  cursor: pointer;
  background: transparent;
  border: 0;
}
.faq-smooth-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows .68s cubic-bezier(.22,1,.36,1),
    opacity .42s ease,
    visibility 0s linear .68s;
}
.faq-smooth-answer-inner {
  min-height: 0;
  overflow: hidden;
}
.faq-smooth-item.is-open .faq-smooth-answer {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows .68s cubic-bezier(.22,1,.36,1),
    opacity .42s ease .08s,
    visibility 0s linear 0s;
}
.faq-smooth-icon,
.faq-smooth-icon-wrap {
  transition: transform .55s cubic-bezier(.22,1,.36,1), background-color .3s ease, border-color .3s ease;
}
.faq-smooth-item.is-open .faq-smooth-icon {
  transform: rotate(180deg);
}
.faq-smooth-item.is-open .faq-smooth-icon-wrap {
  background: rgba(0,168,194,.18);
  border-color: rgba(0,168,194,.44);
}

@media (prefers-reduced-motion: reduce) {
  .faq-smooth-item,
  .faq-smooth-answer,
  .faq-smooth-icon,
  .faq-smooth-icon-wrap {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}


/* =========================================================
   Final UI pass: video hero, service tabs, page consistency
   ========================================================= */

/* Hero video: keep text readable and video calm. */
#hero .hero-background-video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: saturate(.72) contrast(.88) brightness(1.04);
}
#hero > .absolute.inset-0.z-0 > .absolute.inset-0 {
  background: linear-gradient(135deg, rgba(239,244,246,.80), rgba(225,232,236,.76) 48%, rgba(205,218,224,.73)) !important;
}

/* Requested marquee position/size. */
.service-marquee { bottom: 104px !important; }
.service-marquee-group { gap: 16px !important; padding-right: 16px !important; }
.service-chip { padding: 11px 20px !important; font-size: 14px !important; font-weight: 700 !important; }
.service-chip::before { width: 7px !important; height: 7px !important; margin-right: 10px !important; }

/* Service subpage: compact tab selector and only one detail panel at a time. */
#services.services-page, #services { background: #e6eaed !important; }
#services .services-page-title { color: #344054 !important; }
#services .services-page-intro { color: #667085 !important; }
.service-tabs-shell {
  background: rgba(248,250,251,.94);
  border: 1px solid rgba(52,64,84,.10);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 12px 32px rgba(52,64,84,.08);
}
.service-tabs-label {
  color: #667085; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; margin: 0 4px 10px;
}
.service-tabs-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.service-detail-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 14px; border-radius: 11px;
  border: 1px solid #d4dde3; background: #eef3f5; color: #344054;
  font-weight: 750; transition: transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.service-detail-tab:hover { transform: translateY(-1px); border-color: rgba(0,168,194,.45); background: #f8fbfc; }
.service-detail-tab.is-active { background: #00a8c2; color: #fff; border-color: #00a8c2; box-shadow: 0 8px 20px rgba(0,168,194,.20); }
.service-detail-panel { animation: servicePanelIn .42s cubic-bezier(.22,1,.36,1); box-shadow: 0 18px 44px rgba(38,50,66,.10); }
@keyframes servicePanelIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* Case Studies intro paragraph must remain white on slate panel. */
.portfolio-page-intro, .portfolio-page-intro p, .portfolio-page-intro span { color: #fff !important; opacity: 1 !important; }

/* Impact: same light page canvas as other subpages; dark intro panel with white copy. */
.impact-page-section { background: #e6eaed !important; }
.impact-page-section .impact-title,
.impact-page-section .impact-subtitle,
.impact-page-section > .container > .text-center > h1 { color: #344054 !important; }
.impact-page-section .impact-subtitle { color: #667085 !important; }
.impact-intro-panel { background: #3b485c !important; border-color: rgba(0,168,194,.22) !important; box-shadow: 0 12px 30px rgba(52,64,84,.10); }
.impact-intro-panel .impact-intro-text,
.impact-intro-panel .impact-intro-text * { color: #fff !important; opacity: 1 !important; }

/* Footer social buttons: visible marks instead of unsupported brand-icon glyphs. */
footer .social-mark {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff !important; font-size: 13px; font-weight: 850; letter-spacing: -.02em;
}
footer a[aria-label="Twitter"], footer a[aria-label="X"], footer a[aria-label="LinkedIn"], footer a[aria-label="GitHub"], footer a[aria-label="Instagram"] {
  background: #2f3b4d !important; border: 1px solid rgba(255,255,255,.10);
}
footer a[aria-label="Twitter"]:hover, footer a[aria-label="X"]:hover, footer a[aria-label="LinkedIn"]:hover, footer a[aria-label="GitHub"]:hover, footer a[aria-label="Instagram"]:hover {
  background: #00a8c2 !important; border-color: #00a8c2 !important; transform: translateY(-2px);
}

/* Packages FAQ: consistent spacing under fixed header and cleaner open state. */
#packages-faq .faq-smooth-item { background: #3b4a5f !important; border-color: rgba(0,168,194,.18) !important; }
#packages-faq .faq-smooth-item.is-open { border-color: rgba(0,168,194,.52) !important; box-shadow: 0 16px 36px rgba(52,64,84,.12); }
#packages-faq .faq-smooth-answer-inner { color: #f5f7fa !important; }
#packages-faq .faq-smooth-question span:first-child { color: #fff !important; }

@media (max-width: 900px) {
  .service-marquee { bottom: 72px !important; }
  .service-tabs-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .service-marquee { bottom: 52px !important; }
  .service-chip { padding: 9px 15px !important; font-size: 12px !important; }
  .service-tabs-row { grid-template-columns: 1fr; }
  .service-detail-heading { flex-direction: column; gap: 14px; }
  .service-detail-icon { width: 60px !important; height: 60px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .service-detail-panel { animation: none !important; }
  #hero .hero-background-video { display: none; }
  #hero > .absolute.inset-0.z-0 { background: url('../videos/hero-codex-poster.jpg') center/cover no-repeat; }
}

/* =========================================================
   2026-08 calm-background consistency pass
   Applied globally to homepage + all subpages.
   ========================================================= */
:root {
  --co-page: #edf1f2;
  --co-page-soft: #e7ecee;
  --co-surface: #f7f8f8;
  --co-graphite: #3f4b5d;
  --co-graphite-deep: #344052;
  --co-text: #344052;
  --co-muted: #6b7684;
  --co-border: #d3dade;
  --co-cyan: #00a6bd;
  --co-cyan-dark: #008ca0;
  --co-cyan-soft: #e0f2f4;
  --co-cyan-line: rgba(0,166,189,.24);
}

html, body {
  background: var(--co-page) !important;
}

/* One calm canvas across every page. */
main {
  background: var(--co-page) !important;
}
main > section.bg-slate-950,
main > section:not(#hero).bg-white,
.services-page,
.impact-page-section {
  background: var(--co-page) !important;
}
main > section.bg-slate-900 {
  background: var(--co-graphite) !important;
}

/* Quieter light hero/detail-page banners. */
main > section.relative.overflow-hidden:not(#hero),
main > section.relative.bg-slate-950:not(#hero) {
  background: linear-gradient(180deg, #eef2f3 0%, #e9eef0 100%) !important;
}

/* Reduce visual harshness of large dark panels without changing layout. */
.bg-slate-900,
.bg-slate-900\/40,
.bg-slate-900\/50,
.bg-slate-900\/60,
.bg-slate-900\/80 {
  --co-panel-shadow: 0 14px 38px rgba(47,59,77,.09);
}
main .bg-slate-900,
main .bg-slate-900\/40,
main .bg-slate-900\/50,
main .bg-slate-900\/60,
main .bg-slate-900\/80 {
  box-shadow: var(--co-panel-shadow);
}

/* Header: slightly warmer/softer than pure white. */
#header,
#header.header-scrolled {
  background: rgba(248,249,249,.96) !important;
  border-color: rgba(52,64,82,.08) !important;
}

/* Homepage section rhythm: calm, subtle alternation instead of stark blocks. */
#index-page-placeholder { display:none; }
#services,
#portfolio,
#contact {
  background: var(--co-page) !important;
}
#process {
  background: var(--co-page-soft) !important;
}
#training {
  background: var(--co-graphite) !important;
}

/* Contact shell harmonized with the quieter page canvas. */
#contact .contact-shell {
  background: rgba(247,248,248,.92) !important;
  border-color: rgba(52,64,82,.08) !important;
  box-shadow: 0 18px 46px rgba(47,59,77,.08) !important;
}

/* Detail pages: keep their cards readable but less high-contrast. */
body.bg-slate-950 > main .bg-slate-900 {
  background: var(--co-graphite) !important;
}
body.bg-slate-950 > main .bg-slate-800 {
  background: var(--co-graphite-deep) !important;
}

/* Footer remains the visual anchor, but less blue-heavy. */
footer.bg-slate-950 {
  background: var(--co-graphite) !important;
}

/* FAQ panels use the same graphite everywhere. */
.faq-smooth-item,
#packages-faq .faq-smooth-item {
  background: var(--co-graphite) !important;
}

/* Calm hero video treatment. */
#hero .hero-background-video {
  filter: saturate(.52) contrast(.82) brightness(1.08) !important;
}
#hero > .absolute.inset-0.z-0 > .absolute.inset-0 {
  background: linear-gradient(135deg,
    rgba(242,245,246,.84) 0%,
    rgba(234,239,241,.82) 50%,
    rgba(219,227,231,.78) 100%) !important;
}


/* =========================================================
   Unified detail pages — shared hero + dark content canvas
   ========================================================= */
.subpage-hero {
  position: relative;
  background: linear-gradient(180deg, #eef3f4 0%, #e9eff1 100%) !important;
  border-bottom: 1px solid rgba(0,166,189,.20);
  min-height: 255px;
  display: flex;
  align-items: center;
}
.subpage-hero .grid-pattern { opacity: .34; }
.subpage-hero h1 { color: #344052 !important; }
.subpage-hero p { color: #667085 !important; }
.subpage-hero .inline-flex.rounded-full {
  background: rgba(0,166,189,.07) !important;
  border-color: rgba(0,166,189,.34) !important;
}
.subpage-hero .inline-flex.rounded-full span,
.subpage-hero .inline-flex.rounded-full i { color: #009db3 !important; }

/* Services keeps a calmer light selector area beneath the shared hero. */
.services-content-section {
  background: var(--co-page) !important;
}

/* Impact now follows the Deliverables visual language: one dark body section. */
.impact-page-section {
  background: var(--co-graphite) !important;
  color: #fff !important;
}
.impact-page-section .impact-intro-panel {
  background: rgba(52,64,82,.72) !important;
  border-color: rgba(0,166,189,.28) !important;
  box-shadow: none !important;
}
.impact-page-section .impact-intro-text,
.impact-page-section .impact-intro-text * { color: #fff !important; opacity: 1 !important; }
.impact-page-section #impact-grid > * {
  background: var(--co-graphite-deep) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}
.impact-page-section #impact-grid h2,
.impact-page-section #impact-grid h3,
.impact-page-section #impact-grid strong,
.impact-page-section #impact-grid .text-white { color: #fff !important; }
.impact-page-section #impact-grid p,
.impact-page-section #impact-grid li,
.impact-page-section #impact-grid span:not(.text-cyan-400) { color: #e7edf2 !important; }
.impact-page-section .max-w-4xl .bg-slate-900 {
  background: var(--co-graphite-deep) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}
.impact-page-section .max-w-4xl .bg-slate-900 h2,
.impact-page-section .max-w-4xl .bg-slate-900 h3,
.impact-page-section .max-w-4xl .bg-slate-900 p,
.impact-page-section .max-w-4xl .bg-slate-900 li { color: #fff !important; }

/* Process overview: same dark section as Deliverables, all step copy white. */
#process-grid { color: #fff !important; }
#process-grid > * { color: #fff !important; }
body:has(#process-grid) main > section:nth-of-type(2) {
  background: var(--co-graphite) !important;
}
#process-grid .bg-slate-900,
#process-grid .bg-slate-950,
#process-grid [class*="bg-slate-"] {
  background: var(--co-graphite-deep) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: none !important;
}
#process-grid h2,
#process-grid h3,
#process-grid h4,
#process-grid p,
#process-grid li,
#process-grid span:not(.text-cyan-400):not(.text-cyan-300) {
  color: #fff !important;
  opacity: 1 !important;
}
#process-grid .text-slate-300,
#process-grid .text-slate-400,
#process-grid .text-slate-500 { color: #f0f4f7 !important; }

/* Process detail section below overview continues the same dark rhythm. */
#process-page { background: var(--co-graphite) !important; }
#process-page .bg-slate-950,
#process-page .bg-slate-900 {
  background: var(--co-graphite-deep) !important;
  border-color: rgba(255,255,255,.14) !important;
}
#process-page h2, #process-page h3, #process-page p, #process-page li { color: #fff !important; }

@media (max-width: 768px) {
  .subpage-hero { min-height: 220px; }
}


/* =========================================================
   2026-08 final subpage refinement
   Packages-like Impact/Process + Services-like Deliverables
   ========================================================= */

/* Impact + Process: calm light canvas with dark cards, like Packages */
body:has(#impact-grid) .impact-page-section,
body:has(#process-grid) main > section:nth-of-type(2),
#process-page {
  background: var(--co-page) !important;
  color: var(--co-text) !important;
}

/* Impact intro + metric cards */
.impact-page-section .impact-intro-panel {
  background: var(--co-graphite) !important;
  border-color: rgba(0,166,189,.22) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 36px rgba(47,59,77,.08) !important;
}
.impact-page-section .impact-intro-text,
.impact-page-section .impact-intro-text * {
  color: #fff !important;
  opacity: 1 !important;
}
.impact-page-section #impact-grid > * {
  background: transparent !important;
}
.impact-page-section #impact-grid .impact-card {
  background: var(--co-graphite) !important;
  border-color: rgba(0,166,189,.14) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(47,59,77,.08) !important;
}
.impact-page-section #impact-grid h3 {
  color: var(--co-text) !important;
}
.impact-page-section #impact-grid .impact-card,
.impact-page-section #impact-grid .impact-card * {
  color: #fff !important;
}
.impact-page-section #impact-grid .text-cyan-400 {
  color: var(--co-cyan) !important;
}

/* Impact detailed information becomes a contained dark band, like the lower Packages section */
.impact-page-section > .container > .max-w-4xl {
  max-width: 72rem !important;
  background: var(--co-graphite) !important;
  border-radius: 22px !important;
  padding: 2rem !important;
  box-shadow: 0 16px 40px rgba(47,59,77,.09) !important;
}
.impact-page-section > .container > .max-w-4xl .bg-slate-900 {
  background: var(--co-graphite-deep) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.impact-page-section > .container > .max-w-4xl h2,
.impact-page-section > .container > .max-w-4xl h3,
.impact-page-section > .container > .max-w-4xl p,
.impact-page-section > .container > .max-w-4xl li,
.impact-page-section > .container > .max-w-4xl span {
  color: #fff !important;
}

/* Process overview */
#process-grid .process-group {
  color: var(--co-text) !important;
}
#process-grid .process-card {
  background: var(--co-graphite) !important;
  border-color: rgba(0,166,189,.16) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(47,59,77,.08) !important;
}
#process-grid .process-card h3,
#process-grid .process-card p,
#process-grid .process-card span,
#process-grid .process-card li {
  color: #fff !important;
  opacity: 1 !important;
}
#process-grid .process-group > .inline-flex {
  background: var(--co-cyan-soft) !important;
  border-color: rgba(0,166,189,.28) !important;
}
#process-grid .process-group > .inline-flex span,
#process-grid .process-group > .inline-flex i {
  color: var(--co-cyan-dark) !important;
}

/* Process detail blocks: dark cards on the same calm light page */
#process-page .bg-slate-950,
#process-page .bg-slate-900 {
  background: var(--co-graphite) !important;
  border-color: rgba(0,166,189,.14) !important;
  box-shadow: 0 12px 30px rgba(47,59,77,.07) !important;
}
#process-page .grid.lg\:grid-cols-3 > div,
#process-page .grid.md\:grid-cols-3 > div {
  border-radius: 16px !important;
}
#process-page h2,
#process-page h3,
#process-page h4,
#process-page p,
#process-page li,
#process-page span:not(.text-cyan-300):not(.text-cyan-400) {
  color: #fff !important;
}
#process-page .text-cyan-300,
#process-page .text-cyan-400 {
  color: #22d3ee !important;
}

/* Deliverables: Services-like selector + one dark detail surface */
body:has(#deliverables-groups) main > section:nth-of-type(2) {
  background: var(--co-page) !important;
}
body:has(#deliverables-groups) main > section:nth-of-type(2) .max-w-5xl {
  max-width: 72rem !important;
}
body:has(#deliverables-groups) main > section:nth-of-type(2) .flex.items-end.justify-between {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(52,64,82,.10) !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  box-shadow: 0 12px 30px rgba(47,59,77,.06) !important;
  align-items: center !important;
}
body:has(#deliverables-groups) .deliverables-page-filter-title {
  color: var(--co-text) !important;
  font-size: .75rem !important;
  text-transform: uppercase;
  letter-spacing: .08em;
}
body:has(#deliverables-groups) .deliverables-page-filter-sub {
  color: var(--co-muted) !important;
  font-size: .9rem !important;
  margin-top: .25rem !important;
}
#deliverables-filters {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: .6rem !important;
  width: min(100%, 680px) !important;
}
#deliverables-filters .deliverables-filter-chip {
  border-radius: 10px !important;
  min-height: 42px !important;
  border-color: #cdd6dc !important;
  background: #edf2f4 !important;
  color: #344052 !important;
  font-weight: 700 !important;
}
#deliverables-filters .deliverables-filter-chip.bg-cyan-500,
#deliverables-filters .deliverables-filter-chip.bg-cyan-700 {
  background: var(--co-cyan) !important;
  color: #fff !important;
  border-color: var(--co-cyan) !important;
}
#deliverables-groups {
  background: var(--co-graphite) !important;
  border: 1px solid rgba(0,166,189,.16) !important;
  border-radius: 18px !important;
  padding: 1.75rem !important;
  box-shadow: 0 16px 40px rgba(47,59,77,.09) !important;
}
#deliverables-groups [data-group] > .flex h3,
#deliverables-groups [data-group] > .flex p {
  color: #fff !important;
}
#deliverables-groups .deliverable-card {
  background: var(--co-graphite-deep) !important;
  border-color: rgba(255,255,255,.13) !important;
  box-shadow: none !important;
}
#deliverables-groups .deliverable-card h4,
#deliverables-groups .deliverable-card p {
  color: #fff !important;
}

/* Deliverables quality section also becomes a light continuation with two dark cards */
body:has(#deliverables-groups) main > section:nth-of-type(3) {
  background: var(--co-page) !important;
}
body:has(#deliverables-groups) main > section:nth-of-type(3) .bg-gradient-to-br,
body:has(#deliverables-groups) main > section:nth-of-type(3) .bg-slate-900 {
  background: var(--co-graphite) !important;
  border-color: rgba(0,166,189,.16) !important;
}
body:has(#deliverables-groups) main > section:nth-of-type(3) h2,
body:has(#deliverables-groups) main > section:nth-of-type(3) h4,
body:has(#deliverables-groups) main > section:nth-of-type(3) p,
body:has(#deliverables-groups) main > section:nth-of-type(3) li,
body:has(#deliverables-groups) main > section:nth-of-type(3) span {
  color: #fff !important;
}

/* Footer social icon buttons */
footer .social-mark {
  display: none !important;
}
footer .co-social-icon {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  color: #eef5f7;
  transition: transform .25s ease, color .25s ease;
}
footer a:hover .co-social-icon {
  color: #263244;
  transform: translateY(-1px) scale(1.06);
}
footer .co-x-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  color: #eef5f7;
}
footer a:hover .co-x-icon {
  color: #263244;
}

/* Calmer homepage video presentation */
#hero .hero-background-video {
  filter: saturate(.44) contrast(.78) brightness(1.12) blur(.25px) !important;
  transform: scale(1.018);
}
#hero > .absolute.inset-0.z-0 > .absolute.inset-0 {
  background: linear-gradient(135deg,
    rgba(243,246,247,.88) 0%,
    rgba(234,239,241,.86) 48%,
    rgba(220,228,232,.82) 100%) !important;
}

@media (max-width: 768px) {
  #deliverables-filters { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  #deliverables-groups { padding: 1.1rem !important; }
  .impact-page-section > .container > .max-w-4xl { padding: 1.1rem !important; }
}

/* =========================================================
   2026-08 — Unified active nav + Services-style subpages
   ========================================================= */

/* Persistent navigation focus / active state */
.nav-link[aria-current="page"],
.nav-link.is-active,
.mobile-nav-link[aria-current="page"],
.mobile-nav-link.is-active {
  color: var(--co-cyan) !important;
  font-weight: 800 !important;
}
.nav-link[aria-current="page"]::after,
.nav-link.is-active::after,
.mobile-nav-link[aria-current="page"]::after,
.mobile-nav-link.is-active::after {
  width: 100% !important;
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

/* Process page — same visual language as Services */
body:has(#process-grid) .process-overview-section {
  background: var(--co-page) !important;
  padding-top: 3.5rem !important;
  padding-bottom: 4.5rem !important;
}
body:has(#process-grid) .process-primary-panel {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem;
  border-radius: 18px;
  background: var(--co-graphite) !important;
  border: 1px solid rgba(0,166,189,.16);
  box-shadow: 0 18px 42px rgba(47,59,77,.10);
}
body:has(#process-grid) .process-primary-panel .process-group + .process-group {
  margin-top: 2.25rem;
}
body:has(#process-grid) .process-primary-panel .process-card {
  background: var(--co-graphite-deep) !important;
  border-color: rgba(255,255,255,.13) !important;
  box-shadow: none !important;
}
body:has(#process-grid) .process-primary-panel .process-card h3,
body:has(#process-grid) .process-primary-panel .process-card p {
  color: #fff !important;
}
body:has(#process-grid) #process-page {
  background: var(--co-graphite) !important;
  border-top: 1px solid rgba(0,166,189,.18);
}
body:has(#process-grid) #process-page .bg-slate-950,
body:has(#process-grid) #process-page .bg-slate-900 {
  background: var(--co-graphite-deep) !important;
  border-color: rgba(255,255,255,.13) !important;
}
body:has(#process-grid) #process-page h2,
body:has(#process-grid) #process-page h3,
body:has(#process-grid) #process-page p,
body:has(#process-grid) #process-page li,
body:has(#process-grid) #process-page span:not(.text-cyan-300):not(.text-cyan-400) {
  color: #fff !important;
}

/* Impact page — light overview + contained dark panel + dark secondary section */
body:has(#impact-grid) .impact-overview-section {
  background: var(--co-page) !important;
  padding-top: 3.5rem !important;
  padding-bottom: 4.5rem !important;
}
body:has(#impact-grid) .impact-primary-panel {
  padding: 2rem;
  border-radius: 18px;
  background: var(--co-graphite) !important;
  border: 1px solid rgba(0,166,189,.16);
  box-shadow: 0 18px 42px rgba(47,59,77,.10);
}
body:has(#impact-grid) .impact-primary-panel > .max-w-6xl {
  max-width: none !important;
  margin: 0 0 1.5rem 0 !important;
}
body:has(#impact-grid) .impact-primary-panel .impact-intro-panel {
  background: var(--co-graphite-deep) !important;
  border-color: rgba(255,255,255,.13) !important;
  box-shadow: none !important;
}
body:has(#impact-grid) .impact-primary-panel #impact-grid {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
body:has(#impact-grid) .impact-primary-panel #impact-grid > * {
  background: transparent !important;
}
body:has(#impact-grid) .impact-primary-panel #impact-grid .impact-card {
  background: var(--co-graphite-deep) !important;
  border-color: rgba(255,255,255,.13) !important;
  box-shadow: none !important;
}
body:has(#impact-grid) .impact-primary-panel #impact-grid h3,
body:has(#impact-grid) .impact-primary-panel #impact-grid p,
body:has(#impact-grid) .impact-primary-panel #impact-grid span,
body:has(#impact-grid) .impact-primary-panel #impact-grid div:not(.text-cyan-400) {
  color: #fff !important;
}
body:has(#impact-grid) .impact-detail-section {
  background: var(--co-graphite) !important;
  border-top: 1px solid rgba(0,166,189,.18);
}
body:has(#impact-grid) .impact-detail-section .bg-slate-900,
body:has(#impact-grid) .impact-detail-section .bg-gradient-to-r {
  background: var(--co-graphite-deep) !important;
  border-color: rgba(255,255,255,.13) !important;
}
body:has(#impact-grid) .impact-detail-section h2,
body:has(#impact-grid) .impact-detail-section h3,
body:has(#impact-grid) .impact-detail-section p,
body:has(#impact-grid) .impact-detail-section li,
body:has(#impact-grid) .impact-detail-section span:not(.text-cyan-300):not(.text-cyan-400) {
  color: #fff !important;
}

@media (max-width: 768px) {
  body:has(#process-grid) .process-primary-panel,
  body:has(#impact-grid) .impact-primary-panel {
    padding: 1.1rem;
    border-radius: 14px;
  }
}


/* =========================================================
   Deliverables selector + FAQ spacing refinement
   ========================================================= */
body:has(#deliverables-groups) .deliverables-selector {
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(52,64,82,.10) !important;
  border-radius: 16px !important;
  padding: 14px 16px 16px !important;
  box-shadow: 0 12px 30px rgba(47,59,77,.06) !important;
}
body:has(#deliverables-groups) .deliverables-page-filter-title {
  margin: 0 0 10px 2px !important;
  color: #667085 !important;
  font-size: .72rem !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  letter-spacing: .075em !important;
}
#deliverables-filters {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: .55rem !important;
  width: 100% !important;
  max-width: none !important;
}
#deliverables-filters .deliverables-filter-chip {
  width: 100% !important;
  min-height: 42px !important;
  padding: .65rem .8rem !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5dc !important;
  background: #edf2f4 !important;
  color: #344052 !important;
  font-size: .82rem !important;
  font-weight: 750 !important;
  box-shadow: none !important;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease !important;
}
#deliverables-filters .deliverables-filter-chip:hover {
  border-color: rgba(0,168,194,.45) !important;
  background: #f5f9fa !important;
  transform: translateY(-1px);
}
#deliverables-filters .deliverables-filter-chip.is-active {
  background: var(--co-cyan) !important;
  color: #fff !important;
  border-color: var(--co-cyan) !important;
}
body:has(#deliverables-groups) .deliverables-page-filter-sub {
  margin: 12px 2px 0 !important;
  color: var(--co-muted) !important;
  font-size: .9rem !important;
  line-height: 1.55 !important;
}

/* More breathing room between the FAQ divider and answer copy, globally. */
.faq-smooth-item.is-open .faq-smooth-answer-inner {
  padding-top: 14px !important;
  padding-bottom: 20px !important;
}
.faq-smooth-item.is-open .faq-smooth-question {
  padding-bottom: 16px !important;
}

@media (max-width: 700px) {
  #deliverables-filters { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .faq-smooth-item.is-open .faq-smooth-answer-inner { padding-top: 12px !important; }
}


/* ===== Final readability / social / marquee tune ===== */
/* FAQ answers: larger, calmer, easier to scan on every page. */
.faq-smooth-answer-inner {
  font-size: 16px !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
  color: #f3f6f8 !important;
}
.faq-smooth-question {
  font-size: 16px !important;
  line-height: 1.45 !important;
}
.faq-smooth-item.is-open .faq-smooth-answer-inner {
  padding-top: 18px !important;
  padding-bottom: 24px !important;
}

/* Footer social icons: explicit inline SVGs, always visible. */
.co-social-link {
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: rgba(31,41,55,.42) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #ffffff !important;
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease !important;
}
.co-social-link:hover {
  background: #00a8c2 !important;
  border-color: #00a8c2 !important;
  transform: translateY(-2px);
}
.co-social-svg {
  width: 19px !important;
  height: 19px !important;
  display: block !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
.co-social-svg.stroke-only { fill: none !important; stroke-width: 2 !important; }

/* Hero service marquee: move further upward without competing with CTA. */
.service-marquee { bottom: 150px !important; }
.service-chip { padding: 11px 20px !important; font-size: 14px !important; }
@media (max-width: 900px) {
  .service-marquee { bottom: 92px !important; }
}
@media (max-width: 640px) {
  .service-marquee { bottom: 66px !important; }
  .faq-smooth-answer-inner { font-size: 15px !important; line-height: 1.7 !important; }
}


/* ===== Training subpage + impact refinements ===== */
#impact .impact-intro-text,
#impact .impact-intro-text strong,
#impact .impact-intro-text .text-cyan-400,
#impact .impact-intro-text .text-white { color:#fff !important; }

.impact-faq-section { background:#fff !important; border-top:1px solid rgba(0,168,194,.12); }
#impact-faq .faq-smooth-item { background:#3b4a5f !important; border-color:rgba(0,168,194,.18) !important; }
#impact-faq .faq-smooth-item.is-open { border-color:rgba(0,168,194,.52) !important; box-shadow:0 16px 36px rgba(52,64,84,.12); }
#impact-faq .faq-smooth-question span:first-child,
#impact-faq .faq-smooth-answer-inner { color:#fff !important; }

.training-page-section { background:#edf1f2 !important; }
.training-page-section .training-card { background:#3b4a5f !important; border-color:#52647a !important; }
.training-benefit-card {
  background:#fff; border:1px solid #d7e0e5; border-radius:1rem; padding:1.35rem;
  box-shadow:0 14px 34px rgba(52,64,84,.07); color:#344054;
}
.training-benefit-card svg { width:1.45rem; height:1.45rem; color:#00a8c2; margin-bottom:.8rem; }
.training-benefit-card strong { display:block; font-size:1.05rem; color:#344054; margin-bottom:.35rem; }
.training-benefit-card span { display:block; color:#667085; line-height:1.55; }

/* ===== Final footer brand + training-card readability ===== */
/* Footer brand: keep Codex white and Operation cyan on every page. */
footer .brand > div:nth-child(2) > div:first-child {
  color: #ffffff !important;
}
footer .brand > div:nth-child(2) > div:first-child > span {
  color: var(--co-cyan) !important;
}

/* Training cards: all descriptive copy on dark cards must stay readable. */
.training-card > p,
.training-card .grid .text-slate-300,
.training-card .grid .text-slate-300 > span,
.training-card .accordion-content li > span,
.training-page-section .training-card > p,
.training-page-section .training-card .grid .text-slate-300,
.training-page-section .training-card .grid .text-slate-300 > span,
.training-page-section .training-card .accordion-content li > span {
  color: #f2f5f7 !important;
}

/* Keep titles crisp white; cyan remains the accent. */
.training-card h3,
.training-page-section .training-card h3 {
  color: #ffffff !important;
}

/* Keep the price badge readable: dark ink on cyan badge. */
.training-card span.bg-cyan-500,
.training-page-section .training-card span.bg-cyan-500 {
  color: #071821 !important;
}


/* Process selector: mirrors the Services selector for a consistent subpage UI. */
.process-detail-tabs .service-tabs-row { grid-template-columns: repeat(3,minmax(0,1fr)); }
.process-detail-tabs .service-detail-tab { min-height: 46px; }
.process-detail-tabs + .max-w-6xl .process-group { animation: servicePanelIn .42s cubic-bezier(.22,1,.36,1); }
@media (max-width: 760px) {
  .process-detail-tabs .service-tabs-row { grid-template-columns: 1fr; }
}


/* =========================================================
   Process selector parity + detailed pricing catalog
   ========================================================= */
/* Process selector uses the exact same shell/button language as Services. */
.process-detail-tabs .service-tabs-shell {
  background: rgba(248,250,251,.94) !important;
  border: 1px solid rgba(52,64,84,.10) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  box-shadow: 0 12px 32px rgba(52,64,84,.08) !important;
}
.process-detail-tabs .service-tabs-label {
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  margin: 0 4px 10px !important;
}
.process-detail-tabs .service-detail-tab {
  min-height: 46px !important;
  border: 1px solid #d4dde3 !important;
  background: #eef3f5 !important;
  color: #344054 !important;
  border-radius: 11px !important;
  font-weight: 750 !important;
}
.process-detail-tabs .service-detail-tab:hover {
  border-color: rgba(0,168,194,.45) !important;
  background: #f8fbfc !important;
}
.process-detail-tabs .service-detail-tab.is-active {
  background: #00a8c2 !important;
  color: #fff !important;
  border-color: #00a8c2 !important;
  box-shadow: 0 8px 20px rgba(0,168,194,.20) !important;
}

/* Deliverables now has three focused tabs after removing “Alle”. */
#deliverables-filters { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }

.co-price-catalog {
  background: #edf1f2;
  color: #344054;
  border-top: 1px solid rgba(0,168,194,.18);
}
.co-price-catalog-head { max-width: 780px; margin: 0 auto 34px; text-align: center; }
.co-price-catalog-head.compact { margin: 0 0 24px; text-align: left; }
.co-price-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  color: #008fa7; background: #e2f5f7; border: 1px solid rgba(0,168,194,.28);
  font-size: 12px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase;
}
.co-price-catalog-head h2, .co-why-us h2 { color:#344054; font-size:clamp(1.8rem,3vw,2.5rem); font-weight:850; margin-top:12px; }
.co-price-catalog-head p, .co-why-us p { color:#667085; line-height:1.7; margin-top:10px; }
.co-price-service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.co-price-service-card {
  background:#3b485c; border:1px solid rgba(0,168,194,.22); border-radius:18px;
  padding:24px; box-shadow:0 18px 42px rgba(38,50,66,.10); color:#fff;
}
.co-price-wide { grid-column:1/-1; }
.co-price-service-title { display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; }
.co-price-service-title h3 { color:#fff; font-size:1.15rem; font-weight:800; margin:0 0 7px; }
.co-price-service-title p { color:#e4eaf0; line-height:1.58; font-size:.92rem; }
.co-price-icon { width:44px; height:44px; flex:0 0 44px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(0,168,194,.13); border:1px solid rgba(0,168,194,.26); color:#12bed2; }
.co-price-icon svg { width:22px; height:22px; }
.co-tier-list { display:grid; gap:10px; }
.co-tier-list-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.co-tier {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:14px 15px; border-radius:12px; background:#344054; border:1px solid rgba(255,255,255,.12);
}
.co-tier.is-featured { border-color:rgba(0,184,212,.55); box-shadow:inset 3px 0 0 #00a8c2; }
.co-tier div { min-width:0; }
.co-tier strong { display:block; color:#fff; font-size:.92rem; margin-bottom:4px; }
.co-tier span { display:block; color:#dce4eb; font-size:.78rem; line-height:1.5; }
.co-tier b { color:#fff; font-size:1rem; white-space:nowrap; background:#071821; border:1px solid rgba(0,168,194,.28); padding:8px 11px; border-radius:999px; }
.co-price-category-block { margin-top:54px; }
.co-simple-service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.co-simple-service-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.co-simple-service-grid article {
  background:#fff; border:1px solid #d7e0e5; border-radius:16px; padding:20px;
  box-shadow:0 12px 28px rgba(52,64,84,.06);
}
.co-simple-service-grid article > svg { width:24px; height:24px; color:#00a8c2; margin-bottom:16px; }
.co-simple-service-grid h3 { color:#344054; font-weight:800; line-height:1.35; margin-bottom:8px; }
.co-simple-service-grid p { color:#667085; font-size:.9rem; line-height:1.55; min-height:2.8em; }
.co-simple-service-grid strong { display:inline-block; color:#fff; background:#344054; border-radius:999px; padding:7px 11px; margin-top:14px; font-size:.9rem; }
.co-why-us {
  margin-top:54px; display:grid; grid-template-columns:.9fr 1.1fr; gap:34px;
  background:linear-gradient(135deg,#f7fbfc,#e9eef5); border:1px solid rgba(0,168,194,.22);
  border-radius:18px; padding:30px;
}
.co-why-us ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 18px; align-content:center; }
.co-why-us li { display:flex; gap:9px; align-items:flex-start; color:#344054; font-weight:650; }
.co-why-us li svg { width:18px; height:18px; color:#00a8c2; flex:0 0 18px; margin-top:2px; }

@media (max-width: 900px) {
  .co-price-service-grid { grid-template-columns:1fr; }
  .co-price-wide { grid-column:auto; }
  .co-tier-list-3 { grid-template-columns:1fr; }
  .co-simple-service-grid, .co-simple-service-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .co-why-us { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  #deliverables-filters { grid-template-columns:1fr !important; }
  .co-simple-service-grid, .co-simple-service-grid.two { grid-template-columns:1fr; }
  .co-tier { align-items:flex-start; flex-direction:column; }
  .co-why-us ul { grid-template-columns:1fr; }
  .co-price-service-card { padding:18px; }
}

/* =========================================================
   PRICES PAGE — interactive motion & category navigation
   ========================================================= */
.co-price-catalog { position: relative; overflow: clip; }
.co-price-catalog::before,
.co-price-catalog::after {
  content:""; position:absolute; pointer-events:none; border-radius:999px; filter:blur(70px); opacity:.28;
}
.co-price-catalog::before { width:360px; height:360px; top:120px; left:-180px; background:rgba(0,168,194,.15); }
.co-price-catalog::after { width:420px; height:420px; top:42%; right:-230px; background:rgba(99,102,241,.10); }
.co-price-catalog > .container { position:relative; z-index:1; }

.co-price-nav {
  position: sticky; top: 82px; z-index: 22;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
  max-width:760px; margin:0 auto 30px; padding:9px;
  background:rgba(255,255,255,.88); border:1px solid #d9e3e8; border-radius:16px;
  box-shadow:0 12px 34px rgba(52,64,84,.09);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.co-price-nav-btn {
  min-height:48px; display:flex; align-items:center; justify-content:center; gap:9px;
  border:1px solid #cfdae0; border-radius:11px; background:#eef3f5; color:#344054;
  font-weight:800; font-size:.9rem; cursor:pointer;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, background .28s ease, color .28s ease, border-color .28s ease;
}
.co-price-nav-btn svg { width:18px; height:18px; transition:transform .28s ease; }
.co-price-nav-btn:hover { transform:translateY(-2px); border-color:rgba(0,168,194,.42); box-shadow:0 8px 18px rgba(52,64,84,.08); }
.co-price-nav-btn:hover svg { transform:scale(1.12) rotate(-4deg); }
.co-price-nav-btn.is-active { background:#00a8c2; color:#fff; border-color:#00a8c2; box-shadow:0 9px 22px rgba(0,168,194,.22); }

.co-price-service-card {
  position:relative; overflow:hidden;
  transform:perspective(1000px) rotateX(var(--co-tilt-x,0deg)) rotateY(var(--co-tilt-y,0deg));
  transform-style:preserve-3d;
  transition:transform .26s ease, box-shadow .32s ease, border-color .32s ease;
}
.co-price-service-card::after {
  content:""; position:absolute; inset:-45%; pointer-events:none; opacity:0;
  background:linear-gradient(120deg,transparent 38%,rgba(255,255,255,.085) 49%,transparent 60%);
  transform:translateX(-45%) rotate(8deg); transition:opacity .25s ease;
}
.co-price-service-card:hover { border-color:rgba(0,184,212,.52); box-shadow:0 24px 52px rgba(38,50,66,.17); }
.co-price-service-card:hover::after { opacity:1; animation:coPriceSheen 1.05s ease forwards; }
@keyframes coPriceSheen { from{transform:translateX(-42%) rotate(8deg)} to{transform:translateX(42%) rotate(8deg)} }
.co-price-service-card > * { position:relative; z-index:1; }

.co-tier {
  cursor:pointer; position:relative;
  transition:transform .24s cubic-bezier(.2,.8,.2,1), border-color .24s ease, background .24s ease, box-shadow .24s ease;
}
.co-tier:hover { transform:translateX(4px); border-color:rgba(0,184,212,.42); background:#38465a; }
.co-tier:focus-visible { outline:3px solid rgba(0,168,194,.28); outline-offset:3px; }
.co-tier.is-selected {
  background:linear-gradient(135deg,#344054,#3c4e62); border-color:#00b8d4;
  box-shadow:inset 4px 0 0 #00b8d4,0 10px 24px rgba(0,168,194,.11);
  transform:translateX(5px);
}
.co-tier.is-selected::before {
  content:"Ausgewählt"; position:absolute; top:-9px; right:14px;
  padding:3px 8px; border-radius:999px; background:#00a8c2; color:#fff;
  font-size:.62rem; font-weight:850; letter-spacing:.03em;
}
.co-tier b { transition:transform .24s ease, box-shadow .24s ease, background .24s ease; }
.co-tier:hover b,.co-tier.is-selected b { transform:scale(1.04); background:#05151e; box-shadow:0 6px 18px rgba(0,0,0,.17); }

.co-simple-service-grid article { transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease; }
.co-simple-service-grid article:hover { transform:translateY(-6px); border-color:rgba(0,168,194,.38); box-shadow:0 20px 40px rgba(52,64,84,.12); }
.co-simple-service-grid article > svg { transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.co-simple-service-grid article:hover > svg { transform:scale(1.13) rotate(-6deg); }
.co-simple-service-grid strong { transition:transform .25s ease,background .25s ease; }
.co-simple-service-grid article:hover strong { transform:translateY(-2px); background:#2f3b4d; }

.co-why-us { transition:transform .3s ease, box-shadow .3s ease; }
.co-why-us:hover { transform:translateY(-3px); box-shadow:0 18px 42px rgba(52,64,84,.09); }
.co-why-us li { transition:transform .22s ease,color .22s ease; }
.co-why-us li:hover { transform:translateX(4px); color:#243247; }

.co-reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease var(--co-reveal-delay,0ms), transform .7s cubic-bezier(.2,.8,.2,1) var(--co-reveal-delay,0ms); }
.co-reveal.is-visible { opacity:1; transform:translateY(0); }

@media (max-width:900px) {
  .co-price-nav { top:74px; }
}
@media (max-width:640px) {
  .co-price-nav { position:relative; top:auto; grid-template-columns:1fr; margin-bottom:24px; }
  .co-price-nav-btn { justify-content:flex-start; padding-inline:16px; }
  .co-price-service-card { transform:none !important; }
  .co-tier:hover,.co-tier.is-selected { transform:none; }
}
@media (prefers-reduced-motion:reduce) {
  .co-reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  .co-price-service-card,.co-price-nav-btn,.co-tier,.co-simple-service-grid article,.co-why-us { transition:none !important; transform:none !important; animation:none !important; }
  .co-price-service-card::after { display:none; }
}


/* =========================================================
   2026-08 final pass: Impact tabs, white price catalog, AGB,
   and slower FAQ motion.
   ========================================================= */

/* Impact selector mirrors Services / Process exactly. */
.impact-detail-tabs .service-tabs-row { grid-template-columns: repeat(3,minmax(0,1fr)); }
.impact-detail-tabs .service-tabs-shell {
  background: rgba(248,250,251,.96) !important;
  border: 1px solid rgba(52,64,84,.10) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  box-shadow: 0 12px 32px rgba(52,64,84,.08) !important;
}
.impact-detail-tabs .service-tabs-label {
  color:#667085 !important; font-size:12px !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.06em !important; margin:0 4px 10px !important;
}
.impact-detail-tabs .service-detail-tab {
  min-height:46px !important; border:1px solid #d4dde3 !important; background:#eef3f5 !important;
  color:#344054 !important; border-radius:11px !important; font-weight:750 !important;
}
.impact-detail-tabs .service-detail-tab:hover { border-color:rgba(0,168,194,.45) !important; background:#f8fbfc !important; }
.impact-detail-tabs .service-detail-tab.is-active { background:#00a8c2 !important; color:#fff !important; border-color:#00a8c2 !important; box-shadow:0 8px 20px rgba(0,168,194,.20) !important; }
.impact-active-group { animation:servicePanelIn .48s cubic-bezier(.22,1,.36,1); }
@media (max-width:760px){ .impact-detail-tabs .service-tabs-row{grid-template-columns:1fr;} }

/* Cybersecurity pricing cards now use the same calm white visual language as IT / programming. */
#price-cyber { scroll-margin-top: 140px; }
.co-price-service-grid .co-price-service-card {
  background:#fff !important; color:#344054 !important; border:1px solid #d4dde3 !important;
  box-shadow:0 14px 34px rgba(52,64,84,.08) !important;
}
.co-price-service-grid .co-price-service-card h3,
.co-price-service-grid .co-price-service-card h4,
.co-price-service-grid .co-price-service-card strong { color:#344054 !important; }
.co-price-service-grid .co-price-service-card p,
.co-price-service-grid .co-price-service-card li,
.co-price-service-grid .co-price-service-card span:not(.co-tier-price) { color:#667085 !important; }
.co-price-service-grid .co-service-icon { background:#e7f6f8 !important; border-color:#b6e5eb !important; color:#009fb7 !important; }
.co-price-service-grid .co-tier {
  background:#f5f8f9 !important; border-color:#d8e1e5 !important; color:#344054 !important;
}
.co-price-service-grid .co-tier:hover,
.co-price-service-grid .co-tier.is-selected { border-color:#00a8c2 !important; background:#eefbfc !important; box-shadow:0 8px 20px rgba(0,168,194,.10) !important; }
.co-price-service-grid .co-tier-price { background:#344054 !important; color:#fff !important; }

/* FAQ: slower, softer open / close globally. */
.faq-smooth-item { transition:border-color .48s ease,box-shadow .48s ease,transform .48s ease,background-color .48s ease !important; }
.faq-smooth-answer {
  transition:grid-template-rows .92s cubic-bezier(.22,1,.36,1),opacity .58s ease,visibility 0s linear .92s !important;
}
.faq-smooth-item.is-open .faq-smooth-answer {
  transition:grid-template-rows .92s cubic-bezier(.22,1,.36,1),opacity .58s ease .10s,visibility 0s linear 0s !important;
}
.faq-smooth-icon,.faq-smooth-icon-wrap { transition:transform .78s cubic-bezier(.22,1,.36,1),background-color .42s ease,border-color .42s ease !important; }
.faq-smooth-answer-inner { font-size:1rem !important; line-height:1.75 !important; padding-top:.5rem !important; }

/* AGB page */
.agb-shell { max-width:1000px; margin:0 auto; background:#fff !important; border:1px solid #d8e1e5 !important; border-radius:24px !important; padding:clamp(24px,4vw,52px) !important; box-shadow:0 18px 48px rgba(52,64,84,.09) !important; }
.agb-meta-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:26px; }
.agb-meta-grid>div { background:#eef6f8; border:1px solid #d7e7eb; border-radius:14px; padding:16px; text-align:center; }
.agb-meta-grid span { display:block; color:#00a8c2; text-transform:uppercase; font-size:.72rem; font-weight:800; letter-spacing:.08em; margin-bottom:5px; }
.agb-meta-grid strong { color:#344054; font-size:.95rem; }
.agb-priority-note { display:block; grid-template-columns:auto 1fr; gap:14px; align-items:start; background:#f4f7f8; border-left:3px solid #00a8c2; border-radius:12px; padding:18px 20px; margin-bottom:34px; }
.agb-priority-note strong { color:#00a8c2; text-transform:uppercase; font-size:.78rem; letter-spacing:.05em; }
.agb-priority-note p { margin:0; color:#475467; line-height:1.65; }
.agb-article { display:grid; gap:0px; }
.agb-article section { padding-bottom:26px; padding-top:26px; border-bottom:1px solid #e2e8ec; }
.agb-article section:last-child { border-bottom:0; }
.agb-article h2 { color:#263448 !important; font-size:clamp(1.18rem,2vw,1.5rem); font-weight:800; margin:0 0 12px; }
.agb-article p { color:#475467 !important; font-size:1rem; line-height:1.78; margin:0 0 10px; }
.agb-download-card { margin-top:38px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px; background:linear-gradient(135deg,#e8f7f9,#eef0fb); border:1px solid rgba(0,168,194,.28); border-radius:18px; }
.agb-download-kicker { color:#00a8c2; font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; }
.agb-download-card h2 { color:#344054 !important; font-size:1.4rem; font-weight:800; margin:4px 0; }
.agb-download-card p { color:#667085 !important; margin:0; }
.agb-download-btn { display:inline-flex; align-items:center; gap:9px; white-space:nowrap; background:#00a8c2; color:#071821 !important; padding:13px 18px; border-radius:11px; font-weight:800; box-shadow:0 8px 20px rgba(0,168,194,.18); transition:transform .25s ease,box-shadow .25s ease,background .25s ease; }
.agb-download-btn:hover { background:#15b6cc; transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,168,194,.24); }
.agb-download-btn svg { width:18px; height:18px; }
body:has(.agb-shell) main > section:last-of-type { background:#edf1f2 !important; }
@media(max-width:720px){.agb-meta-grid{grid-template-columns:1fr}.agb-priority-note{grid-template-columns:1fr}.agb-download-card{flex-direction:column;align-items:flex-start}.agb-download-btn{width:100%;justify-content:center}}


/* ===== Legal pages readability: white copy on dark legal cards ===== */
body[data-legal] .legal-content,
body[data-legal] .legal-content p,
body[data-legal] .legal-content li,
body[data-legal] .legal-content span:not(.text-cyan-300):not(.text-cyan-400),
body[data-legal] .legal-content strong,
body[data-legal] .legal-content h1,
body[data-legal] .legal-content h2,
body[data-legal] .legal-content h3,
body[data-legal] .agb-article,
body[data-legal] .agb-article p,
body[data-legal] .agb-article li,
body[data-legal] .agb-article strong,
body[data-legal] .agb-article h2,
body[data-legal] .agb-priority-note p,
body[data-legal] .agb-download-card h2,
body[data-legal] .agb-download-card p {
  color: #ffffff !important;
}
body[data-legal] .legal-content a:not(.agb-download-btn),
body[data-legal] .agb-article a { color: var(--co-cyan) !important; }
body[data-legal] .legal-content .text-slate-300,
body[data-legal] .legal-content .text-slate-400,
body[data-legal] .legal-content .text-slate-500 { color:#ffffff !important; }


/* ===== AGB page visibility fix =====
   The AGB content is static in terms.html and uses a dark legal card so all copy remains readable. */
body[data-legal="terms"] .agb-shell {
  background: #3f4b5d !important;
  border: 1px solid rgba(0,168,194,.24) !important;
  box-shadow: 0 22px 58px rgba(40,52,70,.16) !important;
}
body[data-legal="terms"] .agb-meta-grid > div {
  background: #344054 !important;
  border-color: rgba(255,255,255,.12) !important;
}
body[data-legal="terms"] .agb-meta-grid span { color: var(--co-cyan) !important; }
body[data-legal="terms"] .agb-meta-grid strong { color: #ffffff !important; }
body[data-legal="terms"] .agb-priority-note {
  background: #344054 !important;
  border-left-color: var(--co-cyan) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
body[data-legal="terms"] .agb-priority-note strong { color: var(--co-cyan) !important; }
body[data-legal="terms"] .agb-priority-note p { color: #eef3f7 !important; }
body[data-legal="terms"] .agb-article section { border-bottom-color: rgba(255,255,255,.13) !important; }
body[data-legal="terms"] .agb-article h2 { color: #ffffff !important; }
body[data-legal="terms"] .agb-article p,
body[data-legal="terms"] .agb-article li,
body[data-legal="terms"] .agb-article strong { color: #eef3f7 !important; }
body[data-legal="terms"] .agb-download-card {
  background: linear-gradient(135deg, rgba(0,168,194,.15), rgba(94,92,170,.16)) !important;
  border-color: rgba(0,168,194,.38) !important;
}
body[data-legal="terms"] .agb-download-card h2 { color: #ffffff !important; }
body[data-legal="terms"] .agb-download-card p { color: #e2e8f0 !important; }
body[data-legal="terms"] .agb-download-kicker { color: var(--co-cyan) !important; }
body[data-legal="terms"] .agb-download-btn {
  background: var(--co-cyan) !important;
  color: #071821 !important;
}
body[data-legal="terms"] .legal-content { color: #ffffff !important; }


/* ===== Brand logo sizing + responsive polish ===== */
.co-brand-logo {
  width: 4.5rem !important;
  height: 4.5rem !important;
  max-width: none !important;
  flex: 0 0 4.5rem;
  object-fit: contain;
}
#header nav { min-height: 5.75rem; }
#header .co-brand-wordmark { white-space: nowrap; }

@media (max-width: 1023px) {
  #header nav { padding-top: .65rem !important; padding-bottom: .65rem !important; min-height: 4.5rem; }
  .co-brand-logo { width: 3.5rem !important; height: 3.5rem !important; flex-basis: 3.5rem; }
  .co-brand-wordmark { font-size: 1.05rem !important; }
}

@media (max-width: 640px) {
  #header nav { padding-left: 1rem !important; padding-right: 1rem !important; min-height: 4.125rem; }
  .co-brand-logo { width: 3rem !important; height: 3rem !important; flex-basis: 3rem; border-radius: .65rem !important; }
  .co-brand-wordmark { font-size: .96rem !important; padding-right: 0 !important; }
  #header .flex.items-center.justify-between { gap: .5rem; }
  #mobile-menu { max-height: calc(100vh - 4.25rem); overflow-y: auto; }
  main { overflow-x: clip; }
  .container { width: 100%; }
}

@media (max-width: 390px) {
  .co-brand-logo { width: 2.75rem !important; height: 2.75rem !important; flex-basis: 2.75rem; }
  .co-brand-wordmark { font-size: .88rem !important; }
}

/* =========================================================
   Mobile refinement pass — 2026-08
   ========================================================= */
@media (max-width: 767px) {
  html, body { max-width:100%; overflow-x:hidden; }

  /* Header: compact, balanced brand and touch target */
  #header nav { padding:.55rem .9rem !important; min-height:4.25rem !important; }
  #header .co-brand-logo { width:2.85rem !important; height:2.85rem !important; flex-basis:2.85rem !important; }
  #header .co-brand-wordmark { font-size:.88rem !important; line-height:1.1 !important; }
  #mobile-menu-btn { min-width:2.75rem; min-height:2.75rem; display:inline-flex; align-items:center; justify-content:center; }

  /* Home hero: no collisions between content, CTAs and marquee. */
  #hero {
    min-height:auto !important;
    display:block !important;
    padding-top:4.25rem !important;
    padding-bottom:0 !important;
    overflow:hidden !important;
  }
  #hero > .container {
    padding:3rem 1.15rem 1.35rem !important;
  }
  #hero .max-w-4xl { width:100%; }
  #hero .hero-badge {
    margin:.22rem .15rem !important;
    padding:.5rem .72rem !important;
  }
  #hero .hero-badge span { font-size:.74rem !important; }
  #hero .hero-badge svg { width:1rem !important; height:1rem !important; }
  #hero .hero-title {
    font-size:clamp(2.15rem,12vw,3.15rem) !important;
    line-height:1.02 !important;
    margin:2.1rem 0 2rem !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
  #hero .hero-subtitle {
    font-size:clamp(1.18rem,6vw,1.55rem) !important;
    line-height:1.28 !important;
    margin-bottom:1.15rem !important;
  }
  #hero .hero-description {
    font-size:.96rem !important;
    line-height:1.65 !important;
    margin:0 auto 1.8rem !important;
    max-width:20rem !important;
  }
  #hero .flex.flex-col.sm\:flex-row {
    gap:.75rem !important;
    align-items:stretch !important;
    width:min(100%,19rem) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  #hero .flex.flex-col.sm\:flex-row > a {
    width:100% !important;
    min-height:3.2rem !important;
    justify-content:center !important;
  }

  /* Marquee becomes a calm, dedicated strip below the hero CTAs. */
  #hero .service-marquee {
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:100% !important;
    margin:1rem 0 0 !important;
    padding:.7rem 0 .9rem !important;
    z-index:20 !important;
    background:rgba(237,241,242,.72) !important;
    border-top:1px solid rgba(0,168,194,.12) !important;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent) !important;
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent) !important;
  }
  #hero .service-chip { padding:.55rem .82rem !important; font-size:.72rem !important; }
  #hero .service-marquee-group { gap:.55rem !important; padding-right:.55rem !important; }

  /* Footer: centered and visually grouped on phones. */
  footer { text-align:center !important; }
  footer .container { padding-left:1.25rem !important; padding-right:1.25rem !important; }
  footer .grid.md\:grid-cols-3 { grid-template-columns:1fr !important; gap:2.5rem !important; }
  footer .brand,
  footer .flex.items-center.space-x-2.mb-4.brand { justify-content:center !important; }
  footer .brand > div { text-align:left !important; }
  footer .footer-description,
  footer .footer-services,
  footer .footer-contact { text-align:center !important; margin-left:auto !important; margin-right:auto !important; max-width:19rem !important; }
  footer .footer-contact { padding-top:1.25rem !important; }
  footer ul { text-align:center !important; }
  footer .flex.space-x-4[role="list"] {
    justify-content:center !important;
    gap:.75rem !important;
  }
  footer .co-social-link {
    margin-left:0 !important;
    width:2.8rem !important;
    height:2.8rem !important;
  }
  footer .border-t { margin-top:2.4rem !important; }

  /* Legal/subpage hero titles: prevent long German titles clipping. */
  body[data-legal] main > section:first-of-type,
  body[data-legal] main > section:nth-of-type(2) { overflow:hidden !important; }
  body[data-legal] .legal-title,
  body[data-legal="terms"] .legal-title {
    font-size:clamp(1.85rem,9.2vw,2.55rem) !important;
    line-height:1.08 !important;
    max-width:100% !important;
    padding:0 .35rem !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    hyphens:auto !important;
  }
  body[data-legal] .legal-title + p { font-size:.95rem !important; line-height:1.55 !important; }
  body[data-legal] .agb-shell { border-radius:1rem !important; padding:1.15rem !important; }

  /* General subpage breathing room and overflow protection. */
  main section .container { max-width:100% !important; }
  main h1, main h2, main h3 { overflow-wrap:break-word; }
  .service-tabs-shell { padding:.7rem !important; }
  .service-tabs-row { gap:.5rem !important; }
  .service-detail-tab { min-height:3rem !important; font-size:.9rem !important; }
}

@media (max-width: 380px) {
  #header .co-brand-logo { width:2.6rem !important; height:2.6rem !important; flex-basis:2.6rem !important; }
  #header .co-brand-wordmark { font-size:.8rem !important; }
  #hero .hero-title { font-size:2.05rem !important; }
  footer .brand { flex-direction:column !important; gap:.55rem !important; }
  footer .brand > div { text-align:center !important; }
  body[data-legal] .legal-title { font-size:1.8rem !important; }
}

/* =========================================
   MOBILE HERO COMPACT FLOW FIX
   Prevents the hero from reserving viewport height and wasting space.
========================================= */
@media (max-width: 767px) {
  #hero {
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    padding-top: 4.25rem !important;
    padding-bottom: 0 !important;
  }

  #hero > .container {
    position: relative !important;
    z-index: 10 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 2rem 1rem 1rem !important;
  }

  #hero .max-w-4xl {
    width: 100% !important;
    max-width: 23rem !important;
    margin: 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #hero .hero-title,
  #hero .hero-subtitle,
  #hero .hero-description {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #hero .hero-title {
    margin: 1.35rem 0 1rem !important;
    font-size: clamp(2.1rem, 10.5vw, 2.85rem) !important;
    line-height: 1.04 !important;
  }

  #hero .hero-subtitle {
    margin: 0 auto .8rem !important;
    font-size: clamp(1.05rem, 5.3vw, 1.35rem) !important;
    line-height: 1.3 !important;
  }

  #hero .hero-description {
    margin: 0 auto 1.35rem !important;
    max-width: 20rem !important;
    font-size: .93rem !important;
    line-height: 1.55 !important;
  }

  #hero .flex.flex-col.sm\:flex-row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #hero .service-marquee {
    position: relative !important;
    inset: auto !important;
    bottom: auto !important;
    margin-top: 1rem !important;
    padding: .65rem 0 .75rem !important;
  }

  #hero .absolute.top-1\/4,
  #hero .absolute.bottom-1\/4 {
    display: none !important;
  }
}

@media (max-width: 420px) {
  #hero > .container { padding-top: 1.55rem !important; }
  #hero .hero-badge { padding: .44rem .62rem !important; margin: .16rem .1rem !important; }
  #hero .hero-badge span { font-size: .7rem !important; }
  #hero .hero-title { margin-top: 1.05rem !important; }
  #hero .service-chip { font-size: .69rem !important; padding: .5rem .72rem !important; }
}

/* =========================================
   MOBILE HERO — TRUE FULL VIEWPORT
   Keeps the whole hero inside the phone viewport and adapts to dynamic browser UI.
========================================= */
@media (max-width: 767px) {
  #hero {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 4.25rem 0 3.6rem !important;
    overflow: hidden !important;
  }

  #hero > .container {
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: .65rem 1rem .35rem !important;
  }

  #hero .max-w-4xl {
    width: 100% !important;
    max-width: 24rem !important;
    margin: 0 auto !important;
  }

  #hero .hero-badge {
    margin: .12rem .08rem !important;
    padding: .46rem .68rem !important;
  }

  #hero .hero-title {
    margin: clamp(.8rem, 2.6vh, 1.35rem) 0 clamp(.55rem, 1.8vh, .9rem) !important;
    font-size: clamp(2rem, 10vw, 2.75rem) !important;
    line-height: 1.02 !important;
  }

  #hero .hero-subtitle {
    margin: 0 auto clamp(.45rem, 1.4vh, .75rem) !important;
    font-size: clamp(1rem, 5.2vw, 1.3rem) !important;
    line-height: 1.27 !important;
  }

  #hero .hero-description {
    margin: 0 auto clamp(.75rem, 2vh, 1.2rem) !important;
    max-width: 21rem !important;
    font-size: clamp(.78rem, 3.6vw, .92rem) !important;
    line-height: 1.48 !important;
  }

  #hero .flex.flex-col.sm\:flex-row {
    gap: .65rem !important;
  }

  #hero .flex.flex-col.sm\:flex-row > a {
    width: min(100%, 19rem) !important;
    min-height: 3.2rem !important;
    padding: .78rem 1rem !important;
    font-size: 1rem !important;
  }

  #hero .service-marquee {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: .5rem 0 .55rem !important;
    overflow: hidden !important;
    background: rgba(238, 244, 246, .72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-top: 1px solid rgba(0,168,194,.12) !important;
  }

  #hero .service-marquee-track {
    animation-duration: 30s !important;
  }

  #hero .service-chip {
    padding: .46rem .7rem !important;
    font-size: .69rem !important;
  }
}

/* Short phones: compress vertical rhythm, never spill into the next section. */
@media (max-width: 767px) and (max-height: 740px) {
  #hero { padding-top: 4.05rem !important; padding-bottom: 3.3rem !important; }
  #hero > .container { padding-top: .25rem !important; }
  #hero .hero-badge { padding: .36rem .54rem !important; }
  #hero .hero-badge span { font-size: .66rem !important; }
  #hero .hero-badge svg { width: .88rem !important; height: .88rem !important; }
  #hero .hero-title { font-size: clamp(1.75rem, 9vw, 2.25rem) !important; margin-top: .65rem !important; }
  #hero .hero-subtitle { font-size: clamp(.94rem, 4.7vw, 1.12rem) !important; }
  #hero .hero-description { font-size: .76rem !important; line-height: 1.4 !important; margin-bottom: .65rem !important; }
  #hero .flex.flex-col.sm\:flex-row > a { min-height: 2.8rem !important; padding: .62rem .9rem !important; font-size: .92rem !important; }
  #hero .service-marquee { padding: .38rem 0 .42rem !important; }
  #hero .service-chip { padding: .38rem .62rem !important; font-size: .64rem !important; }
}

/* Very narrow phones */
@media (max-width: 380px) {
  #hero .max-w-4xl { max-width: 21.5rem !important; }
  #hero .hero-badge { padding: .36rem .52rem !important; }
  #hero .hero-title { font-size: clamp(1.75rem, 10vw, 2.2rem) !important; }
  #hero .hero-description { max-width: 18.5rem !important; }
}

/* =========================================
   RESPONSIVE HERO MARQUEE — FINAL OVERRIDE
   Keeps the marquee clear of CTAs on wide, short, tablet and phone screens.
========================================= */

/* Desktop / laptop default */
@media (min-width: 768px) {
  #hero {
    min-height: 100vh !important;
    min-height: 100svh !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Reserve a protected lane for the marquee at the bottom. */
  #hero > .container {
    box-sizing: border-box !important;
    padding-bottom: clamp(6rem, 12vh, 8.5rem) !important;
  }

  #hero .service-marquee {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: clamp(.7rem, 2.2vh, 1.7rem) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: .35rem 0 .45rem !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    z-index: 30 !important;
  }

  #hero .service-marquee-track {
    animation-duration: 42s !important;
  }

  #hero .service-marquee-group {
    gap: clamp(.55rem, .8vw, .9rem) !important;
    padding-right: clamp(.55rem, .8vw, .9rem) !important;
  }

  #hero .service-chip {
    padding: clamp(.48rem, .65vw, .62rem) clamp(.8rem, 1.05vw, 1.08rem) !important;
    font-size: clamp(.72rem, .72vw, .84rem) !important;
  }
}

/* Large desktop: slightly calmer / slower */
@media (min-width: 1440px) and (min-height: 820px) {
  #hero > .container {
    padding-bottom: clamp(7rem, 13vh, 9rem) !important;
  }
  #hero .service-marquee-track { animation-duration: 46s !important; }
  #hero .service-chip { font-size: .82rem !important; }
}

/* Standard laptops and landscape tablets */
@media (min-width: 768px) and (max-width: 1199px) {
  #hero > .container {
    padding-bottom: clamp(5.4rem, 11vh, 7rem) !important;
  }
  #hero .service-marquee {
    bottom: clamp(.5rem, 1.6vh, 1rem) !important;
  }
  #hero .service-marquee-track { animation-duration: 36s !important; }
  #hero .service-chip {
    padding: .46rem .76rem !important;
    font-size: .71rem !important;
  }
}

/* Short desktop/laptop screens: make the marquee lane smaller and protect buttons. */
@media (min-width: 768px) and (max-height: 760px) {
  #hero > .container {
    padding-top: 5.25rem !important;
    padding-bottom: 5.2rem !important;
  }
  #hero .service-marquee {
    bottom: .35rem !important;
    padding: .2rem 0 .3rem !important;
  }
  #hero .service-marquee-track { animation-duration: 34s !important; }
  #hero .service-chip {
    padding: .4rem .68rem !important;
    font-size: .67rem !important;
  }
  #hero .service-chip::before {
    width: 5px !important;
    height: 5px !important;
    margin-right: 7px !important;
  }
}

/* Very short desktop windows */
@media (min-width: 768px) and (max-height: 640px) {
  #hero > .container {
    padding-bottom: 4.5rem !important;
  }
  #hero .service-marquee {
    bottom: .2rem !important;
  }
  #hero .service-chip {
    padding: .34rem .6rem !important;
    font-size: .63rem !important;
  }
}

/* Phones: full-height hero with a dedicated bottom marquee lane. */
@media (max-width: 767px) {
  #hero {
    min-height: 100vh !important;
    min-height: 100svh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding-bottom: 0 !important;
  }

  #hero > .container {
    height: 100% !important;
    min-height: 0 !important;
    padding-bottom: clamp(3.5rem, 8.5vh, 4.4rem) !important;
  }

  #hero .service-marquee {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: .42rem 0 .5rem !important;
    background: rgba(238,244,246,.78) !important;
    border-top: 1px solid rgba(0,168,194,.13) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 40 !important;
  }

  #hero .service-marquee-track { animation-duration: 29s !important; }
  #hero .service-marquee-group { gap: .48rem !important; padding-right: .48rem !important; }
  #hero .service-chip {
    padding: .42rem .66rem !important;
    font-size: .67rem !important;
  }
}

/* Short phones */
@media (max-width: 767px) and (max-height: 700px) {
  #hero > .container { padding-bottom: 3.15rem !important; }
  #hero .service-marquee { padding: .3rem 0 .35rem !important; }
  #hero .service-marquee-track { animation-duration: 26s !important; }
  #hero .service-chip { padding: .33rem .56rem !important; font-size: .61rem !important; }
  #hero .service-chip::before { width: 5px !important; height: 5px !important; margin-right: 6px !important; }
}

/* Narrow phones */
@media (max-width: 390px) {
  #hero .service-marquee-track { animation-duration: 25s !important; }
  #hero .service-chip { padding: .34rem .56rem !important; font-size: .62rem !important; }
}

/* Respect reduced-motion preference without breaking layout. */
@media (prefers-reduced-motion: reduce) {
  #hero .service-marquee {
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  #hero .service-marquee::-webkit-scrollbar { display: none; }
  #hero .service-marquee-track { animation: none !important; }
}


/* Footer social alignment: icons start exactly on the same left edge as Legal links. */
@media (min-width: 768px) {
  footer .flex.space-x-4[role="list"] {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  footer .co-social-link:first-child {
    margin-left: 0 !important;
  }
}

/* === interactive-overrides.css === */

:root{
  --header-h:92px !important;
  --co-radius:28px !important;
  --co-radius-sm:18px !important;
}
@media (max-width:780px){:root{--header-h:72px !important;}}

.site-header{
  background:rgba(248,250,251,.97)!important;
  border-bottom:1px solid rgba(191,205,213,.78)!important;
}
.header-inner{
  gap:32px!important;
}
.brand{gap:14px!important;}
.brand-logo{
  width:4.9rem!important;
  height:3.45rem!important;
  object-fit:contain!important;
  filter:drop-shadow(0 4px 10px rgba(20,35,53,.10));
}
.brand-name{
  font-weight:860!important;
  letter-spacing:-.035em!important;
}
.desktop-nav{
  gap:30px!important;
}
.desktop-nav a{
  font-weight:760!important;
  color:#48586d!important;
}
.desktop-nav a.active,
.desktop-nav a:hover,
.desktop-nav a:focus-visible{
  color:var(--co-cyan-2)!important;
}
.desktop-nav a::after{bottom:-10px!important;height:2px!important;}
.mobile-menu{border-bottom-left-radius:18px;border-bottom-right-radius:18px;box-shadow:0 20px 48px rgba(31,50,67,.08);}

.btn{
  border-radius:16px!important;
  min-height:56px!important;
  padding:0 26px!important;
  font-weight:850!important;
  box-shadow:0 14px 34px rgba(31,50,67,.10);
}
.btn-primary,.btn-cyan,.submit{
  background:#3e4d62!important;
  color:#fff!important;
  border-color:#3e4d62!important;
  box-shadow:0 16px 36px rgba(38,53,72,.19)!important;
}
.btn-primary:hover,.btn-cyan:hover,.submit:hover{
  background:#334155!important;
  border-color:#334155!important;
}
.btn-secondary,.btn-ghost{
  background:rgba(255,255,255,.55)!important;
  color:var(--co-cyan-2)!important;
  border:1px solid rgba(0,171,196,.46)!important;
  box-shadow:none!important;
}
.btn-secondary:hover,.btn-ghost:hover{
  background:#fff!important;
}
.hero-ctas .btn, .hero-actions .btn, .sales-cta .btn{min-width:194px;}

/* Contact redesign */
.contact-side{grid-template-rows:auto auto 1fr!important;align-content:start!important;gap:18px!important;padding-top:22px;}
.contact-intro{min-height:152px;display:flex;flex-direction:column;justify-content:center;}
.contact-logo-card{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:136px;
  border-radius:22px;
  border:1px solid rgba(0,171,196,.18);
  background:linear-gradient(145deg,#f8fbfc,#eef3f5);
  box-shadow:0 14px 34px rgba(31,50,67,.06);
  overflow:hidden;
}
.contact-logo-card img{
  width:min(220px,80%);
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 10px 30px rgba(10,28,46,.10));
}
.contact-details{gap:14px!important;}
.contact-item{
  min-height:116px;
  align-items:center!important;
  border-radius:18px!important;
  padding:22px 18px!important;
}
.contact-item > div:last-child{display:grid;gap:5px;}
.contact-item strong{font-size:.92rem!important;}
.contact-item span,.contact-item a{font-size:.96rem!important;}

/* Footer + header consistency */
footer{
  background:#46556c!important;
  padding:72px 0 32px!important;
}
.footer-grid{grid-template-columns:1.2fr .9fr .9fr!important;gap:56px!important;align-items:start;}
.footer-brand{gap:16px!important;align-items:flex-start!important;}
.footer-brand .brand-logo{width:4.8rem!important;height:3.35rem!important;}
.footer-tag{margin-top:4px;font-size:.92rem!important;color:#d7e0e8!important;font-weight:650;}
.footer-copy{margin-top:20px!important;max-width:420px!important;line-height:1.6!important;}
.footer-list h3{font-size:1rem!important;margin-bottom:18px!important;}
.footer-list ul{gap:12px!important;}
.footer-list a{font-size:.95rem!important;color:#e5edf3!important;}
.socials{margin-top:24px!important;gap:12px!important;}
.socials a{width:44px!important;height:44px!important;border-radius:12px!important;background:#334155!important;}
.footer-bottom{margin-top:46px!important;padding-top:26px!important;color:#d1dde8!important;}

/* Module compare section */
.compare-universe .section-head{max-width:840px;}
.module-compare-selector{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 auto 28px;
}
.module-chip{
  border:1px solid var(--co-line);
  background:#fff;
  color:#4a5a6e;
  border-radius:999px;
  min-height:46px;
  padding:0 18px;
  font-weight:760;
  box-shadow:0 8px 18px rgba(31,50,67,.05);
}
.module-chip.active,.module-chip:hover{
  background:var(--co-cyan-soft);
  border-color:rgba(0,171,196,.45);
  color:var(--co-cyan-2);
}
.module-compare-panel{display:none;}
.module-compare-panel.active{display:block;}
.compare-module-note{
  display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;
  margin-bottom:16px;padding:18px 20px;border-radius:20px;background:linear-gradient(145deg,#f8fbfc,#eef4f7);border:1px solid var(--co-line);
}
.compare-module-note strong{display:block;color:var(--co-ink-2);font-size:1.02rem;}
.compare-module-note span{display:block;color:var(--co-muted);font-size:.92rem;margin-top:4px;}
.compare-price-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#fff;border:1px solid rgba(0,171,196,.3);color:var(--co-cyan-2);font-weight:800;}
.compare-wrap{overflow:auto;border-radius:24px;box-shadow:0 16px 42px rgba(31,50,67,.08);}
.compare{min-width:860px;background:#fff;}
.compare thead th small{color:var(--co-cyan-2);}
.compare td,.compare th{vertical-align:middle;}
.compare td:first-child,.compare th:first-child{width:42%;}
.compare .yes{font-weight:800;color:#3e4d62;}
.compare .no{color:#728197;}

/* Training price fix */
.training-price strong{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  background:#edf7f9;
  color:var(--co-cyan-2)!important;
  font-size:.84rem;
  line-height:1;
}
.training-price strong::before{
  content:'•';
  font-size:1rem;
  line-height:1;
}
.training-price small{
  display:block;
  margin-top:6px;
  color:var(--co-muted);
  font-size:.72rem;
}

/* Visual polish */
.section-head h2{text-wrap:balance;}
.sales-hero h1,.hero h1{letter-spacing:-.06em!important;}
.sales-hero .lead,.hero-lead{max-width:760px;}
.catalog-card,.training-card,.case-card,.faq-item,.finder,.contact-shell,.sales-cta,.hero-visual{box-shadow:0 18px 48px rgba(31,50,67,.08)!important;}

@media(max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr!important;}
  .footer-grid > :first-child{grid-column:1 / -1;}
}
@media(max-width:780px){
  .brand-logo{width:4rem!important;height:2.9rem!important;}
  .desktop-nav{gap:18px!important;}
  .footer-grid{grid-template-columns:1fr!important;text-align:center!important;}
  .footer-brand{justify-content:center!important;align-items:center!important;}
  .footer-copy{margin-inline:auto;}
  .socials{justify-content:center!important;}
  .contact-side{padding-top:0;}
  .contact-logo-card{min-height:118px;}
}
@media(max-width:560px){
  .btn{min-height:52px!important;border-radius:14px!important;padding:0 18px!important;}
  .module-chip{width:100%;justify-content:center;display:flex;align-items:center;}
  .compare-module-note{padding:16px;}
  .contact-item{min-height:0;padding:18px 16px!important;}
}



/* === Final refresh: unified navigation, rounded CTAs, cleaner contact, premium comparisons === */
:root{
  --header-h:92px !important;
  --co-radius:30px !important;
  --co-radius-sm:20px !important;
}
html{scroll-padding-top:calc(var(--header-h) + 18px)!important;}
body{overflow-x:hidden;}

.site-header{
  background:rgba(248,250,251,.985)!important;
  border-bottom:1px solid rgba(191,205,213,.85)!important;
  box-shadow:none!important;
}
.site-header.scrolled{box-shadow:0 14px 34px rgba(31,50,67,.08)!important;}
.header-inner{gap:36px!important;}
.brand{gap:16px!important;}
.brand-logo{width:5.05rem!important;height:3.5rem!important;object-fit:contain!important;filter:drop-shadow(0 6px 16px rgba(18,33,49,.14));}
.brand-name{font-size:1.08rem!important;font-weight:880!important;letter-spacing:-.04em!important;}
.desktop-nav{gap:28px!important;margin-left:auto!important;}
.desktop-nav a{font-size:.98rem!important;font-weight:780!important;color:#445267!important;padding:4px 0!important;}
.desktop-nav a::after{bottom:-14px!important;height:2px!important;background:var(--co-cyan)!important;}
.desktop-nav a.active,.desktop-nav a:hover,.desktop-nav a:focus-visible{color:var(--co-cyan-2)!important;}
.header-actions{gap:16px!important;}
.lang button{font-weight:800!important;}
.lang button.active{color:var(--co-cyan-2)!important;}
.menu-btn{border-radius:14px!important;}
.mobile-menu{border-bottom-left-radius:20px!important;border-bottom-right-radius:20px!important;box-shadow:0 22px 48px rgba(31,50,67,.11)!important;}
.mobile-menu a.active,.mobile-menu a:hover{background:var(--co-cyan-soft)!important;color:var(--co-cyan-2)!important;}

.btn,.submit{
  border-radius:18px!important;
  min-height:64px!important;
  padding:0 28px!important;
  font-size:1.02rem!important;
  font-weight:860!important;
  letter-spacing:-.02em!important;
  box-shadow:0 18px 34px rgba(31,50,67,.11)!important;
}
.btn .icon,.submit svg{width:18px!important;height:18px!important;}
.btn-primary,.btn-cyan,.submit{
  background:#425066!important;
  color:#fff!important;
  border:1px solid #425066!important;
  box-shadow:0 16px 40px rgba(39,55,73,.22)!important;
}
.btn-primary:hover,.btn-cyan:hover,.submit:hover{
  background:#344156!important;
  border-color:#344156!important;
  transform:translateY(-2px)!important;
}
.btn-secondary,.btn-ghost{
  background:rgba(255,255,255,.72)!important;
  color:var(--co-cyan-2)!important;
  border:1.5px solid rgba(0,171,196,.42)!important;
  box-shadow:0 8px 20px rgba(31,50,67,.04)!important;
}
.btn-secondary:hover,.btn-ghost:hover{background:#fff!important;border-color:rgba(0,171,196,.65)!important;color:#007b90!important;}
.hero-ctas .btn,.hero-actions .btn,.sales-cta .btn{min-width:210px!important;}

/* Comparison section: visible selector pills + stronger table styling */
.compare-universe{position:relative;overflow:hidden;}
.module-compare-selector{
  display:flex!important;flex-wrap:wrap!important;gap:12px!important;justify-content:center!important;
  margin:0 auto 30px!important;max-width:1100px;
}
.module-chip{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;
  border:1px solid #b8cdd6!important;background:#fff!important;color:#445267!important;
  border-radius:999px!important;min-height:50px!important;padding:0 20px!important;
  font-weight:800!important;font-size:.96rem!important;box-shadow:0 10px 22px rgba(31,50,67,.06)!important;
}
.module-chip::before{content:"•";font-size:1rem;line-height:1;color:var(--co-cyan)!important;}
.module-chip.active,.module-chip:hover,.module-chip:focus-visible{
  background:linear-gradient(180deg,#f9feff 0%,#e9f9fb 100%)!important;
  color:var(--co-cyan-2)!important;border-color:rgba(0,171,196,.45)!important;
  box-shadow:0 14px 28px rgba(0,171,196,.12)!important;
}
.module-compare-panel{display:none!important;animation:compareFade .28s ease both;}
.module-compare-panel.active{display:block!important;}
@keyframes compareFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.compare-module-note{
  display:flex!important;justify-content:space-between!important;align-items:center!important;gap:18px!important;flex-wrap:wrap!important;
  margin-bottom:18px!important;padding:20px 22px!important;border-radius:24px!important;
  background:linear-gradient(145deg,#ffffff 0%,#eff7f9 100%)!important;border:1px solid #d6e3e8!important;
}
.compare-module-note strong{display:block!important;font-size:1.08rem!important;color:var(--co-ink-2)!important;}
.compare-module-note span{display:block!important;color:var(--co-muted)!important;margin-top:5px!important;}
.compare-price-chip{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:11px 16px!important;border-radius:999px!important;background:#fff!important;border:1px solid rgba(0,171,196,.34)!important;color:var(--co-cyan-2)!important;font-weight:840!important;}
.compare-wrap{overflow:auto!important;border-radius:28px!important;box-shadow:0 18px 46px rgba(31,50,67,.08)!important;}
.compare{min-width:860px!important;background:#fff!important;border-collapse:separate!important;border-spacing:0!important;}
.compare thead th{padding:20px 18px!important;border-bottom:1px solid #dbe6eb!important;background:#fff!important;color:#1f3042!important;font-weight:820!important;}
.compare thead th.recommended,.compare td.recommended{background:#eaf8fb!important;}
.compare thead th:first-child{border-top-left-radius:28px!important;}
.compare thead th:last-child{border-top-right-radius:28px!important;}
.compare tbody td{padding:18px 18px!important;border-bottom:1px solid #e3ebef!important;color:#506075!important;}
.compare tbody tr:hover td{background:#fbfdfe!important;}
.compare td:first-child,.compare th:first-child{text-align:left!important;width:42%!important;color:#34445a!important;}
.compare td:not(:first-child),.compare th:not(:first-child){text-align:center!important;}
.compare tbody tr:last-child td:first-child{border-bottom-left-radius:28px!important;}
.compare tbody tr:last-child td:last-child{border-bottom-right-radius:28px!important;}
.compare .yes{font-weight:800!important;color:#2f455d!important;}
.compare .no{color:#7a8799!important;}

/* Training cards: real prices, cleaner footer area */
.training-card{display:flex!important;flex-direction:column!important;}
.training-card ul{margin-bottom:18px!important;}
.training-price{margin-top:auto!important;padding-top:14px!important;border-top:1px solid #dce7ec!important;display:grid!important;grid-template-columns:1fr auto!important;gap:8px 14px!important;align-items:center!important;}
.training-price strong{
  grid-column:1!important;display:inline-flex!important;align-items:center!important;gap:8px!important;
  width:max-content;padding:10px 14px!important;border-radius:999px!important;background:#ecf8fb!important;color:var(--co-cyan-2)!important;
  font-size:.86rem!important;line-height:1!important;font-weight:840!important;
}
.training-price strong::before{content:"•";color:var(--co-cyan)!important;font-size:1rem!important;}
.training-price small{grid-column:1 / -1!important;display:block!important;margin-top:-2px!important;color:var(--co-muted)!important;font-size:.74rem!important;}
.training-price a{grid-column:2!important;grid-row:1 / span 2!important;justify-self:end!important;font-weight:820!important;color:var(--co-cyan-2)!important;}

/* Contact block */
.contact-shell{border-radius:30px!important;overflow:hidden!important;}
.contact-grid{align-items:start!important;gap:20px!important;}
.contact-form{border-radius:26px!important;}
.contact-side{grid-template-rows:auto auto 1fr!important;align-content:start!important;gap:16px!important;padding-top:32px!important;}
.contact-intro{min-height:150px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;}
.contact-logo-card{display:flex!important;align-items:center!important;justify-content:center!important;min-height:132px!important;border-radius:24px!important;border:1px solid rgba(0,171,196,.18)!important;background:linear-gradient(145deg,#f8fbfc,#eef3f5)!important;box-shadow:0 14px 32px rgba(31,50,67,.05)!important;overflow:hidden!important;}
.contact-logo-card img{width:min(210px,80%)!important;height:auto!important;object-fit:contain!important;filter:drop-shadow(0 10px 26px rgba(10,28,46,.10));}
.contact-details{display:grid!important;gap:14px!important;align-content:start!important;}
.contact-item{min-height:unset!important;align-items:flex-start!important;border-radius:20px!important;padding:20px 18px!important;gap:14px!important;}
.contact-item .icon-box{flex:0 0 44px!important;}
.contact-item > div:last-child{display:grid!important;gap:4px!important;align-content:center!important;}
.contact-item strong{font-size:.96rem!important;line-height:1.2!important;}
.contact-item span,.contact-item a{font-size:.96rem!important;line-height:1.45!important;word-break:break-word;}

/* Footer */
footer{background:#47556b!important;padding:74px 0 32px!important;border-top:1px solid rgba(0,171,196,.16)!important;}
.footer-grid{grid-template-columns:1.25fr .85fr .95fr!important;gap:58px!important;align-items:start!important;}
.footer-brand{gap:18px!important;align-items:flex-start!important;}
.footer-brand .brand-logo{width:4.9rem!important;height:3.4rem!important;}
.footer-brand strong{font-size:1.02rem!important;}
.footer-tag{margin-top:4px!important;font-size:.92rem!important;color:#d1dce5!important;font-weight:700!important;}
.footer-copy{margin-top:20px!important;max-width:420px!important;color:#ecf2f6!important;font-size:1rem!important;line-height:1.65!important;}
.footer-list h3{font-size:1rem!important;margin:0 0 18px!important;color:#fff!important;}
.footer-list ul{gap:14px!important;}
.footer-list a{font-size:.98rem!important;color:#e6edf4!important;}
.footer-list a:hover{color:#89e2ed!important;}
.socials{display:flex!important;gap:12px!important;flex-wrap:wrap!important;margin-top:24px!important;}
.socials a{width:44px!important;height:44px!important;border-radius:12px!important;background:#344156!important;color:#fff!important;display:grid!important;place-items:center!important;}
.socials a:hover{background:var(--co-cyan)!important;transform:translateY(-2px)!important;}
.footer-bottom{margin-top:48px!important;padding-top:24px!important;color:#d0dce7!important;font-size:.94rem!important;}

/* Home hero & marquee */
.marquee-chip{padding:10px 16px!important;font-weight:780!important;}
.hero-note,.sales-hero .hero-note{font-size:.84rem!important;}
.hero h1,.sales-hero h1{text-wrap:balance!important;}

/* Legal pages still keep unified nav/footer */
body .legal-page .site-header, body .site-header{backdrop-filter:blur(18px)!important;}

@media (max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr!important;}
  .footer-grid > :first-child{grid-column:1 / -1;}
  .contact-grid{grid-template-columns:1fr!important;}
  .contact-side{padding-top:8px!important;}
}
@media (max-width:780px){
  :root{--header-h:74px!important;}
  .header-inner{gap:14px!important;}
  .brand{gap:10px!important;}
  .brand-logo{width:4rem!important;height:2.95rem!important;}
  .brand-name{font-size:.96rem!important;}
  .btn,.submit{min-height:58px!important;padding:0 22px!important;font-size:.98rem!important;}
  .module-chip{min-height:48px!important;padding:0 18px!important;}
  .footer-grid{grid-template-columns:1fr!important;text-align:center!important;}
  .footer-brand{justify-content:center!important;align-items:center!important;}
  .footer-copy{margin-inline:auto!important;}
  .socials{justify-content:center!important;}
  .contact-logo-card{min-height:116px!important;}
  .contact-item{align-items:center!important;}
}
@media (max-width:560px){
  .btn,.submit{min-height:54px!important;border-radius:16px!important;padding:0 18px!important;}
  .hero-ctas .btn,.hero-actions .btn,.sales-cta .btn{min-width:0!important;width:100%!important;}
  .module-compare-selector{display:grid!important;grid-template-columns:1fr!important;}
  .module-chip{width:100%!important;}
  .compare-module-note{padding:16px 18px!important;}
  .training-price{grid-template-columns:1fr!important;}
  .training-price a{grid-column:1!important;grid-row:auto!important;justify-self:start!important;}
  .contact-item{padding:18px 16px!important;}
  .footer-copy{font-size:.94rem!important;}
}


.training-card,.catalog-card,.story-card,.case-card,.hero-visual,.finder{position:relative;overflow:hidden;isolation:isolate;}
.training-card::after,.catalog-card::after,.story-card::after,.case-card::after,.hero-visual::after,.finder::after{
  content:"";position:absolute;inset:auto auto 0 0;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle at center, rgba(0,171,196,.10), rgba(0,171,196,0) 68%);
  transform:translate(calc(var(--mx,50%) - 110px), calc(var(--my,50%) - 110px));
  pointer-events:none;opacity:0;transition:opacity .25s ease;
}
.training-card:hover::after,.catalog-card:hover::after,.story-card:hover::after,.case-card:hover::after,.hero-visual:hover::after,.finder:hover::after{opacity:1;}



/* === 2026-08 final visual corrections === */
/* CTA buttons: match requested dark/outline reference */
.btn,.submit,.center-cta .btn,.hero-actions .btn,.hero-ctas .btn,.sales-cta .btn,.sticky-sales-cta .btn{
  border-radius:13px!important;
  min-height:62px!important;
  padding:0 30px!important;
  font-size:1.01rem!important;
  font-weight:850!important;
  letter-spacing:-.015em!important;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease,color .22s ease!important;
}
.btn-primary,.btn-cyan,.submit{
  background:#435168!important;
  color:#fff!important;
  border:1px solid #435168!important;
  box-shadow:0 14px 30px rgba(31,50,67,.18)!important;
}
.btn-primary:hover,.btn-cyan:hover,.submit:hover{
  background:#37455b!important;
  border-color:#37455b!important;
  color:#fff!important;
  transform:translateY(-2px)!important;
}
.btn-secondary,.btn-ghost{
  background:rgba(255,255,255,.12)!important;
  color:var(--co-cyan-2)!important;
  border:1.5px solid rgba(0,171,196,.38)!important;
  box-shadow:none!important;
}
.btn-secondary:hover,.btn-ghost:hover{
  background:rgba(255,255,255,.72)!important;
  border-color:var(--co-cyan)!important;
  color:#007f96!important;
  transform:translateY(-2px)!important;
}

/* Contact: remove intro card, place large logo centrally, fix consent alignment */
#contact .contact-side{
  padding-top:0!important;
  display:grid!important;
  grid-template-rows:auto 1fr!important;
  gap:16px!important;
  align-content:start!important;
}
#contact .contact-logo-card{
  min-height:210px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(145deg,#f9fbfc 0%,#eff5f7 100%)!important;
  border:1px solid rgba(0,171,196,.20)!important;
  border-radius:24px!important;
  overflow:hidden!important;
}
#contact .contact-logo-card img{
  width:min(330px,82%)!important;
  max-height:165px!important;
  height:auto!important;
  object-fit:contain!important;
  filter:drop-shadow(0 12px 24px rgba(14,31,47,.18))!important;
}
#contact .contact-details{display:grid!important;gap:14px!important;}
#contact .contact-item{min-height:108px!important;}
#contact .consent{
  display:grid!important;
  grid-template-columns:20px minmax(0,1fr)!important;
  align-items:start!important;
  justify-content:start!important;
  gap:12px!important;
  margin:6px 0 4px!important;
  width:100%!important;
  color:#eef4f7!important;
  line-height:1.55!important;
  text-align:left!important;
}
#contact .consent input[type="checkbox"]{
  width:18px!important;
  height:18px!important;
  margin:2px 0 0!important;
  padding:0!important;
  appearance:auto!important;
  accent-color:var(--co-cyan)!important;
}
#contact .consent-copy{display:block!important;min-width:0!important;font-size:.82rem!important;}
#contact .consent a{color:#6ddbe9!important;text-decoration:underline!important;text-underline-offset:2px!important;}

/* Pricing hero: prevent the long cyan word from overrunning the layout */
.page-pricing .sales-hero .hero-copy h1{font-size:clamp(3.8rem,6.25vw,6.65rem)!important;line-height:.98!important;}
.page-pricing .sales-hero .hero-copy h1 .accent{font-size:.82em!important;line-height:1.02!important;letter-spacing:-.055em!important;display:inline!important;}

/* Footer: reproduce the requested three-column layout on every page */
footer{
  background:#46546a!important;
  color:#fff!important;
  padding:62px 0 28px!important;
}
.footer-grid-reference{
  display:grid!important;
  grid-template-columns:1.18fr .82fr .92fr!important;
  gap:72px!important;
  align-items:start!important;
}
.footer-company{min-width:0!important;}
.footer-brand{display:flex!important;align-items:flex-start!important;gap:18px!important;}
.footer-brand .brand-logo{width:4.3rem!important;height:3.1rem!important;object-fit:contain!important;}
.footer-brand strong{display:block!important;color:#fff!important;font-size:1.02rem!important;font-weight:900!important;line-height:1.15!important;}
.footer-codex{color:#fff!important;}
.footer-brand strong > span:last-child{color:var(--co-cyan)!important;}
.footer-tag{font-size:.86rem!important;color:#cbd7e1!important;margin-top:5px!important;font-weight:750!important;}
.footer-company-copy{margin-top:26px!important;color:#f4f7f9!important;font-size:.95rem!important;line-height:1.55!important;font-weight:650!important;}
.footer-company-copy p{margin:0 0 20px!important;}
.footer-service-list{list-style:none!important;margin:0 0 22px!important;padding:0!important;display:grid!important;gap:2px!important;}
.footer-service-list li::before{content:"* ";color:#fff!important;}
.footer-contact{margin-top:30px!important;}
.footer-contact a{color:#fff!important;font-weight:800!important;}
.footer-list h3{margin:0 0 22px!important;color:#fff!important;font-size:1.05rem!important;font-weight:850!important;}
.footer-list ul{list-style:none!important;margin:0!important;padding:0!important;display:grid!important;gap:14px!important;}
.footer-list ul a{color:#eef3f6!important;font-size:.96rem!important;font-weight:500!important;}
.footer-list ul a:hover{color:#7fe1ed!important;}
.footer-legal-social .socials{margin-top:28px!important;justify-content:flex-start!important;}
.socials a{width:44px!important;height:44px!important;border-radius:11px!important;background:#344156!important;color:#fff!important;display:grid!important;place-items:center!important;}
.socials a:hover{background:#26354a!important;transform:translateY(-2px)!important;}
.footer-bottom{
  margin-top:48px!important;
  padding-top:28px!important;
  border-top:1px solid rgba(255,255,255,.13)!important;
  text-align:center!important;
  color:#cbd6e1!important;
  font-size:.95rem!important;
  line-height:1.5!important;
}
.footer-bottom span[data-year]:empty + #year:empty::before{content:"2026";}

@media (max-width:980px){
  .footer-grid-reference{grid-template-columns:1fr 1fr!important;gap:44px!important;}
  .footer-company{grid-column:1/-1!important;}
  #contact .contact-logo-card{min-height:175px!important;}
}
@media (max-width:760px){
  .btn,.submit,.center-cta .btn,.hero-actions .btn,.hero-ctas .btn,.sales-cta .btn,.sticky-sales-cta .btn{
    min-height:56px!important;border-radius:12px!important;padding:0 22px!important;
  }
  .page-pricing .sales-hero .hero-copy h1{font-size:clamp(2.8rem,13vw,4rem)!important;}
  .page-pricing .sales-hero .hero-copy h1 .accent{font-size:.78em!important;letter-spacing:-.045em!important;}
  .footer-grid-reference{grid-template-columns:1fr!important;text-align:center!important;gap:38px!important;}
  .footer-company{grid-column:auto!important;}
  .footer-brand{justify-content:center!important;align-items:center!important;}
  .footer-company-copy{max-width:420px!important;margin:24px auto 0!important;}
  .footer-legal-social .socials{justify-content:center!important;}
  #contact .contact-logo-card{min-height:150px!important;}
  #contact .contact-logo-card img{width:min(270px,82%)!important;max-height:125px!important;}
}
@media (max-width:480px){
  .page-pricing .sales-hero .hero-copy h1{font-size:clamp(2.45rem,12vw,3.25rem)!important;}
  .page-pricing .sales-hero .hero-copy h1 .accent{font-size:.76em!important;}
  #contact .consent{grid-template-columns:18px minmax(0,1fr)!important;gap:10px!important;}
  #contact .consent input[type="checkbox"]{width:16px!important;height:16px!important;}
  #contact .consent-copy{font-size:.78rem!important;}
}

/* Final pricing headline fit */
.page-pricing .sales-hero .hero-copy h1{
  font-size:clamp(3.25rem,5.1vw,5.05rem)!important;
  max-width:680px!important;
}
.page-pricing .sales-hero .hero-copy h1 .accent{
  font-size:.70em!important;
  letter-spacing:-.05em!important;
}
@media (max-width:760px){
  .page-pricing .sales-hero .hero-copy h1{font-size:clamp(2.7rem,11.5vw,3.75rem)!important;}
  .page-pricing .sales-hero .hero-copy h1 .accent{font-size:.78em!important;}
}

/* Clear keyboard focus for the new controls */
.btn:focus-visible,.submit:focus-visible,.socials a:focus-visible,.footer-list a:focus-visible{
  outline:3px solid rgba(0,171,196,.55)!important;
  outline-offset:3px!important;
}

/* === final-fixes.css === */
:root{
  --co-fix-bg:#46566e;
  --co-fix-bg-deep:#314056;
  --co-fix-cyan:#00abc4;
  --co-fix-text:#eef3f8;
  --co-fix-muted:#d4dde6;
  --co-fix-border:rgba(255,255,255,.10);
  --co-fix-radius:18px;
}

a.btn,button.btn,.btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.7rem !important;
  min-height:58px !important;
  padding:0 1.75rem !important;
  border-radius:16px !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
  text-decoration:none !important;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease !important;
  box-shadow:0 12px 28px rgba(31,50,67,.12);
}

a.btn:hover,button.btn:hover,.btn:hover{transform:translateY(-1px)}
a.btn:active,button.btn:active,.btn:active{transform:translateY(0)}
.btn-primary,.btn-cyan,.btn.submit{
  background:#44536a !important;
  color:#fff !important;
  border:1px solid rgba(67,84,108,.96) !important;
}
.btn-secondary,.btn-ghost{
  background:rgba(255,255,255,.9) !important;
  color:#0b97af !important;
  border:1.5px solid rgba(0,171,196,.35) !important;
  box-shadow:none !important;
}
.btn-primary:hover,.btn-cyan:hover,.btn.submit:hover{
  background:#3b4a60 !important;
}
.btn-secondary:hover,.btn-ghost:hover{
  background:#f7fbfc !important;
  border-color:rgba(0,171,196,.6) !important;
}
.btn svg,.btn .icon{width:1.1rem !important;height:1.1rem !important;flex:0 0 auto}

#contact .contact-grid{align-items:stretch !important}
#contact .contact-intro{display:none !important}
#contact .contact-side{display:grid !important;grid-template-rows:auto auto !important;gap:18px !important}
#contact .contact-logo-card{
  min-height:154px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:24px !important;
  border:1px solid rgba(0,171,196,.18) !important;
  background:linear-gradient(180deg,#f7fafc 0%, #eef3f6 100%) !important;
  box-shadow:0 14px 32px rgba(31,50,67,.05) !important;
}
#contact .contact-logo-card img{
  width:min(230px,82%) !important;
  height:auto !important;
  object-fit:contain !important;
  filter:drop-shadow(0 8px 22px rgba(18,35,54,.10));
}
#contact .contact-details{display:grid !important;gap:18px !important}
#contact .contact-item{min-height:92px !important;align-items:center !important}
#contact .consent{
  display:grid !important;
  grid-template-columns:18px 1fr !important;
  align-items:start !important;
  gap:14px !important;
  margin:6px 0 2px !important;
}
#contact .consent input[type="checkbox"]{
  margin:4px 0 0 !important;
  width:16px !important;
  height:16px !important;
}
#contact .consent span,
#contact .consent a{line-height:1.65 !important}
#contact .consent a{color:#68dce9 !important;text-decoration:underline !important;text-underline-offset:2px}

footer{
  background:var(--co-fix-bg) !important;
  color:#fff !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  padding:76px 0 34px !important;
  margin-top:0 !important;
  text-align:left !important;
}
footer .container{
  width:min(1180px, calc(100% - 48px)) !important;
  margin-inline:auto !important;
  padding:0 !important;
}
footer .footer-grid{
  display:grid !important;
  grid-template-columns:1.25fr .9fr .9fr !important;
  gap:60px !important;
  align-items:start !important;
}
footer .footer-brand{
  display:flex !important;
  gap:16px !important;
  align-items:flex-start !important;
}
footer .footer-brand .brand-logo{
  width:84px !important;
  height:60px !important;
  object-fit:contain !important;
  flex:0 0 auto !important;
}
footer .footer-brand strong{
  display:block !important;
  font-size:1.05rem !important;
  font-weight:850 !important;
  color:#fff !important;
  letter-spacing:-.01em !important;
}
footer .footer-brand strong span{color:var(--co-fix-cyan) !important}
footer .footer-tag{
  margin-top:.2rem !important;
  color:#d3dde8 !important;
  font-size:.95rem !important;
  font-weight:700 !important;
}
footer .footer-copy{
  margin:22px 0 0 !important;
  max-width:430px !important;
  font-size:1rem !important;
  line-height:1.65 !important;
  color:#eef3f8 !important;
}
footer .footer-list h3{
  margin:0 0 18px !important;
  color:#fff !important;
  font-size:1rem !important;
  font-weight:800 !important;
}
footer .footer-list ul{
  display:grid !important;
  gap:13px !important;
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;
}
footer .footer-list li{display:block !important}
footer .footer-list a{
  color:#e2ebf3 !important;
  font-size:.98rem !important;
  text-decoration:none !important;
}
footer .footer-list a:hover{color:#8ae1ee !important}
footer .socials{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:14px !important;
  margin-top:22px !important;
}
footer .socials a{
  width:44px !important;
  height:44px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:12px !important;
  background:var(--co-fix-bg-deep) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#fff !important;
  transition:transform .2s ease, background-color .2s ease !important;
}
footer .socials a:hover{
  transform:translateY(-2px) !important;
  background:#3d4c62 !important;
}
footer .socials svg{width:19px !important;height:19px !important;fill:currentColor !important}
footer .socials .stroke{fill:none !important;stroke:currentColor !important;stroke-width:2 !important}
footer .footer-bottom{
  margin-top:44px !important;
  padding-top:26px !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  color:#d4dee8 !important;
  text-align:center !important;
  font-size:.98rem !important;
}

#services .explorer-shell{max-width:1040px !important}
#services .tab-shell{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:10px !important;padding:10px !important;background:#fff !important;border:1px solid #d0dde4 !important;border-radius:20px !important}
#services .service-tab{
  min-height:48px !important;
  padding:0 1rem !important;
  border-radius:14px !important;
  border:1px solid #cbd8df !important;
  background:#f7fafc !important;
  color:#213248 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.55rem !important;
  font-weight:800 !important;
}
#services .service-tab.active,
#services .service-tab[aria-selected="true"]{
  background:var(--co-fix-cyan) !important;
  color:#fff !important;
  border-color:var(--co-fix-cyan) !important;
}
#services .service-panel{
  margin-top:18px !important;
  position:relative !important;
  overflow:hidden !important;
  background:#42536c !important;
  color:#fff !important;
  border-radius:26px !important;
  padding:42px !important;
  min-height:360px !important;
  border:1px solid rgba(0,171,196,.18) !important;
  box-shadow:0 22px 54px rgba(31,50,67,.14) !important;
}
#services .service-content{
  position:relative !important;
  display:grid !important;
  grid-template-columns:1.1fr .9fr !important;
  gap:40px !important;
  align-items:start !important;
}
#services .service-title-row{display:flex !important;align-items:flex-start !important;gap:16px !important;margin-bottom:16px !important}
#services .service-title-row .icon-box{width:52px !important;height:52px !important;border-radius:16px !important;background:rgba(255,255,255,.10) !important;display:grid !important;place-items:center !important;color:#8ce7f1 !important;flex:0 0 auto !important}
#services .service-title-row .icon-box svg{width:25px !important;height:25px !important}
#services .service-title-row h3{margin:0 !important;font-size:1.75rem !important;line-height:1.1 !important;color:#fff !important}
#services .service-title-row p{margin:.35rem 0 0 !important;color:#d7e4ec !important}
#services .service-summary{margin:0 0 22px !important;color:#edf3f8 !important;line-height:1.7 !important;max-width:620px !important}
#services .service-columns{display:grid !important;grid-template-columns:1fr 1fr !important;gap:26px !important}
#services .service-list h4{margin:0 0 12px !important;color:#fff !important;font-size:1rem !important}
#services .service-list ul{list-style:none !important;padding:0 !important;margin:0 !important;display:grid !important;gap:10px !important}
#services .service-list li{display:flex !important;gap:10px !important;color:#eaf1f6 !important;line-height:1.55 !important}
#services .service-list li::before{content:"✓" !important;color:#69e2ee !important;font-weight:900 !important;flex:0 0 auto}
#services .service-side{padding:24px !important;border-radius:18px !important;border:1px solid rgba(255,255,255,.11) !important;background:rgba(35,48,65,.28) !important}
#services .service-side h4{margin:0 0 10px !important;color:#fff !important;font-size:1.05rem !important}
#services .use-case{display:flex !important;gap:10px !important;padding:11px 0 !important;border-bottom:1px solid rgba(255,255,255,.08) !important;color:#edf3f8 !important}
#services .use-case:last-of-type{border-bottom:0 !important}
#services .use-case span{color:#69e2ee !important;font-weight:900 !important}
#services .service-cta{margin-top:18px !important;width:100% !important}

@media (max-width: 980px){
  footer .footer-grid{grid-template-columns:1fr 1fr !important;gap:36px !important}
  footer .footer-grid > :first-child{grid-column:1 / -1 !important}
  #services .service-content{grid-template-columns:1fr !important}
}
@media (max-width: 760px){
  footer{padding:58px 0 28px !important}
  footer .container{width:min(100%, calc(100% - 28px)) !important}
  footer .footer-grid{grid-template-columns:1fr !important;text-align:center !important}
  footer .footer-brand{justify-content:center !important;align-items:center !important}
  footer .footer-copy{margin-inline:auto !important}
  footer .socials{justify-content:center !important}
  footer .footer-list ul{justify-items:center !important}
  #services .tab-shell{grid-template-columns:1fr 1fr !important}
  #services .service-panel{padding:26px !important;border-radius:20px !important}
  #services .service-columns{grid-template-columns:1fr !important}
}
@media (max-width: 520px){
  #services .tab-shell{grid-template-columns:1fr !important}
  #services .service-title-row h3{font-size:1.5rem !important}
}

/* === latest-request-fixes.css === */

:root{
  --co-latest-shadow:0 20px 54px rgba(31,50,67,.14);
  --co-latest-shadow-sm:0 12px 30px rgba(31,50,67,.10);
}

/* HERO REBUILD */
.hero{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.hero .eyebrow,
.hero-note,
.service-marquee{display:none !important;}
.hero .hero-content{
  width:min(1040px, calc(100% - 32px)) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  padding-top:72px !important;
  padding-bottom:88px !important;
}
.hero-chip-cloud{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin:0 auto 28px;
}
.hero-chip-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
.hero-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 20px;
  border-radius:999px;
  border:1px solid rgba(0,171,196,.35);
  background:rgba(239,249,251,.62);
  color:#048aa2;
  font-weight:800;
  letter-spacing:-.015em;
  box-shadow:0 8px 24px rgba(31,50,67,.05);
  backdrop-filter:blur(8px);
}
.hero-chip-primary{
  min-height:50px;
  padding-inline:22px;
  background:rgba(235,247,250,.75);
}
.hero-brand-title{
  font-size:clamp(3.4rem,9vw,6.25rem) !important;
  line-height:.95 !important;
  margin:0 auto 14px !important;
  letter-spacing:-.06em !important;
  color:#243244 !important;
}
.hero-service-line{
  margin:0 auto 10px !important;
  font-size:clamp(1.2rem,2.4vw,2rem) !important;
  line-height:1.25 !important;
  color:#008fa7 !important;
  text-wrap:balance;
}
.hero-service-line strong{font-weight:800;}
.hero .hero-claim,
.hero .hero-lead.hero-claim{
  max-width:720px !important;
  margin:0 auto !important;
  color:#44556a !important;
  font-size:clamp(1.15rem,2.35vw,1.7rem) !important;
  line-height:1.45 !important;
  font-weight:600 !important;
  text-wrap:balance;
}
.hero .hero-ctas{margin-top:28px !important;}

/* Proof / Benefits interactive cards */
.proof-card{
  position:relative !important;
  overflow:hidden !important;
  cursor:pointer;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease !important;
}
.proof-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg,#00abc4,#85e4ef);
  opacity:0;
  transition:opacity .25s ease;
}
.proof-card::after{
  content:"Mehr erfahren";
  position:absolute;
  right:18px;
  bottom:16px;
  font-size:.74rem;
  font-weight:800;
  color:#00abc4;
  opacity:0;
  transform:translateY(8px);
  transition:transform .24s ease, opacity .24s ease;
}
.proof-card:hover,
.proof-card:focus-visible,
.proof-card.active{
  transform:translateY(-8px) !important;
  box-shadow:0 24px 56px rgba(31,50,67,.12) !important;
  border-color:rgba(0,171,196,.32) !important;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbfc 100%) !important;
}
.proof-card:hover::before,.proof-card:focus-visible::before,.proof-card.active::before,
.proof-card:hover::after,.proof-card:focus-visible::after,.proof-card.active::after{opacity:1;transform:translateY(0);}
.proof-card .icon-box{transition:transform .28s ease, background .28s ease, color .28s ease !important;}
.proof-card:hover .icon-box,.proof-card:focus-visible .icon-box,.proof-card.active .icon-box{
  transform:scale(1.06) rotate(-4deg);
  background:#e7f8fb !important;
  color:#00abc4 !important;
}

/* process section */
.process-wrap{position:relative !important; overflow:hidden !important;}
.process-wrap::after{display:none !important;}
.process-progress-track{
  position:absolute;
  left:84px;
  right:84px;
  top:97px;
  height:3px;
  border-radius:999px;
  background:rgba(109,219,233,.18);
  overflow:hidden;
  z-index:0;
}
.process-progress-bar{
  width:0%;
  height:100%;
  background:linear-gradient(90deg,#00abc4 0%,#8de7f1 100%);
  border-radius:inherit;
  box-shadow:0 0 18px rgba(0,171,196,.35);
  transition:width .35s cubic-bezier(.2,.8,.2,1);
}
.process-grid{position:relative !important; z-index:2 !important;}
.process-card{
  position:relative !important;
  cursor:pointer;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease !important;
}
.process-card:hover,
.process-card:focus-visible,
.process-card.active{
  transform:translateY(-8px) !important;
  border-color:rgba(109,219,233,.34) !important;
  background:rgba(25,40,56,.38) !important;
  box-shadow:0 20px 44px rgba(0,0,0,.18) !important;
}
.process-card .step-no{transition:transform .28s ease, box-shadow .28s ease, background .28s ease !important;}
.process-card:hover .step-no,.process-card:focus-visible .step-no,.process-card.active .step-no{
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 0 0 8px rgba(0,171,196,.12);
  background:linear-gradient(135deg,#00abc4,#43d8e6) !important;
}
.process-link a{position:relative;display:inline-block;}
.process-link a::after{
  content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;background:linear-gradient(90deg,#67dce8,transparent);transform-origin:left center;transform:scaleX(.5);transition:transform .25s ease;
}
.process-link a:hover::after{transform:scaleX(1);}

/* cleaner card interactivity everywhere */
.training-card::after,.catalog-card::after,.story-card::after,.case-card::after,.hero-visual::after,.finder::after{content:none !important;display:none !important;}
.training-card,.catalog-card,.story-card,.case-card,.hero-visual,.finder,.proof-item,.service-option,.faq-item{
  transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease, background .26s ease !important;
}
.training-card:hover,.catalog-card:hover,.story-card:hover,.case-card:hover,.hero-visual:hover,.finder:hover,
.training-card:focus-within,.catalog-card:focus-within,.story-card:focus-within,.case-card:focus-within,.finder:focus-within{
  transform:translateY(-6px) !important;
  box-shadow:0 22px 50px rgba(31,50,67,.12) !important;
  border-color:rgba(0,171,196,.28) !important;
}
.training-card:hover .tag,.catalog-card:hover .tag,.story-card:hover .tag,.case-card:hover .tag,
.training-card:focus-within .tag,.catalog-card:focus-within .tag{background:#e6f7fa !important;color:#008fa7 !important;}

/* contact section adjustments */
#contact .contact-shell{overflow:hidden !important;}
#contact .contact-grid{align-items:stretch !important;}
#contact .contact-side{
  grid-template-rows:minmax(220px,1fr) auto !important;
  gap:16px !important;
  min-height:100% !important;
}
#contact .contact-logo-card{
  min-height:100% !important;
  border:0 !important;
  box-shadow:none !important;
  background:linear-gradient(145deg,#f6f9fb 0%,#eef3f6 100%) !important;
}
#contact .contact-logo-card img{
  width:min(300px,84%) !important;
  max-height:210px !important;
  filter:drop-shadow(0 10px 24px rgba(18,35,54,.08)) !important;
}
#contact .contact-details{align-content:end !important; margin-top:auto !important;}
#contact .contact-item{
  min-height:98px !important;
  border-width:0 !important;
  box-shadow:0 12px 28px rgba(31,50,67,.06) !important;
}

/* slightly calmer footer consistency */
footer .footer-grid{align-items:start !important;}

@media (max-width: 980px){
  .process-progress-track{left:50px; right:50px; top:93px;}
  #contact .contact-logo-card img{width:min(260px,78%) !important; max-height:180px !important;}
}
@media (max-width: 760px){
  .hero .hero-content{padding-top:28px !important; padding-bottom:54px !important;}
  .hero-chip-cloud{gap:10px; margin-bottom:20px;}
  .hero-chip-primary{min-height:44px;}
  .hero-chip{font-size:.95rem; min-height:42px; padding:0 16px;}
  .hero-chip-row{gap:10px;}
  .hero .hero-ctas{margin-top:22px !important;}
  .process-progress-track{display:none;}
  #contact .contact-side{grid-template-rows:auto auto !important;}
  #contact .contact-logo-card{min-height:180px !important;}
  #contact .contact-logo-card img{width:min(230px,80%) !important; max-height:150px !important;}
}
@media (max-width:560px){
  .hero{padding-top:var(--header-h) !important; min-height:auto !important; align-items:flex-start !important;}
  .hero .hero-content{width:calc(100% - 28px) !important; padding-top:18px !important; padding-bottom:38px !important;}
  .hero-brand-title{font-size:clamp(2.8rem,12.5vw,4rem) !important; margin-bottom:12px !important;}
  .hero-service-line{font-size:1.05rem !important; max-width:300px !important;}
  .hero .hero-claim{font-size:1rem !important; max-width:290px !important;}
  .hero-chip-primary{font-size:.96rem;}
  .hero-chip{font-size:.88rem; padding:0 14px;}
  .hero-chip-row{justify-content:center;}
  .proof-card::after{display:none;}
  #contact .contact-item{min-height:86px !important;}
}

/* === request-2026-08-18.css === */
/* Final UX adjustments requested 2026-08-18 */

/* ---------------------------------------------------------
   HERO: chips up, clear hierarchy, no extra hero note/marquee
   --------------------------------------------------------- */
.hero{
  align-items:flex-start !important;
  justify-content:center !important;
}
.hero .hero-content{
  width:min(1040px,calc(100% - 32px)) !important;
  padding-top:clamp(46px,6vh,76px) !important;
  padding-bottom:150px !important;
  transform:none !important;
}
.hero-chip-cloud{
  margin:0 auto 24px !important;
  gap:12px !important;
}
.hero-chip-row{gap:10px !important;}
.hero-chip{
  gap:9px !important;
  min-height:43px !important;
  padding:0 17px !important;
  background:rgba(238,248,250,.72) !important;
  border-color:rgba(0,171,196,.32) !important;
  box-shadow:0 8px 24px rgba(31,50,67,.045) !important;
}
.hero-chip-primary{
  min-height:46px !important;
  padding-inline:19px !important;
}
.hero-chip svg{
  width:18px !important;
  height:18px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  flex:0 0 auto !important;
}
.hero-brand-title{
  margin:0 auto 12px !important;
  font-size:clamp(3.5rem,7vw,5.85rem) !important;
  line-height:.96 !important;
}
.hero-service-line{
  margin:0 auto 10px !important;
  font-size:clamp(1.25rem,2.2vw,1.85rem) !important;
}
.hero .hero-claim{
  margin:0 auto !important;
  font-size:clamp(1.16rem,1.8vw,1.48rem) !important;
  font-weight:700 !important;
  color:#415267 !important;
}
.hero .hero-ctas{margin-top:28px !important;}
.hero-note,.service-marquee{display:none !important;}

/* ---------------------------------------------------------
   INTERACTION POLICY: motion / depth yes, hover recolor no
   --------------------------------------------------------- */
.proof-card,
.training-card,
.outcome-card,
.case-card,
.catalog-card,
.story-card,
.finder,
.hero-visual,
.process-card{
  will-change:transform;
}

/* Proof cards: selectable without changing the card background */
.proof-card{
  background:#fff !important;
  cursor:pointer !important;
  isolation:isolate !important;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease !important;
}
.proof-card::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  bottom:0 !important;
  top:auto !important;
  width:100% !important;
  height:4px !important;
  background:linear-gradient(90deg,#00abc4,#78dce8) !important;
  transform:scaleX(0) !important;
  transform-origin:left center !important;
  opacity:1 !important;
  transition:transform .3s cubic-bezier(.2,.8,.2,1) !important;
}
.proof-card::after{
  content:"0" attr(data-interactive-index) !important;
  position:absolute !important;
  right:18px !important;
  top:17px !important;
  bottom:auto !important;
  color:#9aabba !important;
  font-size:.76rem !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  opacity:1 !important;
  transform:none !important;
  transition:color .25s ease,transform .25s ease !important;
}
.proof-card:hover,
.proof-card:focus-visible,
.proof-card.active{
  background:#fff !important;
  background-image:none !important;
  transform:translateY(-6px) !important;
  box-shadow:0 22px 48px rgba(31,50,67,.12) !important;
  border-color:rgba(0,171,196,.32) !important;
}
.proof-card:hover::before,.proof-card:focus-visible::before,.proof-card.active::before{transform:scaleX(1) !important;}
.proof-card:hover::after,.proof-card:focus-visible::after,.proof-card.active::after{color:#00abc4 !important;transform:translateY(-1px) !important;}
.proof-card .icon-box{transition:transform .28s ease,box-shadow .28s ease !important;}
.proof-card:hover .icon-box,.proof-card:focus-visible .icon-box,.proof-card.active .icon-box{
  background:#e6f7fa !important;
  color:#00abc4 !important;
  transform:translateY(-2px) scale(1.06) !important;
  box-shadow:0 8px 22px rgba(0,171,196,.12) !important;
}

/* Process: interactive line connects 01 / 02 / 03 */
.process-wrap{
  --process-base-bg:var(--co-card);
  position:relative !important;
  overflow:hidden !important;
}
.process-progress-track{
  position:absolute !important;
  left:16.7% !important;
  right:16.7% !important;
  top:96px !important;
  height:3px !important;
  border-radius:999px !important;
  background:rgba(109,219,233,.20) !important;
  z-index:3 !important;
  pointer-events:none !important;
  overflow:visible !important;
}
.process-progress-bar{
  position:relative !important;
  width:0 !important;
  height:100% !important;
  border-radius:inherit !important;
  background:linear-gradient(90deg,#00abc4 0%,#80e3ed 100%) !important;
  box-shadow:0 0 18px rgba(0,171,196,.30) !important;
  transition:width .44s cubic-bezier(.2,.8,.2,1) !important;
}
.process-progress-bar::after{
  content:"" !important;
  position:absolute !important;
  right:-5px !important;
  top:50% !important;
  width:10px !important;
  height:10px !important;
  transform:translateY(-50%) !important;
  border-radius:50% !important;
  background:#7be1ec !important;
  box-shadow:0 0 0 5px rgba(0,171,196,.11),0 0 16px rgba(0,171,196,.42) !important;
}
.process-grid{position:relative !important;z-index:2 !important;}
.process-card{
  background:rgba(35,48,65,.42) !important;
  background-image:none !important;
  cursor:pointer !important;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease !important;
}
.process-card:hover,
.process-card:focus-visible,
.process-card.active{
  background:rgba(35,48,65,.42) !important;
  background-image:none !important;
  transform:translateY(-6px) !important;
  border-color:rgba(109,219,233,.34) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.16) !important;
}
.process-card .step-no{
  position:relative !important;
  z-index:5 !important;
  transition:transform .28s ease,box-shadow .28s ease !important;
}
.process-card:hover .step-no,.process-card:focus-visible .step-no,.process-card.active .step-no{
  background:var(--co-cyan) !important;
  transform:translateY(-2px) scale(1.06) !important;
  box-shadow:0 0 0 7px rgba(0,171,196,.12) !important;
}
.process-link a{transition:transform .22s ease,color .22s ease !important;}
.process-link a:hover{transform:translateX(4px) !important;}

/* Training / content cards: no hover background or glow overlay */
.training-card::before,.training-card::after,
.catalog-card::before,.catalog-card::after,
.story-card::before,.story-card::after,
.hero-visual::before,.hero-visual::after,
.finder::before,.finder::after{display:none !important;content:none !important;}
.training-card:hover,.training-card:focus-within{
  background:#fff !important;
  background-image:none !important;
  transform:translateY(-5px) !important;
  box-shadow:0 20px 42px rgba(31,50,67,.11) !important;
  border-color:rgba(0,171,196,.28) !important;
}
.training-card a{transition:transform .22s ease,color .22s ease !important;}
.training-card:hover a,.training-card:focus-within a{transform:translateX(4px) !important;}
.outcome-card:hover,.outcome-card:focus-within,
.case-card:hover,.case-card:focus-within{
  background:#fff !important;
  background-image:none !important;
}

/* Keep subpage hover effects structural, not background-changing */
body.co-subpage .training-card:hover,
body.co-subpage .deliverable-card:hover,
body.co-subpage .impact-card:hover,
body.co-subpage .process-card:hover,
body.co-subpage .portfolio-card:hover{
  background-color:inherit !important;
  background-image:none !important;
}

/* ---------------------------------------------------------
   CONTACT: logo fills available upper space, contact cards down
   --------------------------------------------------------- */
#contact .contact-shell{overflow:hidden !important;}
#contact .contact-grid{align-items:stretch !important;}
#contact .contact-side{
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
  min-height:100% !important;
}
#contact .contact-logo-card{
  flex:1 1 auto !important;
  min-height:300px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:linear-gradient(145deg,#f7fafb 0%,#eef3f6 100%) !important;
}
#contact .contact-logo-card img{
  width:min(370px,88%) !important;
  max-height:255px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 10px 24px rgba(18,35,54,.07)) !important;
}
#contact .contact-details{
  flex:0 0 auto !important;
  margin-top:auto !important;
  display:grid !important;
  gap:12px !important;
}
#contact .contact-item{
  min-height:92px !important;
  border:0 !important;
  box-shadow:0 10px 26px rgba(31,50,67,.055) !important;
}
#contact .contact-item:hover{
  background:#f6f8f9 !important;
  transform:translateY(-2px) !important;
  box-shadow:0 14px 30px rgba(31,50,67,.08) !important;
}

@media (max-width:980px){
  .hero .hero-content{padding-top:42px !important;}
  .process-progress-track{left:16.7% !important;right:16.7% !important;top:93px !important;}
  #contact .contact-logo-card{min-height:250px !important;}
  #contact .contact-logo-card img{width:min(315px,84%) !important;max-height:210px !important;}
}

@media (max-width:780px){
  .hero .hero-content{padding-top:26px !important;padding-bottom:64px !important;}
  .hero-chip-cloud{margin-bottom:20px !important;}
  .hero-chip{min-height:40px !important;padding:0 14px !important;font-size:.9rem !important;}
  .hero-chip-primary{min-height:43px !important;}
  .process-progress-track{display:none !important;}
  #contact .contact-side{display:flex !important;}
  #contact .contact-logo-card{min-height:220px !important;flex:none !important;}
  #contact .contact-logo-card img{width:min(280px,80%) !important;max-height:180px !important;}
}

@media (max-width:560px){
  .hero{min-height:100svh !important;}
  .hero .hero-content{padding-top:16px !important;padding-bottom:48px !important;}
  .hero-chip-cloud{gap:9px !important;margin-bottom:18px !important;}
  .hero-chip-row{gap:8px !important;}
  .hero-chip{font-size:.82rem !important;min-height:38px !important;padding:0 12px !important;}
  .hero-chip-primary{font-size:.86rem !important;min-height:41px !important;}
  .hero-chip svg{width:16px !important;height:16px !important;}
  .hero-brand-title{font-size:clamp(2.65rem,13vw,3.65rem) !important;}
  .hero-service-line{font-size:1.02rem !important;max-width:330px !important;}
  .hero .hero-claim{font-size:.98rem !important;max-width:310px !important;}
  #contact .contact-logo-card{min-height:190px !important;}
  #contact .contact-logo-card img{width:min(250px,82%) !important;max-height:155px !important;}
}

@media (prefers-reduced-motion:reduce){
  .proof-card,.process-card,.training-card,.process-progress-bar,.process-link a{transition:none !important;}
}

/* === hero-footer-interactions.css === */
/* Hero + footer interaction polish — no hover background fills */
.hero .hero-content{
  --hero-x:0px;
  --hero-y:0px;
  --hero-x-soft:0px;
  --hero-y-soft:0px;
  perspective:1000px;
}
.hero-chip-cloud{
  transform:translate3d(var(--hero-x-soft),var(--hero-y-soft),0);
  transition:transform .48s cubic-bezier(.2,.8,.2,1);
}
.hero-brand-title,
.hero-service-line,
.hero-claim{
  transform:translate3d(var(--hero-x),var(--hero-y),0);
  transition:transform .52s cubic-bezier(.2,.8,.2,1);
}
.hero-ctas{
  transform:translate3d(calc(var(--hero-x) * -.45),calc(var(--hero-y) * -.45),0);
  transition:transform .52s cubic-bezier(.2,.8,.2,1);
}
.hero-chip{
  position:relative;
  isolation:isolate;
  cursor:pointer;
  text-decoration:none!important;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),border-color .24s ease,color .24s ease,box-shadow .24s ease!important;
}
.hero-chip::after{
  content:"";
  position:absolute;
  left:18%;right:18%;bottom:-5px;
  height:2px;border-radius:999px;
  background:var(--co-cyan);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .24s ease;
}
.hero-chip:hover,.hero-chip:focus-visible{
  transform:translateY(-3px)!important;
  color:var(--co-cyan-2)!important;
  border-color:rgba(0,171,196,.55)!important;
  box-shadow:0 10px 26px rgba(0,171,196,.10)!important;
  outline:none;
}
.hero-chip:hover::after,.hero-chip:focus-visible::after{transform:scaleX(1)}
.hero-chip svg{transition:transform .28s cubic-bezier(.2,.8,.2,1),stroke .22s ease}
.hero-chip:hover svg,.hero-chip:focus-visible svg{transform:scale(1.12) rotate(-3deg)}
.hero-chip-primary:hover svg,.hero-chip-primary:focus-visible svg{transform:scale(1.12) rotate(3deg)}
.hero-ctas .btn svg{transition:transform .22s ease}
.hero-ctas .btn:hover svg,.hero-ctas .btn:focus-visible svg{transform:translateX(4px)}
.hero .service-marquee{transition:opacity .25s ease}
.hero .marquee-chip{transition:transform .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease!important}
.hero .marquee-chip:hover{
  transform:translateY(-2px);
  color:var(--co-cyan-2)!important;
  border-color:rgba(0,171,196,.48)!important;
  box-shadow:0 10px 24px rgba(0,171,196,.09)!important;
}

/* Footer: same underline language as the header navigation */
footer .footer-list a{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  width:max-content!important;
  max-width:100%!important;
  transition:color .24s ease,transform .24s ease!important;
}
footer .footer-list a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-6px;
  height:2px;border-radius:999px;
  background:var(--co-fix-cyan,var(--co-cyan,#00abc4));
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .26s ease;
}
footer .footer-list a:hover,
footer .footer-list a:focus-visible,
footer .footer-list a.co-footer-active{
  color:#78e3ee!important;
  transform:translateX(2px);
  outline:none;
}
footer .footer-list a:hover::after,
footer .footer-list a:focus-visible::after,
footer .footer-list a.co-footer-active::after{transform:scaleX(1)}
footer .socials a{
  position:relative;
  overflow:visible!important;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),border-color .24s ease,box-shadow .24s ease,color .24s ease!important;
}
footer .socials a:hover,footer .socials a:focus-visible{
  transform:translateY(-4px)!important;
  color:#7fe7f0!important;
  border-color:rgba(127,231,240,.38)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.12),0 0 0 3px rgba(0,171,196,.08)!important;
  outline:none;
}
footer .socials svg{transition:transform .24s cubic-bezier(.2,.8,.2,1)}
footer .socials a:hover svg,footer .socials a:focus-visible svg{transform:scale(1.1)}
footer .footer-brand{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
footer .footer-brand:hover{transform:translateY(-2px)}
footer .footer-brand img{transition:transform .32s cubic-bezier(.2,.8,.2,1),filter .32s ease}
footer .footer-brand:hover img{transform:scale(1.045);filter:drop-shadow(0 9px 18px rgba(0,171,196,.14))}

@media(max-width:760px){
  footer .footer-list a{margin-inline:auto!important}
  footer .footer-list a:hover,footer .footer-list a:focus-visible,footer .footer-list a.co-footer-active{transform:none}
}
@media(pointer:coarse){
  .hero .hero-content{--hero-x:0px!important;--hero-y:0px!important;--hero-x-soft:0px!important;--hero-y-soft:0px!important}
}
@media(prefers-reduced-motion:reduce){
  .hero-chip-cloud,.hero-brand-title,.hero-service-line,.hero-claim,.hero-ctas,.hero-chip,footer .footer-list a,footer .socials a,footer .footer-brand,footer .footer-brand img{transition:none!important;transform:none!important}
}

/* === ui-refinement-v4.css === */
/* UI refinement v4 — requested hover direction, contact interactions and unified footer */

/* Header/subpage nav underline always draws from left -> right. */
#header .nav-link::after,
body.co-subpage #header .nav-link::after{
  transform-origin:left center !important;
}

/* Footer links: underline starts on the left, never from the center. */
footer .footer-list ul a{
  position:relative !important;
  display:inline-flex !important;
  width:max-content !important;
  max-width:100% !important;
  align-items:center !important;
  transform:none !important;
  transition:color .22s ease, transform .22s ease !important;
}
footer .footer-list ul a::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:-5px !important;
  height:2px !important;
  border-radius:999px !important;
  background:#62d9e7 !important;
  transform:scaleX(0) !important;
  transform-origin:left center !important;
  transition:transform .26s cubic-bezier(.22,.8,.22,1) !important;
}
footer .footer-list ul a:hover,
footer .footer-list ul a:focus-visible,
footer .footer-list ul a.co-footer-active{
  color:#7fe6ef !important;
  transform:translateX(3px) !important;
  outline:none !important;
}
footer .footer-list ul a:hover::after,
footer .footer-list ul a:focus-visible::after,
footer .footer-list ul a.co-footer-active::after{
  transform:scaleX(1) !important;
}

/* Hero chips: no underline on hover; use lift, border and icon motion instead. */
.hero-chip::after,
.hero-chip:hover::after,
.hero-chip:focus-visible::after{
  display:none !important;
  content:none !important;
}
.hero-chip{
  overflow:hidden !important;
  transform-origin:center !important;
}
.hero-chip:hover,
.hero-chip:focus-visible{
  transform:translateY(-4px) scale(1.025) !important;
  border-color:rgba(0,171,196,.58) !important;
  box-shadow:0 14px 30px rgba(26,67,82,.12), 0 0 0 3px rgba(0,171,196,.06) !important;
  color:#008fa8 !important;
}
.hero-chip svg{
  transition:transform .28s cubic-bezier(.2,.8,.2,1), color .22s ease !important;
}
.hero-chip:hover svg,
.hero-chip:focus-visible svg{
  transform:translateY(-1px) scale(1.13) !important;
}
.hero-chip-primary:hover svg,
.hero-chip-primary:focus-visible svg{
  transform:translateY(-1px) scale(1.13) rotate(5deg) !important;
}

/* Contact details become real interactive cards without changing the whole background. */
#contact .contact-details{
  gap:15px !important;
}
#contact .contact-item{
  position:relative !important;
  isolation:isolate !important;
  text-decoration:none !important;
  color:inherit !important;
  cursor:pointer !important;
  overflow:hidden !important;
  padding-right:54px !important;
  transition:transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s ease, border-color .26s ease !important;
}
#contact .contact-item::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:14px !important;
  bottom:14px !important;
  width:3px !important;
  border-radius:999px !important;
  background:var(--co-cyan,#00abc4) !important;
  transform:scaleY(0) !important;
  transform-origin:center !important;
  transition:transform .26s cubic-bezier(.2,.8,.2,1) !important;
}
#contact .contact-item::after{
  content:"↗" !important;
  position:absolute !important;
  right:20px !important;
  top:50% !important;
  transform:translate(-5px,-50%) !important;
  color:#00a4bd !important;
  font-size:1.05rem !important;
  font-weight:800 !important;
  opacity:0 !important;
  transition:opacity .22s ease, transform .26s cubic-bezier(.2,.8,.2,1) !important;
}
#contact .contact-item:hover,
#contact .contact-item:focus-visible{
  transform:translateY(-3px) !important;
  border-color:rgba(0,171,196,.42) !important;
  box-shadow:0 16px 34px rgba(31,50,67,.10) !important;
  outline:none !important;
}
#contact .contact-item:hover::before,
#contact .contact-item:focus-visible::before{
  transform:scaleY(1) !important;
}
#contact .contact-item:hover::after,
#contact .contact-item:focus-visible::after{
  opacity:1 !important;
  transform:translate(0,-50%) !important;
}
#contact .contact-item .icon-box{
  transition:transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease !important;
}
#contact .contact-item:hover .icon-box,
#contact .contact-item:focus-visible .icon-box{
  transform:scale(1.07) rotate(-3deg) !important;
  box-shadow:0 9px 20px rgba(0,171,196,.12) !important;
}
#contact .contact-item strong{
  transition:color .22s ease !important;
}
#contact .contact-item:hover strong,
#contact .contact-item:focus-visible strong{
  color:#008fa8 !important;
}

/* Footer layout exactly in the requested three-column style. */
footer{
  background:#46566e !important;
  color:#fff !important;
  padding:72px 0 30px !important;
  border-top:0 !important;
}
footer .container{
  width:min(1380px,calc(100% - 64px)) !important;
  margin-inline:auto !important;
}
footer .footer-grid{
  display:grid !important;
  grid-template-columns:1.2fr .78fr .78fr !important;
  gap:82px !important;
  align-items:start !important;
}
footer .footer-brand{
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
}
footer .footer-brand .brand-logo{
  width:76px !important;
  height:54px !important;
  object-fit:contain !important;
  flex:0 0 76px !important;
}
footer .footer-brand strong{
  font-size:1.06rem !important;
  line-height:1.15 !important;
  color:#fff !important;
  font-weight:850 !important;
}
footer .footer-brand strong span{color:#00b6cf !important;}
footer .footer-tag{
  margin-top:5px !important;
  color:#d0d9e5 !important;
  font-size:.9rem !important;
  font-weight:750 !important;
}
footer .footer-lead{
  margin:26px 0 0 !important;
  color:#fff !important;
  font-size:.96rem !important;
  line-height:1.6 !important;
}
footer .footer-services{
  list-style:none !important;
  padding:0 !important;
  margin:20px 0 0 !important;
  display:grid !important;
  gap:4px !important;
}
footer .footer-services li{
  color:#fff !important;
  font-weight:730 !important;
  font-size:.92rem !important;
  line-height:1.35 !important;
}
footer .footer-services li::before{
  content:"* " !important;
  color:#fff !important;
}
footer .footer-promise{
  margin:24px 0 0 !important;
  color:#fff !important;
  font-size:.92rem !important;
  font-weight:740 !important;
  line-height:1.45 !important;
}
footer .footer-contact-link{
  display:inline-flex !important;
  margin-top:26px !important;
  color:#fff !important;
  font-size:.92rem !important;
  font-weight:760 !important;
  text-decoration:none !important;
  transition:color .22s ease, transform .22s ease !important;
}
footer .footer-contact-link:hover,
footer .footer-contact-link:focus-visible{
  color:#7fe6ef !important;
  transform:translateX(3px) !important;
  outline:none !important;
}
footer .footer-list h3{
  margin:0 0 21px !important;
  color:#fff !important;
  font-size:1rem !important;
  font-weight:850 !important;
}
footer .footer-list ul{
  display:grid !important;
  gap:14px !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
footer .footer-list a{
  color:#e8eef4 !important;
  font-size:.94rem !important;
  font-weight:570 !important;
  text-decoration:none !important;
}
footer .socials{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:14px !important;
  margin-top:26px !important;
}
/* Fix the social buttons: true square dimensions, centered icons, no inherited underline. */
footer .footer-list .socials a{
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:44px !important;
  min-height:44px !important;
  flex:0 0 44px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:12px !important;
  background:#314056 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#fff !important;
  transform:none !important;
  box-shadow:none !important;
  line-height:1 !important;
  transition:transform .24s cubic-bezier(.2,.8,.2,1), background-color .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
footer .footer-list .socials a::after{display:none !important;content:none !important;}
footer .footer-list .socials a:hover,
footer .footer-list .socials a:focus-visible{
  transform:translateY(-4px) scale(1.04) !important;
  background:#35475f !important;
  border-color:rgba(94,219,232,.28) !important;
  box-shadow:0 12px 24px rgba(20,35,52,.20),0 0 0 3px rgba(0,171,196,.07) !important;
  color:#fff !important;
  outline:none !important;
}
footer .footer-list .socials svg{
  display:block !important;
  width:20px !important;
  height:20px !important;
  flex:0 0 20px !important;
  fill:currentColor !important;
  stroke:none !important;
  transform:none !important;
}
footer .footer-list .socials svg.stroke{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.9 !important;
}
footer .footer-bottom{
  margin-top:50px !important;
  padding-top:28px !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  color:#d6dfE8 !important;
  font-size:.92rem !important;
  line-height:1.5 !important;
  text-align:center !important;
}

@media(max-width:980px){
  footer .footer-grid{
    grid-template-columns:1fr 1fr !important;
    gap:46px !important;
  }
  footer .footer-grid > :first-child{grid-column:1/-1 !important;}
}

@media(max-width:760px){
  footer{padding:56px 0 26px !important;}
  footer .container{width:calc(100% - 32px) !important;}
  footer .footer-grid{grid-template-columns:1fr !important;gap:38px !important;text-align:center !important;}
  footer .footer-grid > :first-child{grid-column:auto !important;}
  footer .footer-brand{justify-content:center !important;}
  footer .footer-list ul{justify-items:center !important;}
  footer .footer-lead,footer .footer-promise{max-width:430px !important;margin-left:auto !important;margin-right:auto !important;}
  footer .footer-services{justify-items:center !important;}
  footer .socials{justify-content:center !important;}
  footer .footer-contact-link{justify-content:center !important;}
  footer .footer-list ul a:hover,footer .footer-list ul a:focus-visible,footer .footer-list ul a.co-footer-active{transform:none !important;}
  #contact .contact-item{padding-right:48px !important;}
}

@media(prefers-reduced-motion:reduce){
  #contact .contact-item,
  #contact .contact-item::before,
  #contact .contact-item::after,
  #contact .contact-item .icon-box,
  footer .footer-list ul a,
  footer .footer-list ul a::after,
  footer .footer-contact-link,
  footer .footer-list .socials a,
  .hero-chip{transition:none !important;}
}

/* === ui-motion-v7.css === */
/* v7 — centered hero, calm autonomous chip motion, richer footer brand interactions */

/* --- HERO: center the complete composition responsively --- */
.hero{
  min-height:100svh !important;
  min-height:100dvh !important;
}
.hero .hero-content{
  width:min(1080px,calc(100% - 40px)) !important;
  min-height:calc(100svh - var(--header-h,76px)) !important;
  min-height:calc(100dvh - var(--header-h,76px)) !important;
  margin-inline:auto !important;
  padding:clamp(28px,4vh,52px) 0 clamp(118px,14vh,156px) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
.hero-chip-cloud{
  width:100% !important;
  margin:0 auto clamp(48px,7vh,76px) !important;
}
.hero-brand-title{
  margin:0 auto clamp(38px,5.8vh,68px) !important;
}
.hero-service-line{margin:0 auto 12px !important;}
.hero .hero-claim{margin:0 auto !important;}
.hero .hero-ctas{margin-top:clamp(26px,3.6vh,38px) !important;}

/* --- HERO CHIPS: no hover background change, calm self-motion --- */
.hero-chip{
  --co-float-y:0px;
  --co-float-r:0deg;
  background:rgba(255,255,255,.80) !important;
  background-color:rgba(255,255,255,.80) !important;
  border:1px solid rgba(0,171,196,.30) !important;
  box-shadow:0 8px 22px rgba(31,50,67,.055) !important;
  transform-origin:center !important;
  will-change:transform;
  transition:border-color .24s ease,box-shadow .26s ease,color .22s ease !important;
}
.hero-chip::before,
.hero-chip::after,
.hero-chip:hover::before,
.hero-chip:hover::after,
.hero-chip:focus-visible::before,
.hero-chip:focus-visible::after{
  display:none !important;
  content:none !important;
}
@media (prefers-reduced-motion:no-preference){
  .hero-chip{animation:coChipFloat 5.6s ease-in-out infinite;}
  .hero-chip-primary{animation-duration:6.4s;animation-delay:-1.2s;}
  .hero-chip-row .hero-chip:nth-child(1){animation-delay:-.4s;animation-duration:5.8s;}
  .hero-chip-row .hero-chip:nth-child(2){animation-delay:-2.1s;animation-duration:6.3s;}
  .hero-chip-row .hero-chip:nth-child(3){animation-delay:-3.4s;animation-duration:5.5s;}
  .hero-chip-row .hero-chip:nth-child(4){animation-delay:-1.6s;animation-duration:6.8s;}
}
@keyframes coChipFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  38%{transform:translate3d(0,-3px,0) rotate(-.18deg)}
  70%{transform:translate3d(0,2px,0) rotate(.16deg)}
}
.hero-chip:hover,
.hero-chip:focus-visible{
  animation-play-state:paused !important;
  background:rgba(255,255,255,.80) !important;
  background-color:rgba(255,255,255,.80) !important;
  transform:translate3d(0,-4px,0) scale(1.018) !important;
  border-color:rgba(0,171,196,.62) !important;
  color:#008da6 !important;
  box-shadow:0 14px 30px rgba(31,50,67,.105),0 0 0 3px rgba(0,171,196,.055) !important;
  outline:none !important;
}
.hero-chip:active{transform:translate3d(0,-1px,0) scale(.992) !important;}
.hero-chip svg{
  transition:transform .28s cubic-bezier(.2,.8,.2,1),filter .25s ease !important;
}
.hero-chip:hover svg,
.hero-chip:focus-visible svg{
  transform:scale(1.13) rotate(-4deg) !important;
  filter:drop-shadow(0 3px 5px rgba(0,171,196,.20));
}
.hero-chip-primary:hover svg,
.hero-chip-primary:focus-visible svg{transform:scale(1.12) rotate(4deg) !important;}

/* --- FOOTER LEFT COLUMN: more useful and interactive, still calm --- */
footer .footer-about{
  position:relative !important;
  max-width:430px !important;
}
footer .footer-brand-link{
  width:max-content !important;
  max-width:100% !important;
  color:inherit !important;
  text-decoration:none !important;
  border-radius:14px !important;
  transition:transform .26s cubic-bezier(.2,.8,.2,1),filter .26s ease !important;
}
footer .footer-brand-link::after{display:none !important;content:none !important;}
footer .footer-brand-link:hover,
footer .footer-brand-link:focus-visible{
  transform:translateY(-3px) !important;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.14));
  outline:none !important;
}
footer .footer-brand-link .brand-logo{
  transition:transform .34s cubic-bezier(.2,.8,.2,1),filter .3s ease !important;
}
footer .footer-brand-link:hover .brand-logo,
footer .footer-brand-link:focus-visible .brand-logo{
  transform:scale(1.06) rotate(-2deg) !important;
  filter:drop-shadow(0 8px 14px rgba(0,216,238,.15));
}
footer .footer-brand-link strong span{
  position:relative !important;
}
footer .footer-brand-link strong span::after{
  content:"";
  position:absolute;
  left:0;bottom:-3px;
  width:100%;height:2px;
  border-radius:999px;
  background:#62d9e7;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .27s ease;
}
footer .footer-brand-link:hover strong span::after,
footer .footer-brand-link:focus-visible strong span::after{transform:scaleX(1);}

footer .footer-services li{overflow:visible !important;}
footer .footer-services a{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  color:#fff !important;
  text-decoration:none !important;
  transition:transform .22s ease,color .22s ease !important;
}
footer .footer-services a::before{
  content:"→";
  display:inline-block;
  color:#73e1ec;
  font-weight:900;
  opacity:0;
  width:0;
  transform:translateX(-7px);
  transition:width .22s ease,opacity .22s ease,transform .22s ease;
}
footer .footer-services a::after{display:none !important;content:none !important;}
footer .footer-services a:hover,
footer .footer-services a:focus-visible{
  transform:translateX(4px) !important;
  color:#8cecf3 !important;
  outline:none !important;
}
footer .footer-services a:hover::before,
footer .footer-services a:focus-visible::before{
  width:14px;
  opacity:1;
  transform:translateX(0);
}
footer .footer-promise{
  position:relative !important;
  padding-left:14px !important;
}
footer .footer-promise::before{
  content:"";
  position:absolute;
  left:0;top:3px;bottom:3px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg,#6ce7ef,#00abc4);
  opacity:.68;
}
footer .footer-contact-link{
  position:relative !important;
  gap:7px !important;
  align-items:center !important;
}
footer .footer-contact-link::after{
  content:"↗" !important;
  display:inline-block !important;
  position:static !important;
  width:auto !important;height:auto !important;
  background:none !important;
  transform:translate(-3px,0) !important;
  opacity:0 !important;
  transition:transform .22s ease,opacity .22s ease !important;
}
footer .footer-contact-link:hover::after,
footer .footer-contact-link:focus-visible::after{
  transform:translate(0,0) !important;
  opacity:1 !important;
}

@media(max-width:780px){
  .hero .hero-content{
    padding-top:clamp(18px,3vh,30px) !important;
    padding-bottom:104px !important;
  }
  .hero-chip-cloud{margin-bottom:clamp(34px,5.2vh,48px) !important;}
  .hero-brand-title{margin-bottom:clamp(28px,4.4vh,38px) !important;}
}
@media(max-width:560px){
  .hero .hero-content{width:calc(100% - 24px) !important;padding-bottom:94px !important;}
  .hero-chip-cloud{margin-bottom:28px !important;}
  .hero-brand-title{margin-bottom:24px !important;}
  footer .footer-about{max-width:100% !important;}
}
@media(prefers-reduced-motion:reduce){
  .hero-chip,
  footer .footer-brand-link,
  footer .footer-brand-link .brand-logo,
  footer .footer-services a{animation:none !important;transition:none !important;transform:none !important;}
}

/* === header-logo-hover-v9.css === */
/* v9 — subtle header brand interaction */
.site-header .brand{
  position:relative;
  transition:transform .26s cubic-bezier(.22,.8,.22,1), filter .26s ease;
  transform-origin:left center;
  will-change:transform;
}

.site-header .brand .brand-logo{
  transition:transform .30s cubic-bezier(.22,.8,.22,1), filter .30s ease;
  transform-origin:center;
  will-change:transform;
}

.site-header .brand .brand-name{
  transition:transform .26s cubic-bezier(.22,.8,.22,1), color .26s ease;
}

.site-header .brand:hover,
.site-header .brand:focus-visible{
  transform:translateY(-1px);
  filter:drop-shadow(0 5px 10px rgba(20,42,61,.05));
}

.site-header .brand:hover .brand-logo,
.site-header .brand:focus-visible .brand-logo{
  transform:scale(1.035) rotate(-.35deg);
  filter:drop-shadow(0 7px 13px rgba(0,171,196,.16));
}

.site-header .brand:hover .brand-name,
.site-header .brand:focus-visible .brand-name{
  transform:translateX(1px);
}

.site-header .brand:active{
  transform:translateY(0) scale(.995);
}

.site-header .brand:active .brand-logo{
  transform:scale(1.015);
}

@media (hover:none), (pointer:coarse){
  .site-header .brand:hover,
  .site-header .brand:hover .brand-logo,
  .site-header .brand:hover .brand-name{
    transform:none;
    filter:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .site-header .brand,
  .site-header .brand .brand-logo,
  .site-header .brand .brand-name{
    transition:none !important;
  }
}

/* === visual-content-v10.css === */

/* ===== Visual content upgrade v10 ===== */
.visual-media{position:relative;overflow:hidden;border-radius:22px;background:#dfe8ec;isolation:isolate}
.visual-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .45s ease}
.visual-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 58%,rgba(21,34,51,.16));opacity:.55}
.visual-media:hover img{transform:scale(1.025)}

/* Subpage hero: real visual + existing facts */
.sales-hero .hero-visual{padding:18px!important}
.hero-photo-wrap{margin:0 0 18px;border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:#152235;box-shadow:0 14px 34px rgba(18,34,48,.18)}
.hero-photo-wrap img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .4s ease}
.hero-visual:hover .hero-photo-wrap img{transform:scale(1.025);filter:saturate(1.03)}

/* Homepage service panel gets a visual without turning into a text wall */
#services .service-visual-card{grid-column:1/-1;margin:4px 0 0;border-radius:18px;overflow:hidden;min-height:210px;max-height:290px;position:relative;background:#243244;border:1px solid rgba(255,255,255,.1)}
#services .service-visual-card img{display:block;width:100%;height:100%;min-height:210px;max-height:290px;object-fit:cover;opacity:.88;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .35s ease}
#services .service-visual-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(36,50,68,.38),transparent 48%,rgba(0,171,196,.06));pointer-events:none}
#services .service-panel:hover .service-visual-card img{transform:scale(1.018);opacity:.94}
#services .service-visual-card figcaption{position:absolute;left:18px;bottom:16px;z-index:2;padding:8px 11px;border-radius:999px;background:rgba(23,34,48,.72);backdrop-filter:blur(8px);color:#f8fbfc;font-size:.76rem;font-weight:800;letter-spacing:.01em}

/* Deliverables on homepage: visual thumbnails */
.outcome-card .outcome-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;margin:0 0 17px;display:block;background:#e7eff2;box-shadow:0 8px 22px rgba(31,50,67,.08);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.outcome-card:hover .outcome-thumb,.outcome-card:focus-within .outcome-thumb{transform:scale(1.018)}

/* Quiet editorial image inside homepage training section */
.training-visual-band{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:0;margin:0 auto 30px;border:1px solid var(--co-line);border-radius:22px;overflow:hidden;background:#fff;box-shadow:var(--co-shadow-sm)}
.training-visual-band .media{min-height:280px;overflow:hidden;background:#17263a}
.training-visual-band .media img{width:100%;height:100%;min-height:280px;object-fit:cover;display:block;transition:transform .65s cubic-bezier(.2,.8,.2,1)}
.training-visual-band:hover .media img{transform:scale(1.025)}
.training-visual-band .copy{padding:30px;display:flex;flex-direction:column;justify-content:center}
.training-visual-band .copy .kicker{margin-bottom:10px}
.training-visual-band .copy h3{margin:0;color:var(--co-ink-2);font-size:clamp(1.45rem,2vw,2rem);letter-spacing:-.025em}
.training-visual-band .copy p{margin:12px 0 0;color:var(--co-muted);line-height:1.65}

/* Project / case visuals */
.story-card .story-image{display:block;width:calc(100% + 54px);height:190px;object-fit:cover;margin:-27px -27px 22px;border-bottom:1px solid var(--co-line);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.story-card:hover .story-image{transform:scale(1.012)}

@media(max-width:900px){
  .training-visual-band{grid-template-columns:1fr}
  .training-visual-band .media,.training-visual-band .media img{min-height:240px}
}
@media(max-width:780px){
  .sales-hero .hero-visual{padding:14px!important}
  #services .service-visual-card,#services .service-visual-card img{min-height:180px}
  .outcome-card .outcome-thumb{aspect-ratio:2/1}
  .story-card .story-image{height:175px}
}
@media(max-width:560px){
  .hero-photo-wrap{aspect-ratio:16/10}
  .training-visual-band .copy{padding:23px}
  .training-visual-band .media,.training-visual-band .media img{min-height:210px}
  #services .service-visual-card,#services .service-visual-card img{min-height:160px;max-height:210px}
  #services .service-visual-card figcaption{left:12px;bottom:12px;font-size:.69rem}
  .story-card .story-image{width:calc(100% + 54px);height:160px}
}
@media(prefers-reduced-motion:reduce){
  .visual-media img,.hero-photo-wrap img,#services .service-visual-card img,.outcome-card .outcome-thumb,.training-visual-band .media img,.story-card .story-image{transition:none!important;transform:none!important}
}

/* ===== Official bright visual treatment ===== */
:root{
  --co-media-border: rgba(17, 151, 177, .18);
  --co-media-shadow: 0 18px 46px rgba(37, 59, 78, .10);
}
.visual-media,
.hero-photo-wrap,
.training-visual-band,
#services .service-visual-card{
  border:1px solid var(--co-media-border);
  box-shadow:var(--co-media-shadow);
}
.visual-media,
.hero-photo-wrap,
.training-visual-band .media,
#services .service-visual-card{
  background:#f6fafb;
}
.visual-media img,
.hero-photo-wrap img,
.training-visual-band .media img,
#services .service-visual-card img,
.outcome-card .outcome-thumb,
.story-card .story-image{
  filter:brightness(1.035) contrast(1.025) saturate(.96);
}
.visual-media::after{
  background:linear-gradient(180deg,transparent 72%,rgba(17,36,55,.07));
  opacity:.75;
}
#services .service-visual-card img{opacity:1}
#services .service-visual-card::after{
  background:linear-gradient(90deg,rgba(255,255,255,.08),transparent 58%,rgba(0,171,196,.025));
}
#services .service-visual-card figcaption{
  background:rgba(255,255,255,.88);
  color:#193047;
  border:1px solid rgba(17,151,177,.18);
  box-shadow:0 10px 28px rgba(37,59,78,.10);
}
.hero-photo-wrap{
  box-shadow:0 16px 38px rgba(37,59,78,.12);
}
.outcome-card .outcome-thumb{
  box-shadow:0 10px 28px rgba(37,59,78,.09);
  border:1px solid rgba(17,151,177,.12);
}
.story-card .story-image{border-bottom-color:rgba(17,151,177,.12)}

/* Keep motion restrained and corporate */
.visual-media:hover img,
.hero-visual:hover .hero-photo-wrap img,
.training-visual-band:hover .media img,
#services .service-panel:hover .service-visual-card img,
.outcome-card:hover .outcome-thumb,
.outcome-card:focus-within .outcome-thumb,
.story-card:hover .story-image{
  transform:scale(1.012);
}

/* === ui-polish-v12.css === */
/* v12 — service-tab stability, refined deliverable links, autonomous hero icon motion */

/* --------------------------------------------------------------------------
   1) SERVICE SELECTOR — active item must always remain visible and readable
   -------------------------------------------------------------------------- */
#services .service-tabs-row{
  position:relative !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
}
#services .service-tabs-row::before,
#services .service-tabs-row::after{
  display:none !important;
  content:none !important;
}
#services .service-tab{
  min-width:0 !important;
  min-height:50px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  opacity:1 !important;
  visibility:visible !important;
  overflow:visible !important;
  color:#1f3046 !important;
  background:#f7fafb !important;
  border:1px solid rgba(71,99,121,.22) !important;
  border-radius:14px !important;
  box-shadow:none !important;
  transform:none !important;
  transition:border-color .24s ease,color .24s ease,box-shadow .28s ease,transform .28s cubic-bezier(.2,.8,.2,1) !important;
}
#services .service-tab > span,
#services .service-tab > svg{
  display:inline-block !important;
  opacity:1 !important;
  visibility:visible !important;
  color:inherit !important;
}
#services .service-tab > span{
  white-space:nowrap !important;
  font-weight:850 !important;
  line-height:1 !important;
}
#services .service-tab > svg{
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
  stroke:currentColor !important;
}
#services .service-tab.active,
#services .service-tab[aria-selected="true"]{
  color:#fff !important;
  background:linear-gradient(135deg,#00a8c2 0%,#13bdd1 100%) !important;
  border-color:transparent !important;
  box-shadow:0 12px 28px rgba(0,171,196,.19) !important;
  transform:translateY(-1px) !important;
}
#services .service-tab:not(.active):hover,
#services .service-tab:not(.active):focus-visible{
  color:#087e94 !important;
  background:#f7fafb !important;
  border-color:rgba(0,171,196,.52) !important;
  box-shadow:0 9px 20px rgba(31,50,67,.065) !important;
  transform:translateY(-2px) !important;
  outline:none !important;
}
#services .service-tab.active > svg,
#services .service-tab[aria-selected="true"] > svg{
  animation:coServiceActiveIcon 3.2s ease-in-out infinite !important;
}
@keyframes coServiceActiveIcon{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  48%{transform:translate3d(0,-1.5px,0) scale(1.09)}
  70%{transform:translate3d(0,.5px,0) scale(1.025)}
}

/* Softly animate panel swaps. No large flashing background changes. */
#services .service-panel{
  transform-origin:50% 18% !important;
}
#services .service-panel.is-changing{
  opacity:.28 !important;
  transform:translateY(7px) scale(.996) !important;
}

/* --------------------------------------------------------------------------
   2) DELIVERABLE LINKS — tactile, clean and visibly clickable
   -------------------------------------------------------------------------- */
.outcome-card > a{
  --link-progress:0%;
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  width:max-content !important;
  max-width:100% !important;
  margin-top:auto !important;
  padding:8px 0 9px !important;
  color:#008ea6 !important;
  font-weight:850 !important;
  letter-spacing:-.01em !important;
  text-decoration:none !important;
  transform:translate3d(0,0,0) !important;
  transition:color .22s ease,transform .26s cubic-bezier(.2,.8,.2,1),filter .25s ease !important;
}
.outcome-card > a::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  bottom:3px !important;
  width:100% !important;
  height:2px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#00abc4,#64dce8) !important;
  transform:scaleX(0) !important;
  transform-origin:left center !important;
  transition:transform .34s cubic-bezier(.2,.8,.2,1) !important;
}
.outcome-card > a::after{
  content:"→" !important;
  display:inline-block !important;
  font-size:1.04em !important;
  line-height:1 !important;
  transform:translateX(0) !important;
  transition:transform .28s cubic-bezier(.2,.8,.2,1) !important;
}
.outcome-card > a:hover,
.outcome-card > a:focus-visible{
  color:#006f84 !important;
  transform:translate3d(4px,-1px,0) !important;
  filter:drop-shadow(0 5px 9px rgba(0,171,196,.11)) !important;
  outline:none !important;
}
.outcome-card > a:hover::before,
.outcome-card > a:focus-visible::before{
  transform:scaleX(1) !important;
}
.outcome-card > a:hover::after,
.outcome-card > a:focus-visible::after{
  transform:translateX(7px) !important;
}
.outcome-card > a:active{
  transform:translate3d(2px,0,0) scale(.985) !important;
}

/* Keep the card itself calm: no sudden background-color hover. */
.outcome-card:hover,
.outcome-card:focus-within{
  background:#fff !important;
}

/* --------------------------------------------------------------------------
   3) HERO SERVICE ICONS — subtly alive without user interaction
   -------------------------------------------------------------------------- */
.hero-chip{
  background:rgba(255,255,255,.82) !important;
  background-color:rgba(255,255,255,.82) !important;
}
.hero-chip::before,
.hero-chip::after{
  display:none !important;
  content:none !important;
}
@media (prefers-reduced-motion:no-preference){
  .hero-chip svg{
    transform-origin:center !important;
    will-change:transform,filter !important;
    animation:coHeroIconBreath 4.9s ease-in-out infinite !important;
  }
  .hero-chip-primary svg{animation-duration:5.8s !important;animation-delay:-1.7s !important;}
  .hero-chip-row .hero-chip:nth-child(1) svg{animation-delay:-.6s !important;animation-duration:5.15s !important;}
  .hero-chip-row .hero-chip:nth-child(2) svg{animation-delay:-2.0s !important;animation-duration:5.7s !important;}
  .hero-chip-row .hero-chip:nth-child(3) svg{animation-delay:-3.1s !important;animation-duration:4.65s !important;}
  .hero-chip-row .hero-chip:nth-child(4) svg{animation-delay:-1.35s !important;animation-duration:5.45s !important;}
}
@keyframes coHeroIconBreath{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg) scale(1);filter:drop-shadow(0 0 0 rgba(0,171,196,0))}
  34%{transform:translate3d(0,-1.7px,0) rotate(-2.2deg) scale(1.075);filter:drop-shadow(0 3px 5px rgba(0,171,196,.16))}
  66%{transform:translate3d(0,.8px,0) rotate(1.4deg) scale(1.025);filter:drop-shadow(0 2px 4px rgba(0,171,196,.09))}
}
.hero-chip:hover,
.hero-chip:focus-visible{
  background:rgba(255,255,255,.82) !important;
  background-color:rgba(255,255,255,.82) !important;
  border-color:rgba(0,171,196,.62) !important;
  box-shadow:0 13px 27px rgba(31,50,67,.10),0 0 0 3px rgba(0,171,196,.05) !important;
  outline:none !important;
}
.hero-chip:hover svg,
.hero-chip:focus-visible svg{
  animation-play-state:paused !important;
  transform:translateY(-1px) scale(1.13) !important;
}

/* responsive service selector */
@media(max-width:780px){
  #services .service-tabs-row{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  #services .service-tab > span{white-space:normal !important;text-align:center !important;}
}
@media(max-width:520px){
  #services .service-tabs-row{grid-template-columns:1fr !important;}
}
@media(prefers-reduced-motion:reduce){
  #services .service-tab.active > svg,
  #services .service-tab[aria-selected="true"] > svg,
  .hero-chip svg{animation:none !important;}
  .outcome-card > a,
  .outcome-card > a::before,
  .outcome-card > a::after{transition:none !important;}
}

/* === site-v13.css === */
/* Codex Operation v13 — conversion, trust, accessibility, performance polish */

/* --- global interaction discipline --- */
:where(a,button,input,select,textarea){-webkit-tap-highlight-color:transparent}
:where(a,button){touch-action:manipulation}
:where(a,button,.contact-item,.proof-card,.case-card,.training-card,.service-tab){transition-duration:.24s!important;transition-timing-function:cubic-bezier(.2,.8,.2,1)!important}
:where(a,button,.service-tab,.hero-chip,.contact-item):focus-visible{outline:3px solid rgba(0,171,196,.32)!important;outline-offset:3px!important}

/* Header/navigation: calm left-to-right feedback */
.desktop-nav a,.footer-list a,.mobile-menu a{position:relative;text-decoration:none}
.desktop-nav a::after{content:"";position:absolute;left:0;right:auto;bottom:-7px;width:100%;height:2px;border-radius:999px;background:var(--co-cyan);transform:scaleX(0);transform-origin:left center;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.desktop-nav a:hover::after,.desktop-nav a:focus-visible::after,.desktop-nav a.active::after{transform:scaleX(1)}
.desktop-nav a:hover,.desktop-nav a:focus-visible{color:var(--co-cyan-2)!important;transform:translateY(-1px)}

/* HERO: one clear motion language */
.hero-chip{background:rgba(255,255,255,.80)!important;box-shadow:0 7px 20px rgba(31,50,67,.055)!important}
.hero-chip:hover,.hero-chip:focus-visible{background:rgba(255,255,255,.80)!important;transform:translateY(-2px)!important;box-shadow:0 11px 24px rgba(31,50,67,.09)!important;border-color:rgba(0,171,196,.52)!important}
.hero-chip svg{animation-duration:5.8s!important}
.hero-ctas .btn:hover{transform:translateY(-2px)!important}

/* Mobile: poster instead of autoplay video for performance/data savings */
@media(max-width:560px){
  .hero{background-image:linear-gradient(rgba(237,242,244,.72),rgba(237,242,244,.72)),url('../videos/hero-codex-poster.jpg');background-size:cover;background-position:center}
  .hero-video{display:none!important}
}

/* --- trust / standards band --- */
.trust-band{padding:64px 0;background:#fff;border-top:1px solid rgba(0,171,196,.12);border-bottom:1px solid rgba(0,171,196,.12)}
.trust-head{max-width:760px;margin:0 auto 28px;text-align:center}
.trust-head .kicker{margin-bottom:10px}
.trust-head h2{margin:0;color:var(--co-ink-2);font-size:clamp(1.75rem,3vw,2.5rem);letter-spacing:-.035em}
.trust-head p{margin:12px auto 0;max-width:680px;color:var(--co-muted);line-height:1.7}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.trust-card{background:#f8fafb;border:1px solid var(--co-line);border-radius:18px;padding:22px;min-height:150px;box-shadow:var(--co-shadow-sm);position:relative;overflow:hidden}
.trust-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--co-cyan);transition:width .35s ease}
.trust-card:hover::before,.trust-card:focus-within::before{width:100%}
.trust-card:hover{transform:translateY(-3px);border-color:rgba(0,171,196,.34)}
.trust-card strong{display:block;color:var(--co-ink-2);font-size:1rem;margin-bottom:8px}
.trust-card span{display:block;color:var(--co-muted);font-size:.86rem;line-height:1.55}
.trust-mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--co-cyan-soft);color:var(--co-cyan-2);font-weight:900;margin-bottom:15px}

/* --- stronger project/case proof --- */
.case-card{display:flex;flex-direction:column}
.case-card:hover{transform:translateY(-4px);box-shadow:0 24px 58px rgba(29,43,58,.17)}
.case-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}
.case-fact{padding:11px 12px;background:#f0f5f7;border-radius:12px;border:1px solid rgba(66,91,113,.10)}
.case-fact strong{display:block;color:var(--co-ink-2);font-size:.78rem;margin-bottom:3px}
.case-fact span{color:#68788a;font-size:.72rem;line-height:1.35}
.case-card .case-cta{margin-top:20px;display:inline-flex;align-items:center;gap:8px;color:var(--co-cyan-2);font-weight:850;font-size:.84rem;width:max-content}
.case-card .case-cta::after{content:"→";transition:transform .22s ease}
.case-card .case-cta:hover::after{transform:translateX(5px)}

/* --- why codex --- */
.why-wrap{background:var(--co-card);color:#fff;border-radius:26px;padding:40px;box-shadow:var(--co-shadow)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.why-card{position:relative;padding:24px;border-radius:17px;background:rgba(36,50,69,.56);border:1px solid rgba(255,255,255,.11);overflow:hidden}
.why-card::after{content:"";position:absolute;left:24px;bottom:18px;width:26px;height:2px;background:var(--co-cyan);border-radius:99px;transition:width .3s ease}
.why-card:hover::after{width:64px}
.why-card:hover{transform:translateY(-3px);border-color:rgba(45,221,240,.33)}
.why-card .trust-mark{background:rgba(0,171,196,.14);color:#5fe1ec}
.why-card strong{display:block;font-size:1rem;margin-bottom:8px}
.why-card p{margin:0 0 18px;color:#d7e2ea;font-size:.86rem;line-height:1.55}

/* --- contact quick-start conversion --- */
.contact-quickstarts{max-width:1080px;margin:0 auto 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.quickstart{min-height:50px;border:1px solid rgba(0,171,196,.28);border-radius:14px;background:#fff;color:var(--co-ink-2);font-weight:820;padding:11px 16px;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;box-shadow:0 8px 18px rgba(31,50,67,.05)}
.quickstart:hover,.quickstart:focus-visible{transform:translateY(-2px);border-color:rgba(0,171,196,.58);color:var(--co-cyan-2);box-shadow:0 12px 25px rgba(31,50,67,.08)}
.quickstart svg{width:18px;height:18px;stroke:currentColor}

/* Contact logo: remove the visible logo-card background completely. */
.contact-logo-card,.contact-logo-card.logo-focus{background:transparent!important;background-color:transparent!important;border:0!important;box-shadow:none!important;outline:0!important;padding:8px 12px!important;min-height:230px!important;display:grid!important;place-items:center!important;overflow:visible!important}
.contact-logo-card::before,.contact-logo-card::after{content:none!important;display:none!important}
.contact-logo-card img{width:min(92%,430px)!important;max-height:250px!important;object-fit:contain!important;filter:none!important;transform:none!important}
.contact-logo-card:hover img{transform:scale(1.012)!important}
.contact-item{background:#f7f9fa!important;border:1px solid rgba(74,99,120,.13)!important;position:relative;overflow:hidden}
.contact-item::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--co-cyan);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.contact-item:hover::after,.contact-item:focus-visible::after{transform:scaleX(1)}
.contact-item:hover,.contact-item:focus-visible{transform:translateX(3px);background:#f7f9fa!important;box-shadow:0 10px 24px rgba(31,50,67,.07)}

/* --- footer simplified to match primary information architecture --- */
.footer-list a:hover{color:#72e0ec!important;transform:translateX(3px)}
.socials a:hover{background:#2f3c4f!important;color:#72e0ec!important;transform:translateY(-3px) scale(1.04)!important}
.footer-brand-link:hover .brand-logo{transform:translateY(-1px) scale(1.025)}

/* --- accessibility target sizes --- */
.desktop-nav a,.mobile-menu a,.footer-list a,.socials a,.lang button{min-height:32px}
.menu-btn,.socials a{min-width:44px;min-height:44px}
input,select,textarea,button{font:inherit}

/* --- compact responsive rules --- */
@media(max-width:900px){
  .trust-grid,.why-grid{grid-template-columns:repeat(2,1fr)}
  .contact-quickstarts{grid-template-columns:1fr}
  .case-facts{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:560px){
  .trust-band{padding:48px 0}.trust-grid,.why-grid{grid-template-columns:1fr}.why-wrap{padding:22px}.case-facts{grid-template-columns:1fr}.contact-logo-card{min-height:160px!important}.contact-logo-card img{max-height:180px!important}.quickstart{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* === v14-fixes.css === */
/* Codex Operation v14 — focused UI corrections */

/* 1) Homepage process: clean connector from badge to badge, no stray dot/line. */
#process .process-wrap::after{display:none!important;content:none!important}
#process .process-grid{overflow:visible!important}
#process .process-card{position:relative!important;overflow:visible!important;isolation:isolate}
#process .process-card::before{content:none!important;display:none!important}
#process .process-card:not(:last-child)::after{
  content:""!important;display:block!important;position:absolute!important;
  left:47px!important;top:47px!important;width:calc(100% + 18px)!important;height:2px!important;
  border:0!important;background:linear-gradient(90deg,rgba(41,222,236,.9),rgba(41,222,236,.28),rgba(41,222,236,.68))!important;
  background-size:220% 100%!important;transform:none!important;transform-origin:left center!important;
  opacity:.62!important;z-index:-1!important;pointer-events:none!important;
  animation:coProcessFlow 4.8s linear infinite!important;
}
#process .process-card .step-no{position:relative!important;z-index:3!important;box-shadow:0 0 0 7px rgba(0,171,196,.08);transition:transform .28s ease,box-shadow .28s ease!important}
#process .process-card:hover .step-no,#process .process-card:focus-visible .step-no{transform:translateY(-2px) scale(1.06)!important;box-shadow:0 0 0 9px rgba(0,171,196,.12),0 8px 18px rgba(0,171,196,.18)!important}
@keyframes coProcessFlow{0%{background-position:200% 0}100%{background-position:-20% 0}}

/* 2) Contact logo: truly transparent container. */
#contact .contact-logo-card,
#contact .contact-logo-card.logo-focus,
#contact .contact-logo-card.contact-logo-clean{
  background:transparent!important;background-color:transparent!important;background-image:none!important;
  border:0!important;box-shadow:none!important;outline:0!important;
}
#contact .contact-logo-card::before,#contact .contact-logo-card::after{content:none!important;display:none!important}
#contact .contact-logo-card img{background:transparent!important;border:0!important;box-shadow:none!important}

/* 3) Contact cards: remove the broken hover line and use quiet depth/motion. */
#contact .contact-item::before,#contact .contact-item::after{content:none!important;display:none!important}
#contact .contact-item{transform:translate3d(0,0,0)!important;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease!important}
#contact .contact-item:hover,#contact .contact-item:focus-visible{
  transform:translate3d(0,-3px,0)!important;background:#f7f9fa!important;
  border-color:rgba(0,171,196,.26)!important;box-shadow:0 14px 28px rgba(31,50,67,.09)!important;
}
#contact .contact-item .icon-box{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease!important}
#contact .contact-item:hover .icon-box,#contact .contact-item:focus-visible .icon-box{transform:translateY(-2px) scale(1.05)!important;box-shadow:0 7px 16px rgba(0,171,196,.12)!important}

/* 4) Training cards: consistent active-directory course styling. */
.training-card h3{text-wrap:balance}

/* 5) Live website portfolio cards. */
.live-project-section{background:#fff!important}
.live-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.live-project-card{display:block;color:inherit;text-decoration:none;background:#fff;border:1px solid rgba(74,99,120,.16);border-radius:22px;padding:14px;box-shadow:0 14px 36px rgba(31,50,67,.07);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease}
.live-project-card:hover,.live-project-card:focus-visible{transform:translateY(-6px);box-shadow:0 24px 52px rgba(31,50,67,.12);border-color:rgba(0,171,196,.34);outline:none}
.live-browser{overflow:hidden;border-radius:16px;background:#f1f5f7;border:1px solid rgba(74,99,120,.12)}
.live-browser-bar{height:38px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#eef2f4;border-bottom:1px solid rgba(74,99,120,.1)}
.live-browser-bar>span{width:7px;height:7px;border-radius:50%;background:#aab6c0}.live-browser-bar>span:first-child{background:#66d3df}.live-browser-bar em{margin-left:6px;font-style:normal;font-size:.68rem;color:#738296;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-browser-body{min-height:170px;display:flex;align-items:center;justify-content:center;gap:15px;padding:26px;background:radial-gradient(circle at 80% 20%,rgba(0,171,196,.13),transparent 34%),linear-gradient(145deg,#f8fbfc,#edf3f5)}
.live-mark{min-width:58px;height:58px;padding:0 10px;border-radius:17px;display:grid;place-items:center;background:#e2f6f8;color:#008ca5;font-weight:900;letter-spacing:-.03em;box-shadow:inset 0 0 0 1px rgba(0,171,196,.13)}
.live-browser-body strong{display:block;color:#203044;font-size:1.05rem}.live-browser-body span{display:block;color:#748397;font-size:.78rem;margin-top:4px}
.live-project-meta{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;padding:18px 8px 8px}.live-project-meta h3{margin:6px 0 3px;color:#233348;font-size:1.1rem}.live-project-meta p{margin:0;color:#6d7c8e;font-size:.82rem}.live-arrow{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#e5f6f8;color:#008ea6;font-size:1.1rem;transition:transform .25s ease,background .25s ease}.live-project-card:hover .live-arrow,.live-project-card:focus-visible .live-arrow{transform:translate(2px,-2px);background:#d3f2f5}

@media(max-width:900px){.live-project-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){
  #process .process-card:not(:last-child)::after{display:none!important}
  .live-project-grid{grid-template-columns:1fr}.live-browser-body{min-height:145px}
}
@media(prefers-reduced-motion:reduce){#process .process-card:not(:last-child)::after{animation:none!important}.live-project-card,#contact .contact-item,#contact .contact-item .icon-box{transition:none!important}}

/* === v15-fixes.css === */
/* Codex Operation v15 — project additions + reliable quick-start state */

.contact-quickstarts .quickstart.is-active{
  border-color:rgba(0,171,196,.48)!important;
  box-shadow:0 9px 24px rgba(31,50,67,.08), inset 0 0 0 1px rgba(0,171,196,.08)!important;
}
.contact-quickstarts .quickstart.is-active svg{transform:scale(1.08);color:var(--co-cyan,#00abc4)!important}

.project-experience-section{background:#f4f8f9!important}
.project-experience-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.project-experience-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:18px;min-height:100%;
  padding:28px;border-radius:24px;background:#fff;border:1px solid rgba(74,99,120,.15);
  box-shadow:0 15px 36px rgba(31,50,67,.07);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease;
}
.project-experience-card::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:3px;background:linear-gradient(90deg,#00abc4,rgba(0,171,196,.12));transform:scaleX(.24);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.project-experience-card:hover,.project-experience-card:focus-within{transform:translateY(-5px);border-color:rgba(0,171,196,.3);box-shadow:0 24px 52px rgba(31,50,67,.11)}
.project-experience-card:hover::before,.project-experience-card:focus-within::before{transform:scaleX(1)}
.project-experience-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:#e6f7f9;color:#008da5;font-weight:900;letter-spacing:-.04em;font-size:.95rem;box-shadow:inset 0 0 0 1px rgba(0,171,196,.12)}
.project-experience-copy h3{margin:7px 0 10px;color:#203044;font-size:1.2rem;line-height:1.25}
.project-experience-copy p{margin:0;color:#647589;line-height:1.7}
.project-experience-copy ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:9px}
.project-experience-copy li{position:relative;padding-left:20px;color:#465a70;font-size:.9rem}
.project-experience-copy li::before{content:"✓";position:absolute;left:0;color:#00abc4;font-weight:900}
@media(max-width:960px){.project-experience-grid{grid-template-columns:1fr 1fr}.project-experience-card:last-child{grid-column:1/-1}}
@media(max-width:680px){.project-experience-grid{grid-template-columns:1fr}.project-experience-card:last-child{grid-column:auto}.project-experience-card{padding:22px}}
@media(prefers-reduced-motion:reduce){.project-experience-card,.project-experience-card::before{transition:none!important}}

/* === v16-fixes.css === */
/* Codex Operation v16 — process connector cleanup + contact hover rail */

/* Homepage process: keep exactly one connector system.
   Older JS still inserts the progress track; hide it so there is no double line/dot. */
#process .process-progress-track,
#process .process-progress-bar{
  display:none!important;
}

#process .process-wrap::after{
  content:none!important;
  display:none!important;
}

/* One clean connector from 01 -> 02 -> 03. It stops at the next badge. */
#process .process-card:not(:last-child)::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:47px!important;
  top:47px!important;
  width:calc(100% + 18px)!important;
  height:2px!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,
    rgba(88,218,232,.30) 0%,
    rgba(88,218,232,.78) 42%,
    rgba(88,218,232,.34) 100%)!important;
  background-size:180% 100%!important;
  opacity:.72!important;
  z-index:-1!important;
  pointer-events:none!important;
  animation:coV16ProcessFlow 5.6s linear infinite!important;
  box-shadow:none!important;
}

#process .process-card{
  isolation:isolate!important;
}

#process .process-card .step-no{
  z-index:3!important;
}

@keyframes coV16ProcessFlow{
  0%{background-position:150% 0}
  100%{background-position:-50% 0}
}

/* Contact cards: a short cyan rail appears only on the RIGHT edge on hover/focus. */
#contact .contact-item{
  position:relative!important;
  overflow:hidden!important;
  padding-right:24px!important;
  transform:translate3d(0,0,0)!important;
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    box-shadow .28s ease,
    border-color .28s ease!important;
}

#contact .contact-item::before{
  content:none!important;
  display:none!important;
}

#contact .contact-item::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  right:0!important;
  left:auto!important;
  top:17%!important;
  bottom:auto!important;
  width:3px!important;
  height:66%!important;
  border-radius:999px 0 0 999px!important;
  background:linear-gradient(180deg,#77e3ed 0%,var(--co-cyan,#00abc4) 48%,#008fa7 100%)!important;
  box-shadow:0 0 14px rgba(0,171,196,.22)!important;
  transform:scaleY(0)!important;
  transform-origin:center!important;
  opacity:0!important;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s ease!important;
  pointer-events:none!important;
}

#contact .contact-item:hover,
#contact .contact-item:focus-visible{
  transform:translate3d(-3px,-2px,0)!important;
  background:#f7f9fa!important;
  border-color:rgba(0,171,196,.24)!important;
  box-shadow:0 14px 30px rgba(31,50,67,.09)!important;
  outline:none!important;
}

#contact .contact-item:hover::after,
#contact .contact-item:focus-visible::after{
  transform:scaleY(1)!important;
  opacity:1!important;
}

#contact .contact-item .icon-box{
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,color .28s ease!important;
}
#contact .contact-item:hover .icon-box,
#contact .contact-item:focus-visible .icon-box{
  transform:translateY(-1px) scale(1.055)!important;
  box-shadow:0 8px 18px rgba(0,171,196,.13)!important;
}

@media(max-width:720px){
  #process .process-card:not(:last-child)::after{display:none!important}
  #contact .contact-item{padding-right:22px!important}
}

@media(prefers-reduced-motion:reduce){
  #process .process-card:not(:last-child)::after{animation:none!important}
  #contact .contact-item,
  #contact .contact-item::after,
  #contact .contact-item .icon-box{transition:none!important}
}

/* === Legal pages refinement: privacy, imprint, applicant privacy === */
body[data-legal="privacy"] main > section:last-of-type,
body[data-legal="imprint"] main > section:last-of-type,
body[data-legal="applicant"] main > section:last-of-type{
  background:#edf1f2 !important;
}
.legal-section-surface{background:#edf1f2 !important;}
body[data-legal="privacy"] .legal-shell,
body[data-legal="imprint"] .legal-shell,
body[data-legal="applicant"] .legal-shell{
  max-width:1000px;
  margin:0 auto;
  background:#ffffff !important;
  border:1px solid #d8e1e5 !important;
  border-radius:24px !important;
  padding:clamp(24px,4vw,52px) !important;
  box-shadow:0 18px 48px rgba(52,64,84,.09) !important;
}
body[data-legal="privacy"] .legal-content,
body[data-legal="imprint"] .legal-content,
body[data-legal="applicant"] .legal-content{
  color:#344156 !important;
}
body[data-legal="privacy"] .legal-content *,
body[data-legal="imprint"] .legal-content *,
body[data-legal="applicant"] .legal-content *{
  text-shadow:none !important;
}
body[data-legal="privacy"] .legal-content p,
body[data-legal="privacy"] .legal-content li,
body[data-legal="privacy"] .legal-content span,
body[data-legal="imprint"] .legal-content p,
body[data-legal="imprint"] .legal-content li,
body[data-legal="imprint"] .legal-content span,
body[data-legal="applicant"] .legal-content p,
body[data-legal="applicant"] .legal-content li,
body[data-legal="applicant"] .legal-content span{
  color:#5a697d !important;
}
body[data-legal="privacy"] .legal-content strong,
body[data-legal="privacy"] .legal-content h1,
body[data-legal="privacy"] .legal-content h2,
body[data-legal="privacy"] .legal-content h3,
body[data-legal="imprint"] .legal-content strong,
body[data-legal="imprint"] .legal-content h1,
body[data-legal="imprint"] .legal-content h2,
body[data-legal="imprint"] .legal-content h3,
body[data-legal="applicant"] .legal-content strong,
body[data-legal="applicant"] .legal-content h1,
body[data-legal="applicant"] .legal-content h2,
body[data-legal="applicant"] .legal-content h3{
  color:#23344d !important;
}
body[data-legal="privacy"] .legal-content a:not(.agb-download-btn),
body[data-legal="imprint"] .legal-content a:not(.agb-download-btn),
body[data-legal="applicant"] .legal-content a:not(.agb-download-btn){
  color:#00a3bf !important;
}
body[data-legal="privacy"] .legal-content .text-white,
body[data-legal="privacy"] .legal-content .text-slate-300,
body[data-legal="privacy"] .legal-content .text-slate-400,
body[data-legal="privacy"] .legal-content .text-slate-500,
body[data-legal="imprint"] .legal-content .text-white,
body[data-legal="imprint"] .legal-content .text-slate-300,
body[data-legal="imprint"] .legal-content .text-slate-400,
body[data-legal="imprint"] .legal-content .text-slate-500,
body[data-legal="applicant"] .legal-content .text-white,
body[data-legal="applicant"] .legal-content .text-slate-300,
body[data-legal="applicant"] .legal-content .text-slate-400,
body[data-legal="applicant"] .legal-content .text-slate-500{
  color:inherit !important;
}
.legal-meta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:22px;}
.legal-meta-grid > div{padding:16px 18px;border:1px solid #d6e1e6;border-radius:16px;background:#f8fbfc;}
.legal-meta-grid > div span{display:block;margin-bottom:7px;color:#00a3bf !important;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}
.legal-meta-grid > div strong{display:block;color:#23344d !important;font-size:1rem;font-weight:800;line-height:1.35;}
.legal-info-note{margin-bottom:24px;padding:18px 20px;border:1px solid rgba(0,171,196,.2);background:linear-gradient(180deg,#f4fcfd,#eef8fa);border-radius:18px;}
.legal-info-note strong{display:inline-block;margin-bottom:6px;color:#16324b !important;font-size:1rem;font-weight:850;}
.legal-info-note p{margin:0;color:#516073 !important;}
.legal-article{display:block;}
.legal-article > .space-y-6 > div,
.legal-article > .space-y-8 > div{padding-block:18px;border-top:1px solid #e8eef2;}
.legal-article > .space-y-6 > div:first-child,
.legal-article > .space-y-8 > div:first-child{padding-top:0;border-top:0;}
.legal-article ul{padding-left:1.2rem;}
.legal-article li::marker{color:#00a3bf;}

/* Keep footer identical to homepage on legal pages */
.co-site-footer{background:#344156 !important;color:#fff !important;}
.co-site-footer .footer-brand,
.co-site-footer .footer-brand strong,
.co-site-footer .footer-lead,
.co-site-footer .footer-services li,
.co-site-footer .footer-promise,
.co-site-footer .footer-contact-link,
.co-site-footer .footer-list h3,
.co-site-footer .footer-bottom{color:#fff !important;}
.co-site-footer .footer-brand strong span{color:#00b6cf !important;}
.co-site-footer .footer-list ul a,
.co-site-footer .footer-contact-link{transition:color .22s ease,transform .22s ease !important;}
.co-site-footer .footer-list ul a:hover,
.co-site-footer .footer-list ul a:focus-visible,
.co-site-footer .footer-contact-link:hover,
.co-site-footer .footer-contact-link:focus-visible{color:#8ae1ee !important;transform:translateX(3px) !important;}
.co-site-footer .footer-list .socials a{transition:transform .24s cubic-bezier(.2,.8,.2,1),background-color .22s ease,border-color .22s ease,box-shadow .22s ease !important;}
.co-site-footer .footer-list .socials a:hover,
.co-site-footer .footer-list .socials a:focus-visible{transform:translateY(-4px) scale(1.04) !important;background:#35475f !important;border-color:rgba(94,219,232,.28) !important;box-shadow:0 12px 24px rgba(20,35,52,.20),0 0 0 3px rgba(0,171,196,.07) !important;}

@media (max-width: 900px){
  .legal-meta-grid{grid-template-columns:1fr;}
}
@media (max-width: 640px){
  body[data-legal="privacy"] .legal-shell,
  body[data-legal="imprint"] .legal-shell,
  body[data-legal="applicant"] .legal-shell{border-radius:20px !important;padding:20px !important;}
  .legal-info-note{padding:16px 16px;}
}

/* === Exact AGB component styling for Impressum / Datenschutz / Bewerber-Datenschutz === */
body:has(.agb-shell) .legal-content{color:#344054 !important;}
body:has(.agb-shell) .legal-content .agb-meta-grid span{color:#00a8c2 !important;}
body:has(.agb-shell) .legal-content .agb-meta-grid strong{color:#344054 !important;}
body:has(.agb-shell) .legal-content .agb-priority-note strong{color:#00a8c2 !important;text-decoration:underline;text-underline-offset:3px;}
body:has(.agb-shell) .legal-content .agb-priority-note p{color:#475467 !important; padding-top:10px;}
body:has(.agb-shell) .legal-content .agb-article h2{color:#263448 !important;}
body:has(.agb-shell) .legal-content .agb-article p,
body:has(.agb-shell) .legal-content .agb-article li,
body:has(.agb-shell) .legal-content .agb-article strong{color:#475467 !important;}
body:has(.agb-shell) .legal-content .agb-article a{color:#00a8c2 !important;text-decoration:underline;text-underline-offset:3px;}
body:has(.agb-shell) .legal-content .agb-article ul{margin:8px 0 10px;padding-left:1.35rem;}
body:has(.agb-shell) .legal-content .agb-article li{margin:.35rem 0;line-height:1.72;}
body:has(.agb-shell) .legal-content .agb-article li::marker{color:#00a8c2;}