/* ========== ANVEL Consulting  Corporate Design ========== */

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

:root {
   --primary-color: #1a1a2e;
   --secondary-color: #16213e;
   --accent-color: #0f3460;
   --text-color: #1a1a1a;
   --text-light: #4a4a4a;
   --bg-color: #ffffff;
   --bg-grey: #f5f5f7;
   --border-color: #d1d1d6;
   --focus-color: #0066cc;
}

body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   line-height: 1.6;
   color: var(--text-color);
   background-color: var(--bg-color);
}

html { scroll-behavior: smooth; }

/* ========== HEADER & NAVIGATION ========== */
header {
   background-color: var(--primary-color);
   color: white;
   padding: 0.8rem 0;
   position: sticky;
   top: 0;
   z-index: 1000;
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

nav {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
}

.logo { color: white; text-decoration: none; display: flex; align-items: center; }
.logo-image { 
   height: 90px; 
   width: auto; 
   display: block;
   margin-top: -8px;
   margin-bottom: -8px;
   filter: brightness(0) invert(1);
}
.footer-logo { 
   height: 80px; 
   width: auto; 
   margin-bottom: 0.75rem; 
}

.nav-links {
   display: flex;
   list-style: none;
   gap: 2rem;
   margin: 0;
   padding: 0;
}

.nav-links a {
   color: white;
   text-decoration: none;
   font-size: 0.95rem;
   font-weight: 500;
   transition: opacity 0.2s;
}

.nav-links a:hover { opacity: 0.75; }

.menu-toggle {
   display: none;
   background: none;
   border: none;
   color: white;
   font-size: 1.5rem;
   cursor: pointer;
   padding: 0.5rem;
}

/* ========== HERO SECTION ========== */
.hero {
   position: relative;
   background:
      radial-gradient(900px 600px at 20% 25%, rgba(120,160,255,0.18), transparent 60%),
      radial-gradient(700px 500px at 80% 35%, rgba(120,160,255,0.14), transparent 60%),
      radial-gradient(900px 700px at 50% 90%, rgba(0,0,0,0.55), transparent 70%),
      linear-gradient(180deg, #0b1020 0%, #0a1227 45%, #071022 100%);
   color: white;
   padding: 5rem 2rem;
   overflow: hidden;
}

/* ==========================================
   PARTICLE LAYERS - ANIMATED FLOATING DOTS
   ========================================== */

/* Base particle layer styles */
.particle-layer-3,
.particle-layer-4,
.particle-layer-5,
.particle-layer-6,
.particle-layer-7,
.particle-layer-8,
.particle-layer-9,
.particle-layer-10,
.particle-layer-11,
.particle-layer-12,
.particle-layer-13,
.particle-layer-14,
.particle-layer-15,
.particle-layer-16,
.particle-cloud-1,
.particle-cloud-2,
.particle-cloud-3,
.particle-cloud-4 {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 1;
}

/* Particle Cloud 1 - Multiple particles via box-shadow */
.particle-cloud-1::before {
   content: '';
   position: absolute;
   width: 3px;
   height: 3px;
   top: 50%;
   left: 30%;
   border-radius: 50%;
   background: rgba(93, 173, 226, 0.7);
   box-shadow:
      15vw -15vh 0 2px rgba(93, 173, 226, 0.6),
      45vw 5vh 0 1px rgba(93, 173, 226, 0.5),
      -5vw 25vh 0 2px rgba(93, 173, 226, 0.65),
      25vw -25vh 0 1px rgba(93, 173, 226, 0.55),
      10vw 35vh 0 2px rgba(93, 173, 226, 0.6),
      55vw 15vh 0 1px rgba(93, 173, 226, 0.5),
      -15vw 10vh 0 2px rgba(93, 173, 226, 0.65),
      35vw -5vh 0 1px rgba(93, 173, 226, 0.55),
      5vw -10vh 0 2px rgba(93, 173, 226, 0.6),
      20vw 40vh 0 1px rgba(93, 173, 226, 0.5),
      -10vw -20vh 0 2px rgba(93, 173, 226, 0.65),
      40vw 30vh 0 1px rgba(93, 173, 226, 0.55),
      -25vw 45vh 0 2px rgba(93, 173, 226, 0.6),
      50vw -10vh 0 1px rgba(93, 173, 226, 0.5),
      15vw 20vh 0 2px rgba(93, 173, 226, 0.65),
      0vw 38vh 0 1px rgba(93, 173, 226, 0.55),
      30vw 28vh 0 2px rgba(93, 173, 226, 0.6),
      -15vw 15vh 0 1px rgba(93, 173, 226, 0.5),
      58vw 32vh 0 2px rgba(93, 173, 226, 0.65),
      12vw -8vh 0 1px rgba(93, 173, 226, 0.55);
   animation: particlePulse1 4.2s ease-in-out infinite -2.1s, particleFloat1 25s ease-in-out infinite -12s;
}

/* Particle Cloud 2 - Multiple particles via box-shadow */
.particle-cloud-2::before {
   content: '';
   position: absolute;
   width: 2px;
   height: 2px;
   top: 60%;
   left: 65%;
   border-radius: 50%;
   background: rgba(93, 173, 226, 0.6);
   box-shadow:
      -42vw -15vh 0 1px rgba(93, 173, 226, 0.55),
      12vw 25vh 0 2px rgba(93, 173, 226, 0.6),
      -32vw 18vh 0 1px rgba(93, 173, 226, 0.55),
      -12vw -25vh 0 2px rgba(93, 173, 226, 0.6),
      -22vw 8vh 0 1px rgba(93, 173, 226, 0.55),
      -52vw 32vh 0 2px rgba(93, 173, 226, 0.6),
      22vw -15vh 0 1px rgba(93, 173, 226, 0.55),
      -2vw 35vh 0 2px rgba(93, 173, 226, 0.6),
      -62vw 12vh 0 1px rgba(93, 173, 226, 0.55),
      -8vw -8vh 0 2px rgba(93, 173, 226, 0.6),
      8vw 28vh 0 1px rgba(93, 173, 226, 0.55),
      -18vw 22vh 0 2px rgba(93, 173, 226, 0.6),
      18vw 5vh 0 1px rgba(93, 173, 226, 0.55),
      -28vw -12vh 0 2px rgba(93, 173, 226, 0.6),
      28vw -20vh 0 1px rgba(93, 173, 226, 0.55),
      -38vw 35vh 0 2px rgba(93, 173, 226, 0.6),
      -48vw -5vh 0 1px rgba(93, 173, 226, 0.55),
      -45vw 15vh 0 2px rgba(93, 173, 226, 0.6),
      25vw 15vh 0 1px rgba(93, 173, 226, 0.55),
      -55vw 28vh 0 2px rgba(93, 173, 226, 0.6);
   animation: particlePulse2 5.7s ease-in-out infinite -3.8s, particleFloat7 32s ease-in-out infinite -18s;
}

/* Particle Layer 3 */
.particle-layer-3::before,
.particle-layer-3::after {
   content: '';
   position: absolute;
   width: 4px;
   height: 4px;
   background: rgba(93, 173, 226, 0.8);
   border-radius: 50%;
   box-shadow: 0 0 8px 3px rgba(93, 173, 226, 0.5);
}
.particle-layer-3::before {
   top: 38%;
   left: 12%;
   animation: particleFloat1 18s ease-in-out infinite -7s, particlePulse1 3.5s ease-in-out infinite -1.2s;
}
.particle-layer-3::after {
   top: 35%;
   left: 82%;
   animation: particleFloat2 22s ease-in-out infinite -15s, particlePulse2 4.8s ease-in-out infinite -3.5s;
}

/* Particle Layer 4 */
.particle-layer-4::before,
.particle-layer-4::after {
   content: '';
   position: absolute;
   width: 3px;
   height: 3px;
   background: rgba(93, 173, 226, 0.7);
   border-radius: 50%;
   box-shadow: 0 0 6px 2px rgba(93, 173, 226, 0.4);
}
.particle-layer-4::before {
   top: 32%;
   left: 28%;
   animation: particleFloat3 24s ease-in-out infinite -18s, particlePulse3 5.3s ease-in-out infinite -2.7s;
}
.particle-layer-4::after {
   top: 85%;
   left: 72%;
   animation: particleFloat4 19s ease-in-out infinite -5s, particlePulse4 6.1s ease-in-out infinite -4.2s;
}

/* Particle Layer 5 */
.particle-layer-5::before,
.particle-layer-5::after {
   content: '';
   position: absolute;
   width: 5px;
   height: 5px;
   background: rgba(93, 173, 226, 0.75);
   border-radius: 50%;
   box-shadow: 0 0 10px 4px rgba(93, 173, 226, 0.45);
}
.particle-layer-5::before {
   top: 72%;
   left: 25%;
   animation: particleFloat5 21s ease-in-out infinite -11s, particlePulse5 4.2s ease-in-out infinite -0.8s;
}
.particle-layer-5::after {
   top: 55%;
   left: 15%;
   animation: particleFloat6 16s ease-in-out infinite -9s, particlePulse6 5.5s ease-in-out infinite -3.1s;
}

/* Particle Layer 6 */
.particle-layer-6::before,
.particle-layer-6::after {
   content: '';
   position: absolute;
   width: 3px;
   height: 3px;
   background: rgba(93, 173, 226, 0.65);
   border-radius: 50%;
   box-shadow: 0 0 6px 2px rgba(93, 173, 226, 0.35);
}
.particle-layer-6::before {
   top: 92%;
   left: 45%;
   animation: particleFloat7 23s ease-in-out infinite -16s, particlePulse7 6.8s ease-in-out infinite -5.2s;
}
.particle-layer-6::after {
   top: 45%;
   left: 35%;
   animation: particleFloat8 15s ease-in-out infinite -3s, particlePulse8 4.9s ease-in-out infinite -1.8s;
}

/* Particle Layer 7 */
.particle-layer-7::before,
.particle-layer-7::after {
   content: '';
   position: absolute;
   width: 4px;
   height: 4px;
   background: rgba(93, 173, 226, 0.7);
   border-radius: 50%;
   box-shadow: 0 0 7px 3px rgba(93, 173, 226, 0.4);
}
.particle-layer-7::before {
   top: 28%;
   left: 72%;
   animation: particleFloat9 20s ease-in-out infinite -8s, particlePulse1 4.5s ease-in-out infinite -2.3s;
}
.particle-layer-7::after {
   top: 48%;
   left: 90%;
   animation: particleFloat10 26s ease-in-out infinite -20s, particlePulse3 7.2s ease-in-out infinite -4.8s;
}

/* Particle Layer 8 */
.particle-layer-8::before,
.particle-layer-8::after {
   content: '';
   position: absolute;
   width: 3px;
   height: 3px;
   background: rgba(93, 173, 226, 0.6);
   border-radius: 50%;
   box-shadow: 0 0 5px 2px rgba(93, 173, 226, 0.3);
}
.particle-layer-8::before {
   top: 78%;
   left: 8%;
   animation: particleFloat11 17s ease-in-out infinite -12s, particlePulse5 5.8s ease-in-out infinite -0.5s;
}
.particle-layer-8::after {
   top: 88%;
   left: 52%;
   animation: particleFloat12 22s ease-in-out infinite -6s, particlePulse7 6.3s ease-in-out infinite -3.7s;
}

/* Particle Layer 9 */
.particle-layer-9::before,
.particle-layer-9::after {
   content: '';
   position: absolute;
   width: 4px;
   height: 4px;
   background: rgba(93, 173, 226, 0.75);
   border-radius: 50%;
   box-shadow: 0 0 8px 3px rgba(93, 173, 226, 0.45);
}
.particle-layer-9::before {
   top: 70%;
   left: 35%;
   animation: particleFloat2 19s ease-in-out infinite -14s, particlePulse2 4.3s ease-in-out infinite -2.9s;
}
.particle-layer-9::after {
   top: 88%;
   left: 58%;
   animation: particleFloat6 24s ease-in-out infinite -19s, particlePulse6 5.9s ease-in-out infinite -1.4s;
}

/* Particle Layer 10 */
.particle-layer-10::before,
.particle-layer-10::after {
   content: '';
   position: absolute;
   width: 3px;
   height: 3px;
   background: rgba(93, 173, 226, 0.65);
   border-radius: 50%;
   box-shadow: 0 0 6px 2px rgba(93, 173, 226, 0.35);
}
.particle-layer-10::before {
   top: 48%;
   left: 25%;
   animation: particleFloat8 21s ease-in-out infinite -4s, particlePulse4 5.1s ease-in-out infinite -3.3s;
}
.particle-layer-10::after {
   top: 68%;
   left: 48%;
   animation: particleFloat10 18s ease-in-out infinite -10s, particlePulse8 6.5s ease-in-out infinite -5.5s;
}

/* Particle Layer 11 */
.particle-layer-11::before,
.particle-layer-11::after {
   content: '';
   position: absolute;
   width: 5px;
   height: 5px;
   background: rgba(93, 173, 226, 0.8);
   border-radius: 50%;
   box-shadow: 0 0 10px 4px rgba(93, 173, 226, 0.5);
}
.particle-layer-11::before {
   top: 65%;
   left: 12%;
   animation: particleFloat4 23s ease-in-out infinite -17s, particlePulse1 4.7s ease-in-out infinite -0.3s;
}
.particle-layer-11::after {
   top: 92%;
   left: 62%;
   animation: particleFloat12 16s ease-in-out infinite -2s, particlePulse3 5.2s ease-in-out infinite -4.1s;
}

/* Particle Layer 12 */
.particle-layer-12::before,
.particle-layer-12::after {
   content: '';
   position: absolute;
   width: 3px;
   height: 3px;
   background: rgba(93, 173, 226, 0.7);
   border-radius: 50%;
   box-shadow: 0 0 7px 3px rgba(93, 173, 226, 0.4);
}
.particle-layer-12::before {
   top: 95%;
   left: 32%;
   animation: particleFloat9 20s ease-in-out infinite -13s, particlePulse7 6.1s ease-in-out infinite -2.5s;
}
.particle-layer-12::after {
   top: 42%;
   left: 18%;
   animation: particleFloat1 25s ease-in-out infinite -21s, particlePulse5 4.8s ease-in-out infinite -1.9s;
}

/* Particle Cloud 3 - Additional cloud layer */
.particle-cloud-3::before {
   content: '';
   position: absolute;
   width: 2px;
   height: 2px;
   top: 45%;
   left: 50%;
   border-radius: 50%;
   background: rgba(93, 173, 226, 0.65);
   box-shadow:
      -40vw 10vh 0 2px rgba(93, 173, 226, 0.6),
      25vw 25vh 0 1px rgba(93, 173, 226, 0.55),
      -25vw 40vh 0 2px rgba(93, 173, 226, 0.6),
      -5vw -15vh 0 1px rgba(93, 173, 226, 0.55),
      -35vw 30vh 0 2px rgba(93, 173, 226, 0.6),
      35vw 15vh 0 1px rgba(93, 173, 226, 0.55),
      -48vw 5vh 0 2px rgba(93, 173, 226, 0.6),
      40vw 45vh 0 1px rgba(93, 173, 226, 0.55),
      -33vw 20vh 0 2px rgba(93, 173, 226, 0.6),
      -17vw 35vh 0 1px rgba(93, 173, 226, 0.55),
      10vw -5vh 0 2px rgba(93, 173, 226, 0.6),
      -28vw 48vh 0 1px rgba(93, 173, 226, 0.55),
      12vw 22vh 0 2px rgba(93, 173, 226, 0.6),
      -8vw 8vh 0 1px rgba(93, 173, 226, 0.55),
      -42vw 52vh 0 2px rgba(93, 173, 226, 0.6),
      18vw 38vh 0 1px rgba(93, 173, 226, 0.55);
   animation: particlePulse4 5.3s ease-in-out infinite -1.7s, particleFloat9 30s ease-in-out infinite -22s;
}

/* Particle Cloud 4 - Bottom-focused cloud layer */
.particle-cloud-4::before {
   content: '';
   position: absolute;
   width: 3px;
   height: 3px;
   top: 75%;
   left: 40%;
   border-radius: 50%;
   background: rgba(93, 173, 226, 0.7);
   box-shadow:
      -30vw 5vh 0 2px rgba(93, 173, 226, 0.6),
      25vw 12vh 0 1px rgba(93, 173, 226, 0.55),
      -15vw 18vh 0 2px rgba(93, 173, 226, 0.65),
      45vw 8vh 0 1px rgba(93, 173, 226, 0.5),
      -50vw 15vh 0 2px rgba(93, 173, 226, 0.6),
      10vw 22vh 0 1px rgba(93, 173, 226, 0.55),
      -5vw 10vh 0 2px rgba(93, 173, 226, 0.65),
      55vw 18vh 0 1px rgba(93, 173, 226, 0.5),
      -35vw 20vh 0 2px rgba(93, 173, 226, 0.6),
      35vw 15vh 0 1px rgba(93, 173, 226, 0.55),
      -20vw 8vh 0 2px rgba(93, 173, 226, 0.65),
      50vw 5vh 0 1px rgba(93, 173, 226, 0.5),
      -40vw 12vh 0 2px rgba(93, 173, 226, 0.6),
      20vw 20vh 0 1px rgba(93, 173, 226, 0.55),
      -55vw 3vh 0 2px rgba(93, 173, 226, 0.65),
      40vw 10vh 0 1px rgba(93, 173, 226, 0.5);
   animation: particlePulse6 4.5s ease-in-out infinite -2.8s, particleFloat11 27s ease-in-out infinite -15s;
}

/* Particle Layer 13 - Bottom zone */
.particle-layer-13::before,
.particle-layer-13::after {
   content: '';
   position: absolute;
   width: 4px;
   height: 4px;
   background: rgba(93, 173, 226, 0.75);
   border-radius: 50%;
   box-shadow: 0 0 8px 3px rgba(93, 173, 226, 0.45);
}
.particle-layer-13::before {
   top: 76%;
   left: 42%;
   animation: particleFloat3 19s ease-in-out infinite -8s, particlePulse1 4.1s ease-in-out infinite -1.5s;
}
.particle-layer-13::after {
   top: 88%;
   left: 18%;
   animation: particleFloat7 22s ease-in-out infinite -16s, particlePulse4 5.3s ease-in-out infinite -3.2s;
}

/* Particle Layer 14 - Bottom zone */
.particle-layer-14::before,
.particle-layer-14::after {
   content: '';
   position: absolute;
   width: 3px;
   height: 3px;
   background: rgba(93, 173, 226, 0.65);
   border-radius: 50%;
   box-shadow: 0 0 6px 2px rgba(93, 173, 226, 0.35);
}
.particle-layer-14::before {
   top: 22%;
   left: 88%;
   animation: particleFloat5 20s ease-in-out infinite -11s, particlePulse2 4.8s ease-in-out infinite -2.1s;
}
.particle-layer-14::after {
   top: 93%;
   left: 38%;
   animation: particleFloat9 18s ease-in-out infinite -5s, particlePulse6 5.7s ease-in-out infinite -4.5s;
}

/* Particle Layer 15 - Bottom zone */
.particle-layer-15::before,
.particle-layer-15::after {
   content: '';
   position: absolute;
   width: 5px;
   height: 5px;
   background: rgba(93, 173, 226, 0.8);
   border-radius: 50%;
   box-shadow: 0 0 10px 4px rgba(93, 173, 226, 0.5);
}
.particle-layer-15::before {
   top: 85%;
   left: 52%;
   animation: particleFloat2 21s ease-in-out infinite -9s, particlePulse3 4.4s ease-in-out infinite -0.8s;
}
.particle-layer-15::after {
   top: 42%;
   left: 78%;
   animation: particleFloat11 17s ease-in-out infinite -14s, particlePulse7 6.2s ease-in-out infinite -3.8s;
}

/* Particle Layer 16 - Bottom zone */
.particle-layer-16::before,
.particle-layer-16::after {
   content: '';
   position: absolute;
   width: 3px;
   height: 3px;
   background: rgba(93, 173, 226, 0.7);
   border-radius: 50%;
   box-shadow: 0 0 7px 3px rgba(93, 173, 226, 0.4);
}
.particle-layer-16::before {
   top: 85%;
   left: 48%;
   animation: particleFloat6 23s ease-in-out infinite -18s, particlePulse8 5.1s ease-in-out infinite -1.3s;
}
.particle-layer-16::after {
   top: 79%;
   left: 5%;
   animation: particleFloat10 19s ease-in-out infinite -7s, particlePulse5 4.6s ease-in-out infinite -2.7s;
}

/* ==========================================
   PARTICLE FLOAT ANIMATIONS - Autonomous Movement
   ========================================== */
@keyframes particleFloat1 {
   0%, 100% { transform: translate(0, 0); }
   20% { transform: translate(25px, -18px); }
   40% { transform: translate(-15px, 22px); }
   60% { transform: translate(18px, 15px); }
   80% { transform: translate(-12px, -20px); }
}

@keyframes particleFloat2 {
   0%, 100% { transform: translate(0, 0); }
   25% { transform: translate(-22px, 28px); }
   50% { transform: translate(18px, -15px); }
   75% { transform: translate(-10px, -22px); }
}

@keyframes particleFloat3 {
   0%, 100% { transform: translate(0, 0); }
   15% { transform: translate(30px, 12px); }
   35% { transform: translate(-18px, 28px); }
   55% { transform: translate(15px, -18px); }
   75% { transform: translate(-25px, 8px); }
}

@keyframes particleFloat4 {
   0%, 100% { transform: translate(0, 0); }
   33% { transform: translate(-28px, -22px); }
   66% { transform: translate(22px, 25px); }
}

@keyframes particleFloat5 {
   0%, 100% { transform: translate(0, 0); }
   20% { transform: translate(18px, 32px); }
   45% { transform: translate(-25px, -10px); }
   70% { transform: translate(12px, -25px); }
}

@keyframes particleFloat6 {
   0%, 100% { transform: translate(0, 0); }
   30% { transform: translate(-32px, 18px); }
   60% { transform: translate(15px, -28px); }
}

@keyframes particleFloat7 {
   0%, 100% { transform: translate(0, 0); }
   18% { transform: translate(15px, -28px); }
   36% { transform: translate(-22px, 15px); }
   54% { transform: translate(28px, 22px); }
   72% { transform: translate(-10px, -18px); }
}

@keyframes particleFloat8 {
   0%, 100% { transform: translate(0, 0); }
   33% { transform: translate(25px, 15px); }
   66% { transform: translate(-18px, -22px); }
}

@keyframes particleFloat9 {
   0%, 100% { transform: translate(0, 0); }
   25% { transform: translate(-15px, 25px); }
   50% { transform: translate(22px, -18px); }
   75% { transform: translate(-25px, -10px); }
}

@keyframes particleFloat10 {
   0%, 100% { transform: translate(0, 0); }
   20% { transform: translate(18px, 22px); }
   40% { transform: translate(-28px, -15px); }
   60% { transform: translate(10px, 28px); }
   80% { transform: translate(25px, -22px); }
}

@keyframes particleFloat11 {
   0%, 100% { transform: translate(0, 0); }
   50% { transform: translate(28px, -25px); }
}

@keyframes particleFloat12 {
   0%, 100% { transform: translate(0, 0); }
   33% { transform: translate(-22px, 18px); }
   66% { transform: translate(15px, -28px); }
}

/* ==========================================
   PARTICLE PULSE ANIMATIONS - Natural Glow On/Off
   Designed to feel like stars twinkling
   ========================================== */
@keyframes particlePulse1 {
   0%, 100% { opacity: 0.2; filter: brightness(0.4) drop-shadow(0 0 2px rgba(93, 173, 226, 0.3)); }
   15% { opacity: 0.9; filter: brightness(1.8) drop-shadow(0 0 8px rgba(93, 173, 226, 0.8)); }
   30% { opacity: 0.3; filter: brightness(0.6) drop-shadow(0 0 3px rgba(93, 173, 226, 0.4)); }
   50% { opacity: 0.95; filter: brightness(2.0) drop-shadow(0 0 12px rgba(93, 173, 226, 0.9)); }
   70% { opacity: 0.4; filter: brightness(0.7) drop-shadow(0 0 4px rgba(93, 173, 226, 0.5)); }
   85% { opacity: 0.8; filter: brightness(1.5) drop-shadow(0 0 6px rgba(93, 173, 226, 0.7)); }
}

@keyframes particlePulse2 {
   0%, 100% { opacity: 0.35; filter: brightness(0.6) drop-shadow(0 0 3px rgba(93, 173, 226, 0.4)); }
   12% { opacity: 0.15; filter: brightness(0.3) drop-shadow(0 0 1px rgba(93, 173, 226, 0.2)); }
   35% { opacity: 0.85; filter: brightness(1.7) drop-shadow(0 0 10px rgba(93, 173, 226, 0.8)); }
   55% { opacity: 0.25; filter: brightness(0.5) drop-shadow(0 0 2px rgba(93, 173, 226, 0.3)); }
   75% { opacity: 0.95; filter: brightness(1.9) drop-shadow(0 0 12px rgba(93, 173, 226, 0.9)); }
   90% { opacity: 0.5; filter: brightness(0.9) drop-shadow(0 0 5px rgba(93, 173, 226, 0.6)); }
}

@keyframes particlePulse3 {
   0%, 100% { opacity: 0.4; filter: brightness(0.7) drop-shadow(0 0 4px rgba(93, 173, 226, 0.5)); }
   20% { opacity: 0.95; filter: brightness(2.0) drop-shadow(0 0 14px rgba(93, 173, 226, 0.95)); }
   40% { opacity: 0.2; filter: brightness(0.4) drop-shadow(0 0 2px rgba(93, 173, 226, 0.25)); }
   60% { opacity: 0.7; filter: brightness(1.3) drop-shadow(0 0 7px rgba(93, 173, 226, 0.7)); }
   80% { opacity: 0.3; filter: brightness(0.5) drop-shadow(0 0 3px rgba(93, 173, 226, 0.35)); }
}

@keyframes particlePulse4 {
   0%, 100% { opacity: 0.25; filter: brightness(0.45) drop-shadow(0 0 2px rgba(93, 173, 226, 0.3)); }
   18% { opacity: 0.8; filter: brightness(1.6) drop-shadow(0 0 9px rgba(93, 173, 226, 0.8)); }
   38% { opacity: 0.15; filter: brightness(0.3) drop-shadow(0 0 1px rgba(93, 173, 226, 0.2)); }
   58% { opacity: 0.9; filter: brightness(1.8) drop-shadow(0 0 11px rgba(93, 173, 226, 0.85)); }
   78% { opacity: 0.35; filter: brightness(0.6) drop-shadow(0 0 3px rgba(93, 173, 226, 0.4)); }
}

@keyframes particlePulse5 {
   0%, 100% { opacity: 0.3; filter: brightness(0.55) drop-shadow(0 0 3px rgba(93, 173, 226, 0.35)); }
   25% { opacity: 0.1; filter: brightness(0.2) drop-shadow(0 0 1px rgba(93, 173, 226, 0.15)); }
   45% { opacity: 0.85; filter: brightness(1.7) drop-shadow(0 0 10px rgba(93, 173, 226, 0.8)); }
   65% { opacity: 0.45; filter: brightness(0.8) drop-shadow(0 0 4px rgba(93, 173, 226, 0.5)); }
   85% { opacity: 0.95; filter: brightness(1.95) drop-shadow(0 0 13px rgba(93, 173, 226, 0.9)); }
}

@keyframes particlePulse6 {
   0%, 100% { opacity: 0.45; filter: brightness(0.8) drop-shadow(0 0 4px rgba(93, 173, 226, 0.5)); }
   15% { opacity: 0.9; filter: brightness(1.8) drop-shadow(0 0 11px rgba(93, 173, 226, 0.85)); }
   35% { opacity: 0.2; filter: brightness(0.35) drop-shadow(0 0 2px rgba(93, 173, 226, 0.25)); }
   50% { opacity: 0.7; filter: brightness(1.4) drop-shadow(0 0 7px rgba(93, 173, 226, 0.7)); }
   70% { opacity: 0.15; filter: brightness(0.25) drop-shadow(0 0 1px rgba(93, 173, 226, 0.2)); }
   88% { opacity: 0.85; filter: brightness(1.65) drop-shadow(0 0 9px rgba(93, 173, 226, 0.8)); }
}

@keyframes particlePulse7 {
   0%, 100% { opacity: 0.15; filter: brightness(0.3) drop-shadow(0 0 1px rgba(93, 173, 226, 0.2)); }
   22% { opacity: 0.75; filter: brightness(1.5) drop-shadow(0 0 8px rgba(93, 173, 226, 0.75)); }
   42% { opacity: 0.35; filter: brightness(0.6) drop-shadow(0 0 3px rgba(93, 173, 226, 0.4)); }
   62% { opacity: 0.95; filter: brightness(1.9) drop-shadow(0 0 12px rgba(93, 173, 226, 0.9)); }
   82% { opacity: 0.25; filter: brightness(0.45) drop-shadow(0 0 2px rgba(93, 173, 226, 0.3)); }
}

@keyframes particlePulse8 {
   0%, 100% { opacity: 0.35; filter: brightness(0.6) drop-shadow(0 0 3px rgba(93, 173, 226, 0.4)); }
   20% { opacity: 0.8; filter: brightness(1.55) drop-shadow(0 0 9px rgba(93, 173, 226, 0.8)); }
   40% { opacity: 0.2; filter: brightness(0.35) drop-shadow(0 0 2px rgba(93, 173, 226, 0.25)); }
   55% { opacity: 0.9; filter: brightness(1.75) drop-shadow(0 0 10px rgba(93, 173, 226, 0.85)); }
   75% { opacity: 0.4; filter: brightness(0.7) drop-shadow(0 0 4px rgba(93, 173, 226, 0.45)); }
}

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

.hero-content {
   max-width: 900px;
   margin: 0 auto;
}

.hero-with-image {
   max-width: 1200px;
   display: flex;
   gap: 4rem;
   align-items: center;
}

.hero-text { flex: 1; }
.hero-image { flex: 0 0 280px; }

/* Value Panel (Hero Right Side) */
.hero-value-panel {
   flex: 0 0 420px;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.10);
   border-radius: 12px;
   padding: 2.5rem;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
   position: relative;
}

.value-panel-title {
   font-size: 1.25rem;
   font-weight: 600;
   color: #ffffff;
   margin: 0 0 2rem 0;
   text-align: left;
   letter-spacing: 0.5px;
}

.value-panel-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 0;
   margin-bottom: 0;
}

