/* Fade-in animatie bij laden site */
body:not(.loaded) .site-header{
  opacity: 0;
  transition: opacity 1s;
}
body:not(.loaded) main,
body:not(.loaded) .section,
body:not(.loaded) .footer-inner {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(.4,.2,.2,1), transform 0.8s cubic-bezier(.4,.2,.2,1);
}
body.loaded .site-header,
body.loaded main,
body.loaded .section,
body.loaded .footer-inner {
  opacity: 1;
  transform: none;
  transition: opacity 1s cubic-bezier(.4,.2,.2,1), transform 2s cubic-bezier(.4,.2,.2,1);
}
/* Zorg dat ALLE achtergrond-overgangen vloeiend 1s mee-animeren */
section, .container, .card, .service-card, .expertise-item, .about-content, .contact-info, .footer-inner, .site-header, .nav, .btn, .case-card, .testimonial-card, .case-image, .expertise-tooltip, .scroll-arrow, .theme-toggle, .nav-toggle, body, html {
  transition: background 1s ease, background-color 1s ease, box-shadow 1s ease, border-color 1s ease;
}
:root,
:root[data-theme="dark"] {
  /* Dark mode colors (default) */
  --text: #e6eefc;
  --bg-primary: #0b1b35;
  --bg-secondary: #0b2038;
  --heading: #ffffff;
  --subtext: #b8c7e6;
  /* Liquid glass tokens */
  --glass-bg: rgba(255,255,255,0.07);
  --glass-bg-strong: rgba(255,255,255,0.12);
  --glass-stroke: rgba(255,255,255,0.18);
  --glass-highlight: rgba(255,255,255,0.45);
  --glass-shadow: rgba(2,6,23,0.55);
  --hairline: rgba(255,255,255,0.12);
  /* Gradients */
  --gradient-1: rgba(111,177,255,0.15);
  --gradient-2: rgba(122,76,255,0.12);
  --gradient-3: rgba(43,123,233,0.12);
  /* Logo glows */
  --logo-glow: drop-shadow(0 0 5px rgba(255,255,255,0.7));
  --logo-large-glow: drop-shadow(0 0 10px rgba(255,255,255,0.5));
}

/* Light mode - browser preference */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --text: #1a2332;
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --heading: #0b1b35;
    --subtext: #4a5568;
    /* Liquid glass tokens for light mode */
    --glass-bg: rgba(255,255,255,0.70);
    --glass-bg-strong: rgba(255,255,255,0.90);
    --glass-stroke: rgba(111,177,255,0.40);
    --glass-highlight: rgba(255,255,255,0.95);
    --glass-shadow: rgba(43,123,233,0.18);
    --hairline: rgba(111,177,255,0.30);
    /* Gradients - fellere blauwe vlekken */
    --gradient-1: rgba(111,177,255,0.35);
    --gradient-2: rgba(122,76,255,0.28);
    --gradient-3: rgba(43,123,233,0.32);
    /* Logo glows */
    --logo-glow: drop-shadow(0 0 5px rgba(43,123,233,0.3));
    --logo-large-glow: drop-shadow(0 0 10px rgba(43,123,233,0.2));
  }
}

:root[data-theme="light"] {
  --text: #1a2332;
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --heading: #0b1b35;
  --subtext: #4a5568;
  /* Liquid glass tokens for light mode */
  --glass-bg: rgba(255,255,255,0.70);
  --glass-bg-strong: rgba(255,255,255,0.90);
  --glass-stroke: rgba(111,177,255,0.40);
  --glass-highlight: rgba(255,255,255,0.95);
  --glass-shadow: rgba(43,123,233,0.18);
  --hairline: rgba(111,177,255,0.30);
  /* Gradients - fellere blauwe vlekken */
  --gradient-1: rgba(111,177,255,0.35);
  --gradient-2: rgba(122,76,255,0.28);
  --gradient-3: rgba(43,123,233,0.32);
  /* Logo glows */
  --logo-glow: drop-shadow(0 0 5px rgba(43,123,233,0.3));
  --logo-large-glow: drop-shadow(0 0 10px rgba(43,123,233,0.2));
}

/* Base */
*{box-sizing:border-box}
/* Verwijderd universele transition, alleen op hoofdcontainers */
html, body, .site-header, .section, .about-content, .contact-info, .footer-inner {
  transition: background 1s ease, background-color 1s ease, color 1s ease, border-color 1s ease, box-shadow 1s ease, filter 1s ease;
}

