:root{
  --bg:#060E16; --panel:#0B1824; --card:#0F2030; --line:rgba(121,207,255,.14);
  --text: #ffffff; --muted: #dfe6ee; --green:#4DFF88; --teal:#34D0FF; --max:1200px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Arial}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}

/* NAV */
header{position:sticky;top:0;z-index:10;background:rgba(6,14,22,.8);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{font-weight:900;letter-spacing:.4px}
.brand .accent{color:var(--green)}
.navlinks{display:flex;align-items:center;gap:20px}
.navlinks a{opacity:.9}
.navlinks a.cta{background:var(--green);color:#03220e;padding:10px 16px;border-radius:10px;font-weight:800;text-transform:uppercase}
.menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;align-items:center;justify-content:center;cursor:pointer}
.menu-toggle span,.menu-toggle::before,.menu-toggle::after{content:"";display:block;width:22px;height:2px;background:var(--text);margin:3px 0}

/* HERO */
.hero{background:
  linear-gradient(180deg, rgba(77,255,136,.08), transparent 40%),
  radial-gradient(80% 60% at 20% 0%, rgba(52,208,255,.12), transparent 55%),
  var(--bg);
}
.hero .wrap{padding:120px 0 80px}
.hero h1{font-family:Montserrat,Inter,Arial,sans-serif;font-weight:900;font-size:56px;line-height:1.05;margin:0 0 16px;letter-spacing:.3px}
.hero h1 .muted{opacity:.9}
.hero h1 .green{color:var(--green)}
.lead{font-size:18px;color:var(--muted);max-width:760px}
.buttons a{display:inline-block;margin-right:14px;margin-top:22px;padding:14px 18px;border-radius:12px;font-weight:800;text-transform:uppercase;letter-spacing:.3px}
.btn-primary{background:var(--green);color:#00170a}
.btn-ghost{border:1px solid var(--line)}

/* SECTIONS */
.section{background:var(--panel);border-top:1px solid var(--line)}
.section.alt{background:var(--bg)}
.section .wrap{padding:64px 0}
h2{font-family:Montserrat,Inter,Arial,sans-serif;font-size:28px;letter-spacing:.4px;margin:0 0 22px}

/* CARDS */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
.card .icon{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--teal);margin-bottom:10px}
.card h3{margin:6px 0 8px;letter-spacing:.2px}
.card p{color:var(--muted)}

/* BADGES */
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.badge{border:1px solid var(--line);color:var(--muted);padding:6px 10px;border-radius:999px;font-size:12px}

/* CTA */
.cta-band{background:linear-gradient(90deg, rgba(77,255,136,.12), rgba(52,208,255,.08));border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* FOOTER */
footer{background:#051018;border-top:1px solid var(--line)}
footer .wrap{padding:36px 0;font-size:14px;color:var(--muted)}

/* Responsive */
@media (max-width: 960px){
  .grid-3{grid-template-columns:1fr}
  .hero h1{font-size:40px}
  .menu-toggle{display:flex}
  .navlinks{position:fixed;top:70px;right:16px;left:16px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;display:none;flex-direction:column;gap:10px}
  .navlinks a{display:block;width:100%;padding:10px;border-radius:10px;background:transparent}
  .navlinks a.cta{width:100%;text-align:center}
  .nav.open .navlinks{display:flex}
}


/* === Visual Refresh v3.2 (icons bigger, depth, glow) === */
:root{
  --glow-green: 0 0 32px rgba(77,255,136,.18);
  --glow-teal: 0 0 32px rgba(52,208,255,.18);
}

.hero{
  background:
    radial-gradient(50% 30% at 20% 0%, rgba(52,208,255,.18), transparent 60%),
    radial-gradient(40% 40% at 80% 10%, rgba(77,255,136,.18), transparent 65%),
    linear-gradient(180deg, rgba(8,24,36,.4), transparent 40%),
    var(--bg);
}

.card{ position: relative; overflow: hidden; }
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(60% 40% at 20% -10%, rgba(52,208,255,.09), transparent 60%);
}
.card .icon{
  width:64px; height:64px; font-size:26px; /* bigger icon */
  border-radius:14px; border:1px solid var(--line);
  box-shadow: var(--glow-teal);
}
.card h3{ font-size:20px; }

.btn-primary, .btn-ghost{
  display:inline-flex; align-items:center; gap:10px;
  box-shadow: var(--glow-green);
}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; font-weight:600;
}
.badge i{ color: var(--teal); }

/* Nav brand pop */
.brand{ font-size:18px; }
.brand .accent{ text-shadow: 0 0 10px rgba(77,255,136,.35); }

/* === Services Grid Boost === */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;position:relative;overflow:hidden}
.service-card .service-icon{width:68px;height:68px;border:1px solid var(--line);border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--teal);box-shadow:0 0 32px rgba(52,208,255,.18);margin-bottom:10px}
.service-card h3{margin:6px 0 8px;font-size:20px;letter-spacing:.2px}
.service-card p{color:var(--muted)}
@media (max-width:960px){.services-grid{grid-template-columns:1fr}}