.value-panel-item {
   display: flex;
   gap: 0.875rem;
   align-items: flex-start;
   padding: 1.25rem 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   transition: background-color 0.2s ease;
}

.value-panel-item:last-child {
   border-bottom: none;
}

.value-panel-item:hover {
   background: rgba(255, 255, 255, 0.02);
}

.value-panel-icon {
   flex-shrink: 0;
   width: 32px;
   height: 32px;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.10);
   border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, 0.9);
}

.value-panel-response {
   font-size: 0.75rem;
   line-height: 1.4;
   color: rgba(255, 255, 255, 0.55);
   margin: 0.375rem 0 0 0;
   font-style: italic;
}

.value-panel-content h4 {
   font-size: 0.9rem;
   font-weight: 600;
   color: #ffffff;
   margin: 0 0 0.25rem 0;
   line-height: 1.3;
}

.value-panel-content p {
   font-size: 0.8rem;
   line-height: 1.45;
   color: rgba(255, 255, 255, 0.75);
   margin: 0;
}

.value-panel-footer {
   margin-top: 1.5rem;
   padding-top: 1.25rem;
   border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.value-panel-footer p {
   font-size: 0.8rem;
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.7);
   margin: 0;
}

.value-panel-footer strong {
   color: rgba(255, 255, 255, 0.95);
   font-weight: 600;
}