/* Zorg dat ALLE tekstkleur-overgangen vloeiend 1s mee animeert */
h1, h2, h3, h4, h5, h6,
p, span, a, li, strong, em, b, i, blockquote, label,
input, textarea, button, th, td, dt, dd, small, .brand, .brand-name, .lead, .section-title-center, .section-subtitle, .expertise-tooltip, .case-tag, .testimonial-text, .testimonial-author, .contact-note, .small-note {
  transition: color 1s ease, border-color 1s ease, background-color 1s ease;
}

/* Remove color/background transitions from subelements, only keep short hover/active transitions */
.card, .service-card, .expertise-item {
  transition: box-shadow 0.22s, transform 0.22s;
}
html{
  height:100%;
  min-height:100vh;
  scroll-behavior:smooth;
  overflow-x:hidden;
  width:100%;
  scroll-padding-top: 100px; /* offset for fixed header */
}
body{
  scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-left: 1px solid var(--glass-stroke);
  transition: background 1s ease, border-color 1s ease;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(111,177,255,0.4), rgba(122,76,255,0.3));
  border-radius: 6px;
  border: 2px solid var(--bg-secondary);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(111,177,255,0.6), rgba(122,76,255,0.5));
}
/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(111,177,255,0.4) var(--bg-secondary);
}
@font-face {
  font-family: 'Axis';
  src: url('fonts/Axis Extrabold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* Montserrat Font Faces */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
body{
  height:100%;
  min-height:100vh;
  margin:0;
  font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1100px 700px at 12% -8%, var(--gradient-1), transparent 60%),
    radial-gradient(900px 600px at 85% 12%, var(--gradient-2), transparent 60%),
    radial-gradient(800px 600px at 28% 92%, var(--gradient-3), transparent 62%),
    linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 60%);
  background-attachment:fixed;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  /* Improve mobile scrolling */
  -webkit-overflow-scrolling:touch;
  padding-top: 76px; /* hoogte van header */
  transition: background 1s ease, color 1s ease;
  overflow-x:hidden;
  width:100%;
  position:relative;
  margin-right: 0 !important; /* prevent shift when scrollbar appears */
}
/* Subtle noise + vignette */
body::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:0;
  opacity:.08;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
  transition: opacity 1s ease;
}
body::after{
  content:"";
  position:fixed;inset:-10vmax;pointer-events:none;z-index:0;
  background:radial-gradient(1200px 800px at 50% 120%, rgba(2,6,23,0.35), transparent 60%);
  transition: background 1s ease;
}

/* Container */
.container{
  width:calc(100% - 40px);
  max-width:1100px;
  margin:0 auto;
  padding:40px 0;
}

/* Header */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  background: linear-gradient(180deg, rgba(7,16,40,0.20), rgba(7,16,40,0.10));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 32px rgba(2,6,23,0.5);
  z-index:400;
  transition: background 1s ease, border-color 1s ease, box-shadow 1s ease;
}
.header-inner{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:14px 0;position:relative}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.logo{height:44px;width:auto;filter:drop-shadow(0 6px 18px rgba(43,123,233,0.14)) var(--logo-glow)}
.brand-name{font-weight:800;letter-spacing:0.6px;font-family:'Axis', sans-serif}