/* === About Page Enhancements === */
.about-hero{
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)),
    url('https://images.unsplash.com/photo-1518998053901-5348d3961a04?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat;
}
.about-hero .wrap{ padding: 120px 0 80px; }
.about-hero h1{
  font-family: Montserrat, Inter, Arial, sans-serif;
  font-weight:900; font-size:56px; line-height:1.05; margin:0 0 16px;
}
.about-strap{ max-width: 980px; }

.about-split{
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px;
}
.about-image{
  min-height: 360px; border-radius: 18px; border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(5,16,24,.25), rgba(5,16,24,.45)),
    url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
  box-shadow: 0 0 32px rgba(52,208,255,.14);
}
.brand-inline{ font-weight:800; color: var(--green); }

.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.value .value-icon{
  width:68px;height:68px;border:1px solid var(--line);border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:28px;
  color:var(--teal);box-shadow:0 0 32px rgba(52,208,255,.18);margin-bottom:10px
}
.about-credentials{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.about-credentials li{ display:flex; align-items:center; gap:10px; color: var(--muted); }
.about-credentials i{ color: var(--teal); }

@media (max-width:960px){
  .about-hero h1{ font-size:40px }
  .about-split{ grid-template-columns: 1fr; }
}

/* === Hero Animated Traffic Background === */
.animated-traffic{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Background photo (dark + blur) */
.animated-traffic::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url('https://images.unsplash.com/photo-1504384308090-c894fdcc538d?q=80&w=2000&auto=format&fit=crop') center/cover no-repeat;
  filter: blur(2px) brightness(.7);
  transform: scale(1.03);
}

/* Animated light streaks to mimic highway traffic */
.animated-traffic::after{
  content:""; position:absolute; inset:-10% -20%; z-index:-1; opacity:.35;
  background:
    repeating-linear-gradient(100deg,
      rgba(77,255,136,.0) 0%,
      rgba(77,255,136,.15) 10%,
      rgba(77,255,136,.0) 20%,
      rgba(52,208,255,.0) 20%,
      rgba(52,208,255,.18) 28%,
      rgba(52,208,255,.0) 36%
    );
  filter: blur(8px) saturate(120%);
  animation: traffic-sweep 14s linear infinite;
  pointer-events:none;
}

/* Looping sweep animation */
@keyframes traffic-sweep{
  from{ transform: translateX(-20%) translateY(-10%) rotate(0.001deg); }
  to{   transform: translateX(20%)  translateY(10%)  rotate(0.001deg); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .animated-traffic::after{ animation: none; opacity:.18; }
}

/* === Traffic Background Fix & Readability Boost === */

/* Use an actual highway-at-night image with light trails */
.animated-traffic::before{
  background:
    linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.62)),
    url('https://images.unsplash.com/photo-1491553895911-0055eca6402d?q=80&w=2200&auto=format&fit=crop') center/cover no-repeat !important;
  filter: blur(3px) brightness(.72);
}

/* Services page: different traffic/tunnel photo (subtle) */
.traffic-services::before{
  background:
    linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.66)),
    url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=2200&auto=format&fit=crop') center/cover no-repeat !important;
  filter: blur(3px) brightness(.70);
}

/* Add soft text shadow so headings & lead copy stay readable on dark photos */
.hero h1, .hero .lead{
  text-shadow: 0 2px 18px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.45);
}

/* Make lead text a touch brighter on photo heroes */
.animated-traffic .lead{ color: #F0F6FB; opacity:.92; }

/* Ensure buttons pop on darker background */
.animated-traffic .btn-ghost{ background:rgba(0,0,0,.25); }
.animated-traffic .btn-primary{ box-shadow: 0 0 28px rgba(77,255,136,.25); }

/* Keep animation slower on Services so it doesn't distract */
.traffic-services::after{ animation-duration: 18s; opacity:.28; }

@media (max-width:960px){
  .animated-traffic::before{ filter: blur(2.5px) brightness(.75); }
}

/* === Custom Highway Hero Background === */
.animated-traffic::before{
  background:
    linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.62)),
    url('A_website_homepage_screenshot_for_"Protect_Your_CV.png') center/cover no-repeat !important;
  filter: blur(2px) brightness(.78);
}

/* === Set custom generated highway image for hero & about image === */
.animated-traffic::before{
  background:
    linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.64)),
    url('A_long_exposure_long-exposure_photograph_captures_.png') center/cover no-repeat !important;
  filter: blur(2.5px) brightness(.78);
}
.about-image{
  min-height: 360px; border-radius: 18px; border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(5,16,24,.28), rgba(5,16,24,.48)),
    url('A_long_exposure_long-exposure_photograph_captures_.png') center/cover no-repeat !important;
  box-shadow: 0 0 32px rgba(52,208,255,.14);
}