/* Legacy hero-brand styles for backwards compatibility */
.hero-brand {
   flex: 0 0 380px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 1.5rem;
}

.hero-brand-card {
   width: 100%;
   padding: 3rem 2.5rem;
   background: rgba(255, 255, 255, 0.08);
   border-radius: 16px;
   border: 2px solid rgba(255, 255, 255, 0.15);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.logo-hero {
   width: 100%;
   max-width: 280px;
   height: auto;
}

.hero-brand-tagline-external {
   font-size: 1rem;
   line-height: 1.5;
   text-align: center;
   color: rgba(255, 255, 255, 0.9);
   font-weight: 500;
   letter-spacing: 0.5px;
   margin: 0;
   text-transform: uppercase;
   font-size: 0.875rem;
}

.hero-brand-tagline {
   font-size: 1.125rem;
   line-height: 1.6;
   text-align: center;
   color: rgba(255, 255, 255, 0.95);
   font-weight: 500;
   margin: 0;
}

.headshot-hero {
   width: 280px;
   height: 280px;
   border-radius: 50%;
   object-fit: cover;
   border: 4px solid rgba(255,255,255,0.2);
   box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.hero h1 {
   font-size: 2.5rem;
   font-weight: 700;
   line-height: 1.25;
   margin-bottom: 1.5rem;
   color: #ffffff;
   padding: 1rem 1.5rem;
   border-radius: 12px;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
   display: inline-block;
   text-align: center;
}

.hero-title-main {
   font-size: 2.8rem;
   font-weight: 700;
   display: block;
   text-align: center;
}

.hero-title-sub {
   font-size: 1.4rem;
   font-weight: 400;
   opacity: 0.9;
   display: block;
   margin-top: 0.25rem;
   text-align: center;
   white-space: nowrap;
}

.hero-subtitle-enhanced {
   font-size: 1.15rem;
   line-height: 1.7;
   margin-bottom: 1.25rem;
   color: #ffffff;
   font-weight: 400;
   text-align: center;
   max-width: 720px;
   margin-left: auto;
   margin-right: auto;
}

.hero-credibility {
   font-size: 1rem;
   line-height: 1.6;
   margin-bottom: 2rem;
   color: rgba(255, 255, 255, 0.9);
}

.cta-buttons {
   display: flex;
   gap: 1rem;
   align-items: center;
   margin-top: 2rem;
}

.btn {
   padding: 1rem 2rem;
   border: none;
   border-radius: 6px;
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
   text-align: center;
   height: 48px;
}

.btn-primary {
   background-color: #0077b5;
   color: white;
   cursor: pointer;
   position: relative;
   overflow: hidden;
}

.btn-primary::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, height 0.6s;
}

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

.btn-primary:hover {
   background-color: #006399;
   transform: translateY(-2px);
   box-shadow: 
      0 8px 20px rgba(0, 119, 181, 0.35),
      0 4px 8px rgba(0, 119, 181, 0.2);
   cursor: pointer;
}

.btn-primary:focus {
   outline: 2px solid rgba(255, 255, 255, 0.5);
   outline-offset: 2px;
}

.btn-icon-linkedin {
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.15);
   color: white;
   padding: 0;
   width: 48px;
   height: 48px;
   border-radius: 6px;
   cursor: pointer;
   transition: all 0.2s ease;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.btn-icon-linkedin:hover {
   background: rgba(255, 255, 255, 0.12);
   border-color: rgba(255, 255, 255, 0.25);
   transform: translateY(-2px);
}

.btn-icon-linkedin:focus {
   outline: 2px solid rgba(255, 255, 255, 0.5);
   outline-offset: 2px;
}

.btn-icon-linkedin .linkedin-icon { width: 22px; height: 22px; }

.hero-response-time {
   font-size: 0.875rem;
   color: rgba(255, 255, 255, 0.7);
   margin-top: 0.75rem;
   font-style: italic;
}

/* ========== TRUST BAR ========== */
.trust-bar {
   background-color: var(--bg-grey);
   padding: 1.5rem 0;
   border-bottom: 1px solid var(--border-color);
}

.trust-bar-horizontal {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 0.75rem 1.25rem;
   max-width: 1000px;
   margin: 0 auto;
}

.trust-bar-item {
   font-size: 0.875rem;
   color: var(--text-color);
   font-weight: 500;
   white-space: nowrap;
}

.trust-bar-separator {
   color: var(--accent-color);
   font-size: 0.875rem;
   font-weight: 700;
}

/* Legacy trust bar styles (keep for backwards compatibility) */
.trust-items-clean {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   justify-content: center;
   max-width: 1000px;
   margin: 0 auto;
}

.trust-item-clean {
   font-size: 0.875rem;
   color: var(--text-color);
   padding: 0.75rem 1.25rem;
   background-color: white;
   border-radius: 6px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.08);
   line-height: 1.4;
}