/* Nav */
.nav{display:flex;gap:18px;align-items:center}
/* Only animate transform for nav links, not color/background */
.nav a{position:relative;color:var(--text);text-decoration:none;font-weight:600;padding:8px 12px;border-radius:12px;transition:transform 0.22s ease;
  /* Better tap targets on mobile */
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nav a:hover{color:var(--heading);background:rgba(255,255,255,0.04)}
.nav a.active{color:var(--heading);background:var(--glass-bg);border:1px solid var(--glass-stroke);box-shadow:inset 0 1px 0 var(--glass-highlight)}
.nav .cta{color:var(--heading);background: linear-gradient(180deg, rgba(111,177,255,0.28), rgba(111,177,255,0.12));border:1px solid var(--glass-stroke);box-shadow:0 10px 32px rgba(43,123,233,0.22), inset 0 1px 0 var(--glass-highlight);backdrop-filter: blur(10px) saturate(120%);-webkit-backdrop-filter: blur(10px) saturate(120%)}
.nav.open{display:flex}

/* Theme toggle button - klein en in de rechter hoek */
.theme-toggle{
  position: fixed;
  top: 20px;
  right: 20px;
  background:linear-gradient(180deg, var(--glass-bg-strong), var(--glass-bg));
  border:1px solid var(--glass-stroke);
  border-radius:8px;
  padding:6px;
  width:32px;
  height:32px;
  cursor:pointer;
  transition:all .22s ease;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:500;
  opacity:0.7;
}
.theme-toggle:hover{
  background:var(--glass-bg-strong);
  box-shadow:0 4px 12px var(--glass-shadow);
  opacity:1;
}
.theme-icon{
  width:18px;
  height:18px;
  display:block;
  transition:transform .3s ease;
  color:var(--text);
}
.theme-icon svg{
  width:100%;
  height:100%;
  display:block;
  color:inherit;
}
.theme-icon svg.hidden{
  display:none;
}
.theme-toggle:hover .theme-icon{
  transform:rotate(20deg);
}

.nav-toggle{
  display:none;
  background:linear-gradient(180deg, var(--glass-bg-strong), var(--glass-bg));
  border:1px solid var(--glass-stroke);
  border-radius:8px;
  color:var(--text);
  font-size:20px;
  /* Better tap target */
  min-width:44px;
  min-height:44px;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform 0.22s ease, background 1s ease, color 1s ease, border-color 1s ease, box-shadow 1s ease;
  padding:8px;
  position:relative;
  z-index:60;
  pointer-events:auto;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(0,0,0,0.1);
  opacity:0.7;
}
.nav-toggle:hover{
  background:var(--glass-bg-strong);
  box-shadow:0 4px 12px var(--glass-shadow);
  opacity:1;
}
.nav-toggle:active{
  transform:scale(0.95);
}

/* Hero */
.hero{padding:72px 0 56px;position:relative;min-height:calc(100vh - 76px);display:flex;align-items:center}
.hero-inner{display:grid;grid-template-columns:1fr 420px;gap:36px;align-items:center}
.hero-content h1{margin:0 0 16px;font-size: clamp(28px,4.6vw,44px);line-height:1.02;color:var(--heading)}
.lead{color:var(--subtext);margin-bottom:22px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.support-element{background:linear-gradient(180deg, var(--glass-bg-strong), var(--glass-bg));border:2px solid var(--glass-stroke);border-radius:14px;padding:24px;backdrop-filter: blur(16px) saturate(120%);-webkit-backdrop-filter: blur(16px) saturate(120%);color:var(--heading);text-align:center;box-shadow:0 8px 32px var(--glass-shadow), inset 0 1px 0 var(--glass-highlight)}
.support-element h3{margin:0 0 12px;font-size:18px}
.support-element p{margin:0 0 16px;color:var(--subtext);font-size:14px}
.support-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.windows-icon{width:16px;height:16px;display:inline-block;vertical-align:middle}
/* Only animate transform for buttons, not color/background */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;transition:transform 0.22s ease;
  /* Better touch target */
  min-height:44px;
  /* Prevent text selection on tap */
  -webkit-user-select:none;
  user-select:none;
  /* Smooth touch interactions */
  -webkit-tap-highlight-color:transparent;
}
.btn::before{content:"";position:absolute;inset:-100% auto -100% -100%;width:60%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,0.45),transparent);opacity:0;transition:transform .6s ease, opacity .6s ease}
.btn:hover::before{transform:translateX(360%) rotate(25deg);opacity:.6}
/* Remove color/background transition from .btn-primary */
.btn-primary{color:#ffffff;background:linear-gradient(180deg, #2563eb, #1d4ed8);border:1px solid rgba(255,255,255,0.25);box-shadow:0 8px 20px rgba(37,99,235,0.25), inset 0 1px 0 rgba(255,255,255,0.40);backdrop-filter: blur(10px) saturate(115%);-webkit-backdrop-filter: blur(10px) saturate(115%);transition:box-shadow .22s, transform .22s;}
.btn-primary:hover{background:linear-gradient(180deg, #3b82f6, #2563eb);box-shadow:0 12px 28px rgba(37,99,235,0.35), inset 0 1px 0 rgba(255,255,255,0.45)}
.btn-outline{background:linear-gradient(180deg, var(--glass-bg), var(--glass-bg));border:2px solid var(--glass-stroke);color:var(--text);box-shadow:inset 0 1px 0 var(--glass-highlight);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px)}
/* Ambient orbs in hero */
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none;z-index:0}
.hero::before{width:520px;height:520px;left:-160px;top:-60px;background: radial-gradient(closest-side, rgba(111,177,255,0.16), transparent 70%)}
.hero::after{width:500px;height:500px;right:-140px;top:40px;background: radial-gradient(closest-side, rgba(122,76,255,0.12), transparent 70%);animation: floatOrbs 22s ease-in-out infinite}
@keyframes floatOrbs{0%{transform:translateY(0)}50%{transform:translateY(-16px)}100%{transform:translateY(0)}}

/* Cards with colored border-shadows */
.hero-cards{display:grid;gap:14px;grid-template-columns:1fr;align-self:start}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
  padding:18px;border-radius:14px;color:var(--text);min-height:78px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;border:1px solid var(--glass-stroke);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 16px 40px rgba(2,6,23,0.45), inset 0 1px 0 rgba(255,255,255,0.40);
}
.card::after{content:"";position:absolute;left:-40%;top:-120%;width:60%;height:260%;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);transform: rotate(25deg) translateX(0);transition: transform .8s ease, opacity .8s ease;opacity:0.0;pointer-events:none}
.card > *{position:relative;z-index:1}
.card::after{z-index:0}
.card:hover::after{transform: rotate(25deg) translateX(240%);opacity:.55}
.accent-shadow{box-shadow:0 6px 20px rgba(122,76,255,0.12),0 2px 6px rgba(122,76,255,0.06);border-left:4px solid rgba(122,76,255,0.3)}
.blue-shadow{box-shadow:0 18px 40px rgba(43,123,233,0.12),0 6px 18px rgba(43,123,233,0.06);border-left:4px solid rgba(43,123,233,0.3)}
.purple-shadow{box-shadow:0 12px 30px rgba(106,84,255,0.10),0 4px 12px rgba(106,84,255,0.05);border-left:4px solid rgba(106,84,255,0.3)}

/* Services */
.section{padding:72px 0;overflow:visible}
.services h2{margin:0 0 22px;color:var(--heading)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.service-card ul{list-style:none;padding:0;margin:12px 0}
.service-card li{margin:4px 0;padding-left:16px;position:relative}
.service-card li:before{content:"✓";position:absolute;left:0;color:#6fb1ff;font-weight:bold}
/* Only animate box-shadow/transform for service-card */
.service-card{
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-stroke);
  border-radius: 16px;
  box-shadow: 0 8px 32px var(--glass-shadow);
  transition: box-shadow 0.22s, transform 0.22s;
  position: relative;
  overflow: hidden;
  padding: 24px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.card-content {
  flex-grow: 1;
}
.service-card a.btn, .service-card .small-note {
  margin-top: auto;
}
.service-card:hover {
  background: var(--glass-bg-strong);
  border-color: var(--glass-highlight);
  box-shadow: 0 12px 48px var(--glass-shadow), 0 0 0 1px var(--glass-highlight);
}
.service-card li small{font-size:11px;color:var(--subtext)}
.small-note{font-size:12px;color:var(--subtext);margin-top:12px;line-height:1.4}

/* Horizontal scroll for services on mobile */
@media (max-width:640px){
  .services{
    position:relative;
  }
  .services .grid{
    display:flex;
    align-items:stretch;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-snap-stop:always;
    -webkit-overflow-scrolling:touch;
    gap:20px;
    padding:0 20px 16px 20px;
    /* Hide scrollbar but keep functionality */
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .services .grid::-webkit-scrollbar{
    display:none;
  }
  .services .service-card{
    flex:0 0 calc(100vw - 80px);
    scroll-snap-align:center;
    scroll-snap-stop:always;
    min-width:280px;
    max-width:360px;
    height:auto;
    min-height:450px;
  }
  /* Scroll arrow indicators */
  .scroll-arrows{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:40px;
    margin-top:16px;
    height:48px;
    opacity:1;
    transition:opacity 0.5s ease;
    pointer-events:auto;
  }
  .scroll-arrows.hidden{
    opacity:0;
  }
  .scroll-arrow{
    width:40px;
    height:40px;
    border-radius:50%;
    background:linear-gradient(180deg, rgba(111,177,255,0.28), rgba(111,177,255,0.12));
    border:1px solid rgba(255,255,255,0.14);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--heading);
    font-size:20px;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    cursor:pointer;
    pointer-events:auto;
    transition:all 0.3s ease;
    user-select:none;
  }
  .scroll-arrow:hover{
    background:linear-gradient(180deg, rgba(111,177,255,0.40), rgba(111,177,255,0.24));
    transform:scale(1.1);
  }
  .scroll-arrow:active{
    transform:scale(0.95);
  }

}

/* Hide scroll arrows on desktop */
@media (min-width:641px){
  .scroll-arrows{
    display:none !important;
  }
}

/* About */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.about-image img{width:100%;height:auto;border-radius:14px;box-shadow:0 24px 60px rgba(2,6,23,0.55)}
.placeholder-image{width:100%;height:400px;border-radius:14px;background:linear-gradient(135deg, rgba(111,177,255,0.2), rgba(122,76,255,0.15));box-shadow:0 24px 60px rgba(2,6,23,0.55);display:flex;align-items:center;justify-content:center}
.about-content h2{margin:0 0 20px;color:var(--heading)}
.about-content p{margin-bottom:16px;line-height:1.7;color:var(--subtext)}
.check-list{list-style:none;padding:0;margin:24px 0 0}
.check-list li{padding:10px 0;color:var(--text);font-weight:500}

/* Expertise */
.section-title-center{text-align:center;margin:0 0 120px;color:var(--heading);font-size:clamp(28px,3.5vw,38px)}
.section-subtitle{text-align:center;color:var(--subtext);margin:0 0 48px;font-size:18px}
/* Expertise */
.section-title-center{text-align:center;margin:0 0 120px;color:var(--heading);font-size:clamp(28px,3.5vw,38px)}
.section-subtitle{text-align:center;color:var(--subtext);margin:0 0 48px;font-size:18px}
.expertise{overflow:visible}
.expertise-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:24px;overflow:visible}
/* Only animate box-shadow/transform for expertise-item */
.expertise-item{text-align:center;padding:28px 20px;background:var(--glass-bg);border:2px solid var(--glass-stroke);border-radius:14px;transition:box-shadow 0.22s, transform 0.22s;backdrop-filter: blur(10px);position:relative;overflow:visible;z-index:1}
.expertise-item:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(43,123,233,0.15)}
.expertise-icon{font-size:48px;margin-bottom:16px}
.expertise-item h4{margin:0 0 12px;color:var(--heading)}
.expertise-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(-8px);background:var(--glass-bg-strong);backdrop-filter:blur(80px) saturate(200%) brightness(1.1);-webkit-backdrop-filter:blur(80px) saturate(200%) brightness(1.1);border:none;border-radius:14px;padding:14px 20px;color:var(--heading);font-size:13px;font-weight:500;line-height:1.5;opacity:0;pointer-events:none;transition:opacity .3s ease, transform .3s ease;box-shadow:0 12px 40px var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);z-index:200;isolation:isolate;max-width:520px;white-space:nowrap}
.expertise-tooltip::before{content:"";position:absolute;inset:-20px;backdrop-filter:blur(80px);-webkit-backdrop-filter:blur(80px);z-index:-1;border-radius:inherit}
.expertise-tooltip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:8px solid transparent;border-top-color:var(--glass-bg-strong);z-index:101}
.expertise-item:hover .expertise-tooltip{opacity:1;transform:translateX(-50%) translateY(-12px);pointer-events:auto}
.expertise-item.active .expertise-tooltip{opacity:1;transform:translateX(-50%) translateY(-12px);pointer-events:auto;display:block}
.expertise-item:hover,
.expertise-item.active{z-index:100}
/* Touch support for mobile */
@media (hover: none) {
  .expertise-item{
    cursor:pointer;
  }
  .expertise-tooltip{
    white-space:normal;
    text-align:center;
    max-width:calc(100vw - 80px);
    min-width:250px;
  }
}
.expertise-text{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:48px}
.expertise-text h3{margin-bottom:16px;color:var(--heading)}
.expertise-text p{color:var(--subtext);line-height:1.6;max-width:920px;padding:0 12px;text-align:center}