.trust-item-clean strong {
   color: var(--primary-color);
   font-weight: 600;
}

.trust-items {
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
   justify-content: center;
}

.trust-item {
   font-size: 0.875rem;
   color: var(--text-light);
   padding: 0.5rem 1rem;
   border-left: 3px solid var(--accent-color);
   background-color: white;
   box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ========== SECTIONS ========== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.section-content { max-width: 1200px; margin: 0 auto; }
section { 
   padding: 6rem 2rem; 
   position: relative;
}
section::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 10%;
   right: 10%;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(20, 40, 80, 0.12) 50%, transparent);
   opacity: 0;
   animation: fadeInSeparator 0.6s ease forwards;
   animation-delay: 0.3s;
}
@keyframes fadeInSeparator {
   to { opacity: 1; }
}
.section-white { background-color: #ffffff; }
.section-grey { background-color: var(--bg-grey); }
.section-pattern-alt {
   position: relative;
   background: 
      radial-gradient(1000px 500px at 80% 10%, rgba(0, 120, 160, 0.06), transparent 55%),
      url("../images/pattern-alt.svg"),
      var(--bg-grey);
   background-repeat: no-repeat, repeat, no-repeat;
   background-size: auto, 480px, auto;
   background-position: top right, top left, center;
}
.section-dark {
   background: linear-gradient(135deg, #0a1227 0%, #0d1a35 50%, #0a1227 100%);
   color: white;
}

.section-dark h2 {
   background: linear-gradient(135deg, #ffffff 0%, #a8c5e8 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.section-dark h3,
.section-dark .section-lead,
.section-dark p {
   color: rgba(255, 255, 255, 0.9);
}

.section-dark .about-text p {
   color: rgba(255, 255, 255, 0.85);
}

.section-dark .location-line {
   color: #ffffff;
}

.section-dark .headshot-about {
   border-color: rgba(255, 255, 255, 0.2);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Services Section Background */
.services-section {
   position: relative;
   background:
      radial-gradient(1200px 600px at 20% 0%, rgba(20, 60, 120, 0.10), transparent 60%),
      radial-gradient(900px 500px at 80% 20%, rgba(0, 120, 160, 0.08), transparent 55%),
      url("../images/services-bg.svg");
   background-repeat: no-repeat, no-repeat, repeat;
   background-size: auto, auto, 520px;
   background-position: center, center, top left;
}

.services-section::before {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   background-image: url("../images/noise.svg");
   opacity: 0.05;
   mix-blend-mode: overlay;
}

.services-section > * {
   position: relative;
}

section h2 {
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 1.25rem;
   color: var(--primary-color);
   letter-spacing: -0.5px;
   background: linear-gradient(135deg, var(--primary-color) 0%, #0f3460 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

section h3 {
   font-size: 1.5rem;
   font-weight: 600;
   margin-top: 2rem;
   margin-bottom: 1rem;
   color: var(--secondary-color);
   letter-spacing: -0.3px;
}

.section-lead {
   font-size: 1.2rem;
   line-height: 1.75;
   color: #5a5a6a;
   margin-bottom: 3rem;
   max-width: 900px;
   font-weight: 400;
}

/* ========== SERVICES ========== */
.services-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 2rem;
   margin-top: 2.5rem;
   margin-bottom: 3rem;
   align-items: start;
}

.service-card {
   position: relative;
   border: 1px solid transparent;
   background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(245,248,255,0.92));
   border-radius: 14px;
   box-shadow: 
      0 2px 4px rgba(10, 20, 40, 0.04),
      0 8px 16px rgba(10, 20, 40, 0.06),
      0 16px 32px rgba(10, 20, 40, 0.06);
   padding: 26px;
   transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
   opacity: 0;
   animation: slideInUp 0.6s ease forwards;
}

.service-card:nth-child(1) { animation-delay: 0.1s; }
.service-card:nth-child(2) { animation-delay: 0.2s; }
.service-card:nth-child(3) { animation-delay: 0.3s; }
.service-card:nth-child(4) { animation-delay: 0.4s; }

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

.service-card::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 14px;
   padding: 1px;
   background: linear-gradient(135deg, rgba(0, 119, 181, 0.4), rgba(15, 52, 96, 0.4));
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   opacity: 0;
   transition: opacity 280ms ease;
   pointer-events: none;
   z-index: -1;
}

.service-card > * {
   position: relative;
}

.service-card:hover {
   transform: translateY(-5px);
   box-shadow: 
      0 4px 8px rgba(0, 119, 181, 0.08),
      0 12px 24px rgba(0, 119, 181, 0.12),
      0 24px 48px rgba(0, 119, 181, 0.14),
      0 0 0 1px rgba(0, 119, 181, 0.1);
}

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

.service-card h3 {
   font-size: 1.375rem;
   font-weight: 600;
   color: var(--primary-color);
   margin-top: 0;
   margin-bottom: 1rem;
}

.service-icon {
   width: 48px;
   height: 48px;
   margin-bottom: 1.25rem;
   padding: 10px;
   background: linear-gradient(135deg, rgba(0, 119, 181, 0.08), rgba(15, 52, 96, 0.08));
   border-radius: 10px;
   border: 1px solid rgba(0, 119, 181, 0.15);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 280ms ease;
}

.service-icon img {
   width: 28px;
   height: 28px;
   stroke: var(--primary-color);
   filter: invert(14%) sepia(45%) saturate(1500%) hue-rotate(195deg) brightness(95%) contrast(95%);
}

.service-card:hover .service-icon {
   background: linear-gradient(135deg, rgba(0, 119, 181, 0.15), rgba(15, 52, 96, 0.15));
   border-color: rgba(0, 119, 181, 0.3);
   transform: translateY(-2px) scale(1.05);
}

.service-card .outcome {
   font-size: 0.95rem;
   line-height: 1.6;
   color: var(--text-color);
   margin-bottom: 1rem;
}

.service-card .highlights {
   list-style: none;
   padding: 0;
   margin: 0 0 0.5rem 0;
}

.service-card .highlights li {
   font-size: 0.875rem;
   line-height: 1.6;
   color: var(--text-light);
   margin-bottom: 0.375rem;
   padding-left: 1.125rem;
   position: relative;
}

.service-card .highlights li::before {
   content: "✓";
   position: absolute;
   left: 0;
   color: var(--accent-color);
   font-weight: bold;
   font-size: 0.875rem;
}

.service-card ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.service-card ul li {
   font-size: 0.9rem;
   line-height: 1.6;
   color: var(--text-light);
   margin-bottom: 0.5rem;
   padding-left: 1.25rem;
   position: relative;
}

.service-card ul li::before {
   content: "";
   position: absolute;
   left: 0;
   color: var(--accent-color);
   font-weight: bold;
}

.service-details {
   margin-top: 12px;
}

.service-details summary {
   cursor: pointer;
   font-weight: 600;
   color: #0b3a7a;
   list-style: none;
   font-size: 0.875rem;
   padding: 8px 0;
   user-select: none;
   transition: color 150ms ease;
   outline: none;
}

.service-details summary:hover {
   color: var(--accent-color);
}

.service-details summary::-webkit-details-marker {
   display: none;
}

.service-details summary::marker {
   display: none;
}

.service-details summary::after {
   content: "▼";
   font-size: 0.7rem;
   margin-left: 6px;
   display: inline-block;
   transition: transform 180ms ease;
}

.service-details[open] summary::after {
   transform: rotate(180deg);
}

.service-details .details-body {
   margin-top: 10px;
   padding-top: 10px;
   border-top: 1px solid rgba(20, 40, 80, 0.08);
   animation: expandDetails 0.3s ease forwards;
}

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

.service-details .details-body p {
   font-size: 0.875rem;
   font-weight: 600;
   color: var(--text-light);
   margin: 0 0 0.5rem 0;
}

.service-details .details-body ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.service-details .details-body ul li {
   font-size: 0.875rem;
   line-height: 1.6;
   color: var(--text-light);
   margin-bottom: 0.375rem;
   padding-left: 1.125rem;
   position: relative;
}

.service-details .details-body ul li::before {
   content: "•";
   position: absolute;
   left: 0;
   color: var(--accent-color);
   font-weight: bold;
}

.capabilities-section {
   margin-top: 3rem;
   padding: 2rem;
   background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(245,248,255,0.92));
   border-radius: 12px;
   border: 1px solid var(--border-color);
   box-shadow: 
      0 2px 4px rgba(0,0,0,0.04),
      0 4px 8px rgba(0,0,0,0.06);
}

.capabilities-section h3 { margin-top: 0; }

.skills-badges {
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
   margin-bottom: 2rem;
}

.skill-badge {
   display: inline-block;
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--primary-color);
   background: rgba(255, 255, 255, 0.8);
   border: 1.5px solid rgba(0, 119, 181, 0.25);
   border-radius: 20px;
   transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1);
   cursor: default;
}

.skill-badge:hover {
   background: rgba(0, 119, 181, 0.08);
   border-color: rgba(0, 119, 181, 0.4);
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 119, 181, 0.15);
}