/* Cases */
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.case-card{background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));border:1px solid rgba(255,255,255,0.14);border-radius:14px;overflow:hidden;transition:transform .22s, box-shadow .22s;backdrop-filter: blur(12px)}
.case-card:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(2,6,23,0.5)}
.case-image{width:100%;height:240px;overflow:hidden}
.case-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.case-card:hover .case-image img{transform:scale(1.08)}
.case-content{padding:24px}
.case-tag{display:inline-block;padding:6px 12px;background:rgba(111,177,255,0.22);border:1px solid rgba(111,177,255,0.35);border-radius:20px;font-size:12px;font-weight:600;color:var(--heading);margin-bottom:12px}
.case-content h3{margin:0 0 12px;color:var(--heading);font-size:20px}
.case-content p{color:var(--subtext);margin-bottom:16px;line-height:1.6}
.case-link{color:var(--heading);text-decoration:none;font-weight:600;transition:color 1s ease, opacity .2s}
.case-link:hover{color:var(--heading)}

/* Testimonials */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testimonial-card{background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));border:1px solid rgba(255,255,255,0.14);border-radius:14px;padding:28px;backdrop-filter: blur(12px)}
.testimonial-text{font-style:italic;color:var(--text);line-height:1.7;margin:0 0 20px;font-size:15px}
.testimonial-author{border-top:1px solid rgba(255,255,255,0.10);padding-top:16px}
.testimonial-author strong{display:block;color:var(--heading);margin-bottom:4px}
.testimonial-author span{color:var(--subtext);font-size:14px}

/* Contact additions */
.contact-info h4{color:var(--heading);margin:28px 0 12px;font-size:18px}
.contact-info strong{color:var(--heading)}
.contact-hours{margin-top:28px;padding:20px;background:rgba(111,177,255,0.08);border:1px solid rgba(111,177,255,0.18);border-radius:12px}
.contact-hours h4{margin:0 0 8px}
.contact-hours p{margin:0;line-height:1.8}
.contact-note{font-size:14px;opacity:0.75;font-style:italic;margin-top:8px !important;color:var(--subtext)}

/* Contact */
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.contact-form{display:flex;flex-direction:column;gap:12px;background:transparent}
.contact-form label{display:flex;flex-direction:column;font-weight:600;color:#b8c7e6}
.contact-form input, .contact-form textarea{margin-top:8px;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.14);background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));color:var(--text);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.30)}
.contact-form input:focus, .contact-form textarea:focus{outline:none;border-color:rgba(111,177,255,0.45);box-shadow:0 0 0 3px rgba(111,177,255,0.14), inset 0 1px 0 rgba(255,255,255,0.40)}
.contact-info ul{list-style:none;padding:0;margin:12px 0}
.contact-info a{color:var(--heading);text-decoration:none;transition:opacity .2s, color 1s ease}
.contact-info a:hover{opacity:0.8}
.contact-info a:visited{color:var(--heading);transition:color 1s ease}
.contact-logo{text-align:center}
.logo-large{height:200px;width:auto;max-width:100%;filter:var(--logo-large-glow)}

/* Footer */
.site-footer{padding:22px 0;border-top:1px solid rgba(255,255,255,0.08);color:var(--subtext);backdrop-filter: blur(4px)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:16px}