.capabilities-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.capabilities-list li {
   font-size: 0.95rem;
   line-height: 1.7;
   color: var(--text-color);
   margin-bottom: 0.75rem;
   padding-left: 1.5rem;
   position: relative;
}

.capabilities-list li::before {
   content: "";
   position: absolute;
   left: 0;
   color: var(--accent-color);
   font-weight: bold;
}

/* ========== EXPERIENCE ========== */
.experience-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2rem;
   margin-top: 2.5rem;
   margin-bottom: 3rem;
   align-items: start;
}

.experience-card {
   background-color: #ffffff;
   padding: 2rem;
   border-radius: 12px;
   border: 1px solid var(--border-color);
   box-shadow: 
      0 2px 4px rgba(0,0,0,0.04),
      0 4px 8px rgba(0,0,0,0.06);
   transition: all 320ms cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   display: flex;
   flex-direction: column;
}

.experience-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: linear-gradient(90deg, #5dade2, #3498db);
   border-radius: 12px 12px 0 0;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.experience-card:nth-child(1) { animation-delay: 0.1s; }
.experience-card:nth-child(2) { animation-delay: 0.2s; }
.experience-card:nth-child(3) { animation-delay: 0.3s; }
.experience-card:nth-child(4) { animation-delay: 0.4s; }
.experience-card:nth-child(5) { animation-delay: 0.5s; }
.experience-card:nth-child(6) { animation-delay: 0.6s; }

.experience-card > * {
   position: relative;
   z-index: 1;
}

.experience-card:hover {
   transform: translateY(-6px);
   border-color: rgba(93, 173, 226, 0.3);
   box-shadow: 
      0 4px 8px rgba(93, 173, 226, 0.1),
      0 12px 24px rgba(93, 173, 226, 0.15),
      0 0 0 1px rgba(93, 173, 226, 0.1);
}

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

.experience-icon {
   width: 56px;
   height: 56px;
   background: linear-gradient(135deg, rgba(93, 173, 226, 0.1) 0%, rgba(52, 152, 219, 0.15) 100%);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1.25rem;
   transition: all 0.3s ease;
}

.experience-icon svg {
   stroke: #5dade2;
   transition: transform 0.3s ease;
}

.experience-card:hover .experience-icon {
   background: linear-gradient(135deg, rgba(93, 173, 226, 0.15) 0%, rgba(52, 152, 219, 0.25) 100%);
   transform: scale(1.05);
}

.experience-card:hover .experience-icon svg {
   transform: scale(1.1);
}

.experience-card h3 {
   font-size: 1.2rem;
   font-weight: 600;
   color: var(--primary-color);
   margin-top: 0;
   margin-bottom: 0.75rem;
   line-height: 1.3;
}

.experience-card .outcome {
   font-size: 0.9rem;
   color: var(--text-light);
   margin-bottom: 1rem;
   line-height: 1.6;
}

.experience-card .highlights {
   list-style: none;
   padding: 0;
   margin: 0 0 1rem 0;
}

.experience-card .highlights li {
   font-size: 0.875rem;
   color: var(--text-color);
   padding: 0.35rem 0;
   padding-left: 1.5rem;
   position: relative;
   line-height: 1.5;
}

.experience-card .highlights li::before {
   content: "✓";
   position: absolute;
   left: 0;
   color: #5dade2;
   font-weight: 600;
   font-size: 0.9rem;
}

.german-market-block {
   margin-top: 2rem;
   padding: 2rem;
   background-color: #ffffff;
   border-radius: 8px;
   border: 1px solid var(--border-color);
   box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.german-market-block h3 {
   margin-top: 0;
   font-size: 1.375rem;
}

.german-market-block p {
   font-size: 0.95rem;
   line-height: 1.7;
   color: var(--text-light);
   margin: 0;
}

/* ========== ABOUT ========== */
.about-with-image {
   display: flex;
   gap: 3rem;
   align-items: flex-start;
   margin-top: 2rem;
}

.about-text { flex: 1; }

.about-text p {
   font-size: 1rem;
   line-height: 1.7;
   color: var(--text-light);
   margin-bottom: 1.25rem;
}

.location-line {
   color: var(--text-color);
   font-weight: 500;
}

.about-image { flex: 0 0 280px; }

.headshot-about {
   width: 280px;
   height: 280px;
   border-radius: 50%;
   object-fit: cover;
   border: 3px solid var(--border-color);
   box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ========== CONTACT ========== */
.form-container { max-width: 700px; margin: 0 auto; }

.contact-form {
   background-color: #ffffff;
   padding: 2.5rem;
   border-radius: 8px;
   border: 1px solid var(--border-color);
   box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.form-group { margin-bottom: 1.5rem; }

.form-group label {
   display: block;
   font-size: 0.95rem;
   font-weight: 600;
   color: var(--text-color);
   margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
   width: 100%;
   padding: 0.75rem;
   font-size: 1rem;
   font-family: inherit;
   border: 2px solid var(--border-color);
   border-radius: 5px;
   background-color: #ffffff;
   transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
   outline: none;
   border-color: var(--focus-color);
}

.form-group textarea {
   resize: vertical;
   min-height: 150px;
}

/* Honeypot field - hidden from users, visible to bots */
.form-group.honeypot {
   position: absolute;
   left: -9999px;
   width: 1px;
   height: 1px;
   opacity: 0;
   pointer-events: none;
}

/* Form status messages */
.form-status {
   margin-top: 1.5rem;
   padding: 1rem 1.25rem;
   border-radius: 5px;
   font-size: 0.95rem;
   line-height: 1.5;
   font-weight: 500;
}

.form-status-success {
   background-color: #d4edda;
   color: #155724;
   border: 1px solid #c3e6cb;
}

.form-status-error {
   background-color: #f8d7da;
   color: #721c24;
   border: 1px solid #f5c6cb;
}

.contact-linkedin { text-align: center; margin-top: 2rem; }

.contact-alternatives { text-align: center; margin-top: 2rem; }
.contact-or { color: #666; margin-bottom: 1rem; font-size: 0.95rem; }
.contact-links { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

.btn-email-secondary {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.75rem 1.5rem;
   background-color: #2c3e50;
   color: white;
   border-radius: 5px;
   text-decoration: none;
   font-weight: 600;
   transition: background-color 0.2s ease;
}
.btn-email-secondary:hover { background-color: #1a252f; }
.btn-email-secondary svg { width: 20px; height: 20px; }

.btn-linkedin-secondary {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.75rem 1.5rem;
   background-color: #0077b5;
   color: white;
   border-radius: 5px;
   text-decoration: none;
   font-weight: 600;
   transition: background-color 0.2s ease;
}

.btn-linkedin-secondary:hover { background-color: #006399; }
.btn-linkedin-secondary .linkedin-icon { width: 20px; height: 20px; }

/* ========== SCROLL NAVIGATION DOTS ========== */
.scroll-nav {
   position: fixed;
   right: 2rem;
   top: 50%;
   transform: translateY(-50%);
   z-index: 999;
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.scroll-dot {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: rgba(26, 26, 46, 0.2);
   border: 2px solid rgba(26, 26, 46, 0.3);
   transition: all 320ms cubic-bezier(0.4, 0, 0.2, 1);
   display: block;
   position: relative;
}

.scroll-dot::after {
   content: attr(title);
   position: absolute;
   right: 24px;
   top: 50%;
   transform: translateY(-50%);
   white-space: nowrap;
   padding: 0.375rem 0.75rem;
   background: var(--primary-color);
   color: white;
   font-size: 0.75rem;
   font-weight: 600;
   border-radius: 4px;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s ease;
}

.scroll-dot:hover::after {
   opacity: 1;
}

.scroll-dot:hover,
.scroll-dot.active {
   background: #0077b5;
   border-color: #0077b5;
   transform: scale(1.3);
   box-shadow: 0 0 0 4px rgba(0, 119, 181, 0.15);
}

.scroll-dot.active {
   background: var(--primary-color);
   border-color: var(--primary-color);
}

/* ========== FOOTER ========== */
footer {
   background: linear-gradient(180deg, #0d1528 0%, #1a1a2e 100%);
   color: white;
   padding: 4rem 0 1.5rem 0;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 1fr;
   gap: 3rem;
   margin-bottom: 3rem;
}

.footer-column h4 {
   font-size: 1rem;
   font-weight: 600;
   margin-bottom: 1.25rem;
   color: white;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   font-size: 0.875rem;
   color: rgba(255, 255, 255, 0.6);
}

.footer-logo { 
   height: 48px; 
   width: auto; 
   margin-bottom: 1rem; 
   filter: brightness(0) invert(1);
}

.footer-brand-text { 
   font-size: 1.25rem; 
   margin-bottom: 0.75rem;
   font-weight: 600;
}

.footer-tagline { 
   font-size: 0.95rem; 
   color: rgba(255, 255, 255, 0.7); 
   margin: 0;
   line-height: 1.6;
}

.footer-links { 
   list-style: none; 
   padding: 0; 
   margin: 0; 
}

.footer-links li { 
   margin-bottom: 0.75rem; 
}

.footer-links a {
   color: rgba(255, 255, 255, 0.75);
   text-decoration: none;
   font-size: 0.9rem;
   transition: all 0.2s ease;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   position: relative;
}

.footer-links a::before {
   content: '';
   position: absolute;
   bottom: -2px;
   left: 0;
   width: 0;
   height: 2px;
   background: #0077b5;
   transition: width 0.3s ease;
}

.footer-links a:hover {
   color: white;
   transform: translateX(4px);
}

.footer-links a:hover::before {
   width: 100%;
}

.linkedin-icon-inline { 
   width: 16px; 
   height: 16px; 
   vertical-align: middle; 
}

.footer-bottom {
   text-align: center;
   padding-top: 2.5rem;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
   font-size: 0.875rem;
   color: rgba(255, 255, 255, 0.6);
   margin: 0;
}

/* ========== LEGAL & PRIVACY ========== */
.legal-section,
.privacy-section { padding: 4rem 2rem; background-color: #ffffff; }

.legal-content,
.privacy-content { max-width: 900px; margin: 0 auto; }

.legal-title,
.privacy-title {
   font-size: 2.5rem;
   font-weight: 700;
   color: var(--primary-color);
   margin-bottom: 2rem;
}

.privacy-intro {
   font-size: 1.125rem;
   line-height: 1.7;
   color: var(--text-light);
   margin-bottom: 2rem;
   font-weight: 500;
}

.legal-content p,
.privacy-content p {
   font-size: 1rem;
   line-height: 1.7;
   color: var(--text-light);
   margin-bottom: 1rem;
}

.legal-content h3 {
   font-size: 1.5rem;
   font-weight: 600;
   color: var(--secondary-color);
   margin-top: 2rem;
   margin-bottom: 1rem;
}

.btn-back {
   display: inline-block;
   padding: 0.75rem 1.5rem;
   background-color: var(--primary-color);
   color: white;
   border-radius: 5px;
   text-decoration: none;
   font-weight: 600;
   transition: background-color 0.2s ease;
}

.btn-back:hover { background-color: var(--secondary-color); }

/* ========== ACCORDION ========== */
.accordion { margin-top: 2rem; }

.accordion-item {
   margin-bottom: 1rem;
   border: 1px solid var(--border-color);
   border-radius: 6px;
   overflow: hidden;
   background-color: #ffffff;
}

.accordion-header {
   width: 100%;
   padding: 1.25rem 1.5rem;
   background-color: var(--bg-grey);
   border: none;
   text-align: left;
   cursor: pointer;
   font-size: 1rem;
   font-weight: 600;
   color: var(--text-color);
   display: flex;
   justify-content: space-between;
   align-items: center;
   transition: background-color 0.2s ease;
}

.accordion-header:hover { background-color: #e8e8ed; }

.accordion-icon {
   font-size: 1.5rem;
   font-weight: 400;
   color: var(--text-light);
   transition: transform 0.2s ease;
}

.accordion-content {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease;
   padding: 0 1.5rem;
}

.accordion-item.active .accordion-content {
   max-height: 1000px;
   padding: 1.5rem;
}

.accordion-item.active .accordion-icon { transform: rotate(45deg); }

.accordion-content ul { list-style: none; padding: 0; margin: 0; }

.accordion-content ul li {
   font-size: 0.95rem;
   line-height: 1.7;
   color: var(--text-light);
   margin-bottom: 0.75rem;
   padding-left: 1.5rem;
   position: relative;
}

.accordion-content ul li::before {
   content: "";
   position: absolute;
   left: 0;
   color: var(--accent-color);
   font-weight: bold;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
   .experience-grid {
      grid-template-columns: repeat(2, 1fr);
   }
   
   .services-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 768px) {
   .logo-image { height: 60px; }
   
   .logo-hero { max-width: 200px; padding: 8px; }
   
   .hero { padding: 3rem 1.5rem; }
   
   .hero h1 {
      font-size: 1.75rem;
      padding: 0.75rem 1rem;
   }
   
   .hero-with-image {
      flex-direction: column-reverse;
      gap: 2rem;
   }
   
   .hero-image { flex: 0 0 auto; }
   
   .hero-value-panel {
      flex: 0 0 auto;
      width: 100%;
      padding: 2rem 1.5rem;
   }
   
   .value-panel-title {
      font-size: 1.125rem;
   }
   
   .value-panel-item {
      padding: 1rem 0;
   }
   
   .value-panel-icon {
      width: 32px;
      height: 32px;
   }
   
   .value-panel-footer {
      margin-top: 1.5rem;
      padding-top: 1.25rem;
   }
   
   .hero-brand {
      flex: 0 0 auto;
      width: 100%;
      max-width: 100%;
   }
   
   .hero-brand-card {
      padding: 2rem 1.5rem;
   }
   
   .logo-hero {
      max-width: 220px;
   }
   
   .hero-brand-tagline-external {
      font-size: 0.8rem;
   }
   
   .trust-bar-horizontal {
      flex-direction: column;
      gap: 0.5rem;
      text-align: center;
   }
   
   .trust-bar-separator {
      display: none;
   }
   
   .headshot-hero { width: 200px; height: 200px; }
   
   .hero-subtitle-enhanced,
   .hero-credibility { font-size: 1rem; }
   
   section { padding: 4rem 1.5rem; }
   section h2 { 
      font-size: 1.875rem;
      letter-spacing: -0.3px;
   }
   
   .section-lead {
      font-size: 1.05rem;
   }
   
   .services-grid { 
      grid-template-columns: 1fr; 
      gap: 1.5rem; 
   }
   
   .service-card {
      animation: none;
      opacity: 1;
   }
   
   .skills-badges {
      gap: 0.5rem;
   }
   
   .skill-badge {
      font-size: 0.8rem;
      padding: 0.4rem 0.85rem;
   }
   
   .experience-grid { grid-template-columns: 1fr; gap: 1.5rem; }
   
   .experience-icon {
      width: 48px;
      height: 48px;
   }
   
   .experience-icon svg {
      width: 24px;
      height: 24px;
   }
   
   .about-with-image { flex-direction: column; gap: 2rem; }
   .about-image { flex: 0 0 auto; align-self: center; }
   .headshot-about { width: 200px; height: 200px; }
   
   .trust-items { flex-direction: column; align-items: stretch; }
   .trust-items-clean { flex-direction: column; align-items: stretch; }
   
   .footer-grid { 
      grid-template-columns: 1fr; 
      gap: 2.5rem; 
   }
   
   .nav-links {
      display: none;
      flex-direction: column;
      width: 100%;
      gap: 0;
      margin-top: 1rem;
      background-color: var(--secondary-color);
      border-radius: 4px;
      overflow: hidden;
   }
   
   .nav-links.active { display: flex; }
   .nav-links li { width: 100%; }
   
   .nav-links a {
      display: block;
      padding: 1rem 1.5rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   }
   
   .menu-toggle { display: block; }
   nav { flex-wrap: wrap; }
   
   .lang-switcher {
      position: absolute;
      right: 60px;
      top: 50%;
      transform: translateY(-50%);
      margin-left: 0;
   }
   
   .scroll-nav { display: none; }
}

/* ===== METRICS SECTION ===== */
.metrics-section {
   padding: 6rem 2rem;
   background: linear-gradient(135deg, #0a1227 0%, #0d1a35 50%, #0a1227 100%);
   color: white;
   position: relative;
   overflow: hidden;
}

.metrics-section::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: radial-gradient(circle at 20% 50%, rgba(42, 157, 244, 0.1) 0%, transparent 50%),
               radial-gradient(circle at 80% 50%, rgba(15, 52, 96, 0.15) 0%, transparent 50%);
   pointer-events: none;
}

.metrics-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 2rem;
   margin-bottom: 4rem;
   position: relative;
   z-index: 1;
}

.metric-card {
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(10px);
   padding: 2rem;
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   text-align: center;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   opacity: 0;
   transform: translateY(30px);
}

.metric-card.revealed {
   opacity: 1;
   transform: translateY(0);
}

.metric-card:hover {
   background: rgba(255, 255, 255, 0.08);
   transform: translateY(-8px);
   box-shadow: 0 20px 40px rgba(42, 157, 244, 0.2);
}

.metric-icon {
   width: 48px;
   height: 48px;
   margin: 0 auto 1rem;
}

.metric-icon svg {
   width: 100%;
   height: 100%;
   stroke: #5dade2;
   fill: none;
}

.metric-number {
   font-size: 3rem;
   font-weight: 800;
   line-height: 1;
   margin-bottom: 0.5rem;
   color: #5dade2;
}

.metric-label {
   font-size: 1rem;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.9);
   margin-bottom: 0.25rem;
}

.metric-sublabel {
   font-size: 0.85rem;
   color: rgba(255, 255, 255, 0.6);
}

.competencies-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 1rem;
   position: relative;
   z-index: 1;
}

.competency-item {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   padding: 0.75rem 1rem;
   background: rgba(255, 255, 255, 0.03);
   border-radius: 8px;
   border-left: 3px solid var(--primary-color);
   font-size: 0.95rem;
   opacity: 0;
   transform: translateX(-30px);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.competency-item.revealed {
   opacity: 1;
   transform: translateX(0);
}

.competency-item:hover {
   background: rgba(255, 255, 255, 0.06);
   transform: translateX(5px);
}

.competency-item svg {
   flex-shrink: 0;
   width: 20px;
   height: 20px;
   stroke: var(--primary-color);
   fill: none;
}

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress {
   position: fixed;
   top: 0;
   left: 0;
   height: 3px;
   background: linear-gradient(90deg, var(--primary-color) 0%, #5dade2 100%);
   width: 0%;
   z-index: 1000;
   transition: width 0.1s ease-out;
   box-shadow: 0 0 10px rgba(42, 157, 244, 0.5);
}

/* ===== STICKY CTA ===== */
.sticky-cta {
   position: fixed;
   bottom: 2rem;
   right: 2rem;
   background: var(--primary-color);
   color: white;
   padding: 1rem 1.5rem;
   border-radius: 50px;
   box-shadow: 0 8px 20px rgba(42, 157, 244, 0.3);
   text-decoration: none;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 0.5rem;
   z-index: 999;
   opacity: 0;
   transform: translateY(100px);
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sticky-cta.visible {
   opacity: 1;
   transform: translateY(0);
}

.sticky-cta:hover {
   background: #0f3460;
   transform: translateY(-5px);
   box-shadow: 0 12px 30px rgba(42, 157, 244, 0.4);
}

.sticky-cta svg {
   width: 20px;
   height: 20px;
   fill: currentColor;
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast-container {
   position: fixed;
   top: 2rem;
   right: 2rem;
   z-index: 1001;
   display: flex;
   flex-direction: column;
   gap: 1rem;
   pointer-events: none;
}

.toast {
   background: white;
   padding: 1rem 1.5rem;
   border-radius: 8px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
   display: flex;
   align-items: center;
   gap: 0.75rem;
   min-width: 300px;
   opacity: 0;
   transform: translateX(400px);
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   pointer-events: all;
}

.toast.show {
   opacity: 1;
   transform: translateX(0);
}

.toast.success {
   border-left: 4px solid #27ae60;
}

.toast.error {
   border-left: 4px solid #e74c3c;
}

.toast-icon {
   width: 24px;
   height: 24px;
   flex-shrink: 0;
}

.toast.success .toast-icon {
   color: #27ae60;
}

.toast.error .toast-icon {
   color: #e74c3c;
}

.toast-message {
   flex: 1;
   color: #333;
   font-size: 0.95rem;
}

.toast-close {
   background: none;
   border: none;
   color: #999;
   cursor: pointer;
   padding: 0;
   width: 20px;
   height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: color 0.2s;
}

.toast-close:hover {
   color: #333;
}

/* ===== FORM VALIDATION STYLES ===== */
.form-group {
   position: relative;
}

.form-group.valid input,
.form-group.valid textarea {
   border-color: #27ae60;
}

.form-group.invalid input,
.form-group.invalid textarea {
   border-color: #e74c3c;
}

.form-validation-icon {
   position: absolute;
   right: 1rem;
   top: 2.5rem;
   width: 20px;
   height: 20px;
   opacity: 0;
   transition: opacity 0.3s;
}

.form-group.valid .form-validation-icon.check,
.form-group.invalid .form-validation-icon.x {
   opacity: 1;
}

.form-validation-icon svg {
   width: 100%;
   height: 100%;
}

.form-validation-icon.check svg {
   stroke: #27ae60;
   fill: none;
}

.form-validation-icon.x svg {
   stroke: #e74c3c;
   fill: none;
}

.form-error-message {
   color: #e74c3c;
   font-size: 0.85rem;
   margin-top: 0.25rem;
   opacity: 0;
   height: 0;
   overflow: hidden;
   transition: all 0.3s;
}

.form-group.invalid .form-error-message {
   opacity: 1;
   height: auto;
   margin-top: 0.5rem;
}

/* ===== ACCESSIBILITY ===== */
.skip-link {
   position: absolute;
   top: -40px;
   left: 0;
   background: var(--primary-color);
   color: white;
   padding: 0.5rem 1rem;
   text-decoration: none;
   z-index: 10000;
   border-radius: 0 0 8px 0;
}

.skip-link:focus {
   top: 0;
}

*:focus-visible {
   outline: 3px solid var(--primary-color);
   outline-offset: 2px;
   border-radius: 4px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
   outline: 3px solid var(--primary-color);
   outline-offset: 2px;
}

/* ===== PREFERS REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
   
   /* Keep particle animations but make them slower/subtler */
   .particle-cloud-1::before,
   .particle-cloud-2::before,
   .particle-cloud-3::before,
   .particle-cloud-4::before,
   .particle-layer-3::before,
   .particle-layer-3::after,
   .particle-layer-4::before,
   .particle-layer-4::after,
   .particle-layer-5::before,
   .particle-layer-5::after,
   .particle-layer-6::before,
   .particle-layer-6::after,
   .particle-layer-7::before,
   .particle-layer-7::after,
   .particle-layer-8::before,
   .particle-layer-8::after,
   .particle-layer-9::before,
   .particle-layer-9::after,
   .particle-layer-10::before,
   .particle-layer-10::after,
   .particle-layer-11::before,
   .particle-layer-11::after,
   .particle-layer-12::before,
   .particle-layer-12::after,
   .particle-layer-13::before,
   .particle-layer-13::after,
   .particle-layer-14::before,
   .particle-layer-14::after,
   .particle-layer-15::before,
   .particle-layer-15::after,
   .particle-layer-16::before,
   .particle-layer-16::after {
      animation-duration: 8s !important;
   }
   
   .particle {
      display: none;
   }
}

/* ===== PARALLAX CONTAINER ===== */
.hero-particles {
   transition: transform 0.1s ease-out;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
   .metrics-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
   }
   
   .competencies-grid {
      grid-template-columns: 1fr;
   }
   
   .metric-number {
      font-size: 2.5rem;
   }
   
   .sticky-cta {
      bottom: 1rem;
      right: 1rem;
      padding: 0.875rem 1.25rem;
      font-size: 0.9rem;
   }
   
   .toast-container {
      top: 1rem;
      right: 1rem;
      left: 1rem;
   }
   
   .toast {
      min-width: auto;
   }
}

@media (max-width: 480px) {
   .hero h1 { font-size: 1.5rem; }
   .cta-buttons { flex-direction: column; align-items: stretch; }
   .btn { text-align: center; }
}