/* Responsive */
@media (max-width:980px){
  .hero-inner, .contact-inner{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
  .about-image{order:2}
  .expertise-grid{grid-template-columns:repeat(2,1fr)}
  .cases-grid{grid-template-columns:repeat(2,1fr)}
  .testimonials-grid{grid-template-columns:1fr}
  .nav{display:flex}
  .nav-toggle{display:block}
  .hero-cards{grid-template-columns:1fr}
  .hero{padding:60px 0 80px}
  .container{width:calc(100% - 32px);padding:32px 0;max-width:100%}
  .section{padding:60px 0}
  .contact-inner{gap:32px}
  .contact-logo{display:none} /* Hide logo on mobile */
  .support-element{margin-top:24px}
  .header-inner{padding:16px 0;align-items:center;display:flex;flex-wrap:nowrap}
  .brand{order:1;flex:0 0 auto}
  .theme-toggle{
    order:2;
    position:static !important;
    top:auto !important;
    right:auto !important;
    margin-right:0px;
    margin-left:auto;
    min-width:44px;
    min-height:44px;
    width:44px;
    height:44px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:500;
  }
  .theme-icon{width:20px;height:20px}
  .nav-toggle{order:3;margin-left:0;flex:0 0 auto}
}
@media (max-width:640px){
  .services .container{
    width:100%;
    max-width:100%;
    padding-left:0;
    padding-right:0;
  }
  .services h2{
    padding:0 20px;
  }
  .grid{grid-template-columns:1fr}
  .expertise-grid{grid-template-columns:1fr}
  .expertise .container{
    width:100%;
    max-width:100%;
    padding-left:0;
    padding-right:0;
    overflow:visible;
    padding-top:80px;
  }
  .expertise h2{
    padding:0 20px;
  }
  .expertise-grid{
    display:flex;
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:20px;
    padding:120px 20px 16px 20px;
    margin-top:-40px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .expertise-grid::-webkit-scrollbar{
    display:none;
  }
  .expertise-item{
    flex:0 0 calc(100vw - 80px);
    max-width:360px;
    min-width:280px;
    scroll-snap-align:center;
    gap:20px;
    padding:0 20px 16px 20px;
    /* Hide scrollbar but keep functionality */
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .expertise-grid::-webkit-scrollbar{
    display:none;
  }
  .expertise-item{
    flex:0 0 calc(100vw - 80px);
    scroll-snap-align:center;
    scroll-snap-stop:always;
    min-width:250px;
    max-width:320px;
  }
  .cases-grid{grid-template-columns:1fr}
  .brand-name{display:none}
  .logo{height:38px}
  .hero{padding:40px 0 60px;min-height:auto}
  .container{width:calc(100% - 24px);padding:24px 0;max-width:100%}
  .section{padding:48px 0}
  .hero-content h1{font-size:clamp(24px,7vw,32px);margin-bottom:12px}
  .lead{font-size:15px;margin-bottom:20px}
  .hero-actions{flex-direction:column;width:100%}
  .btn{width:100%;justify-content:center;padding:14px 20px;font-size:15px}
  .service-card, .card, .case-card, .testimonial-card, .expertise-item{padding:20px}
  .footer-inner{flex-direction:column;text-align:center;gap:8px}
  .section-title-center{font-size:clamp(24px,6vw,32px)}
  .section-subtitle{font-size:16px;margin-bottom:32px}
  .case-image{height:200px}
  .contact-form{order:2}
  .contact-info{order:1}
  /* Override grid for services section - it uses horizontal scroll */
  .services .grid{grid-template-columns:auto}
  .theme-toggle{
    min-width:44px;
    min-height:44px;
    width:44px;
    height:44px;
    padding:0;
  }
  .theme-icon{width:20px;height:20px}
}
/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation: none !important; transition: none !important}
}

/* Canvas container for the 3D logo overlaying the hero */
.hero{ position: relative; }
#logo3d-container { 
  position: absolute; 
  left: 50%;
  bottom: -24px; /* tuck into lower part */
  transform: translateX(-50%);
  width: min(1200px, 100%);
  height: 48vh; 
  max-height: 520px; 
  pointer-events: none; 
  z-index: 0;
}
#logo3d-container canvas { display: block; }
.hero-inner{ position: relative; z-index: 1; }

/* Mobile navigation menu */
@media (max-width: 980px) {
  .header-inner{
    position:relative;
  }
  .nav {
    position: fixed;
    top: 76px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 400px;
    flex-direction: column;
    background: var(--bg-primary);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-stroke);
    border-radius: 12px;
    padding: 20px;
    gap: 12px;
    box-shadow: 0 8px 32px var(--glass-shadow);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease, background 1s ease, border-color 1s ease, box-shadow 1s ease;
    z-index:45;
  }
  .nav.open {
    display: flex;
    max-height: 400px;
    opacity: 1;
    padding: 20px;
  }
  .nav a {
    width: 100%;
    text-align: center;
    padding: 14px 12px;
    font-size: 16px;
  }
  #logo3d-container {
    height: 35vh;
    max-height: 320px;
    bottom: -12px;
  }
}

@media (max-width: 640px) {
  #logo3d-container {
    height: 28vh;
    max-height: 240px;
    bottom: 0;
  }
}

/* Ensure expertise paragraph fits on small screens when centered */
@media (max-width:640px){
  .expertise-text{padding:0 12px}
  .expertise-text p{max-width:100%;}
}