:root{
  --turquoise:#00bcd4;
  --turquoise-dark:#008f9f;
}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease, transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}

/* Hero subtle fade */
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero-copy h1,.hero-copy .lead,.hero-copy .btn{opacity:0;transform:translateY(8px);animation:fadeInUp .7s ease .28s forwards}

/* Card hover */
.card{transition:transform .28s ease, box-shadow .28s ease}
.card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 16px 36px rgba(3,50,53,0.09)}

/* Mobile nav toggle */
.nav-toggle{display:none;flex-direction:column;gap:6px;border:0;background:transparent;padding:6px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--turquoise-dark);border-radius:2px;transition:transform .25s ease, opacity .2s}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* responsive nav behaviour */
@media(max-width:800px){
  .nav-toggle{display:flex}
  .main-nav{position:absolute;left:0;right:0;top:72px;background:linear-gradient(180deg,#ffffff,#f8ffff);padding:14px;border-top:1px solid #eef6f7;display:flex;flex-direction:column;gap:8px;align-items:flex-start;transform-origin:top;transform:scaleY(0);opacity:0;transition:transform .25s ease, opacity .25s ease}
  .main-nav.open{transform:scaleY(1);opacity:1}
  .call{display:none}
}

/* smooth anchor scrolling */
html{scroll-behavior:smooth}

/* Intro overlay styles */
#intro-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(240,255,255,0.94));z-index:9999;transition:opacity .6s ease, visibility .6s;}
#intro-overlay[aria-hidden="true"]{opacity:0;visibility:hidden}
.intro-wrap{display:flex;align-items:center;gap:18px}
.intro-ring{width:88px;height:88px;border-radius:50%;border:4px solid var(--turquoise);box-shadow:0 8px 30px rgba(0,188,212,0.12);animation:ringScale 1.2s ease forwards}
.intro-logo{font-weight:800;color:var(--turquoise-dark);font-size:34px;letter-spacing:1px;opacity:0;transform:translateY(8px);animation:logoIn .9s cubic-bezier(.2,.9,.3,1) .38s forwards}
.intro-logo .gmbh{font-weight:600;font-size:14px;color:#0b3336}
@keyframes ringScale{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
@keyframes logoIn{to{opacity:1;transform:none}}

/* Parallax helper (will be moved by JS) */
.parallax{will-change:transform}

/* subtle floating decorative shapes (optional) */
.decorative{position:absolute;pointer-events:none;opacity:.12}

/* Header animations */
.logo-img{height:52px;transition:transform .5s cubic-bezier(.2,.9,.3,1)}
.logo-animate{transform:translateY(-6px) scale(1.02)}
.main-nav a span{display:inline-block;position:relative;transition:transform .28s cubic-bezier(.2,.9,.3,1), color .18s}
.main-nav a:hover span{transform:translateY(-4px);color:var(--turquoise-dark)}
.main-nav a span::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--turquoise);bottom:-6px;transform:scaleX(0);transform-origin:left;transition:transform .28s}
.main-nav a:hover span::after{transform:scaleX(1)}

/* Header glass + entrance */
.site-header{backdrop-filter: blur(6px);background:rgba(255,255,255,0.6);box-shadow:0 6px 18px rgba(3,50,53,0.04);transform:translateY(-8px);opacity:0;transition:transform .6s cubic-bezier(.2,.9,.3,1), opacity .6s}
.site-header.is-visible{transform:none;opacity:1}

/* Hero tweaks */
.hero-company{font-weight:700;color:var(--muted);font-size:13px;letter-spacing:1px;margin-bottom:8px}
.hero-tagline{font-size:42px;line-height:1.03;margin:0 0 10px;color:#02373a}
.hero-tagline{position:relative;overflow:hidden}
.hero-tagline .tagline-text{display:block;transition:opacity .6s ease, transform .6s ease}
.hero-tagline .tagline-text.is-hidden{opacity:0;transform:translateY(8px)}
.btn{position:relative;overflow:hidden}

/* Button styles: primary gradient + subtle animated sheen */
.btn.primary{background:linear-gradient(90deg,var(--turquoise) 0%, #05aebf 100%);color:#fff;border-radius:10px;padding:12px 18px;box-shadow:0 8px 20px rgba(0,188,212,0.12);transition:transform .22s ease, box-shadow .22s}
.btn.primary::after{content:"";position:absolute;left:-40%;top:0;width:40%;height:100%;background:linear-gradient(120deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02));transform:skewX(-18deg) translateX(0);transition:transform .9s ease;opacity:0.9}
.btn.primary:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(3,50,53,0.12)}
.btn.primary:hover::after{transform:skewX(-18deg) translateX(220%)}

/* Outline button */
.btn.outline{background:transparent;border:1px solid rgba(3,50,53,0.06);color:#02373a;padding:10px 16px;border-radius:10px;margin-left:10px;transition:background .2s, transform .18s}
.btn.outline:hover{background:rgba(0,188,212,0.05);transform:translateY(-4px)}

/* Service card micro-interaction */
.service-card:hover .icon{transform:translateY(-6px) rotate(-6deg)}
.service-card .icon img{transition:transform .36s cubic-bezier(.2,.9,.3,1)}

/* Services styling */
.service-grid{margin-top:18px}
.service-card{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.service-card .icon{width:64px;height:64px}
.service-features{list-style:disc;margin:8px 0 0 18px;padding:0;color:var(--muted)}

/* About styling */
.about-grid{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center}
.about-media img{width:100%;border-radius:10px;box-shadow:0 12px 30px rgba(3,50,53,0.06)}

/* Contact form layout */
.contact-pro{grid-template-columns:370px 1fr}
.contact-details p{margin:6px 0;color:var(--muted)}
.contact-right .contact-form{background:#fff;padding:14px;border-radius:10px;border:1px solid #eef6f7}
.contact-right .form-row{display:flex;gap:12px}
.contact-right label{display:block;margin-bottom:8px}
.contact-right input,.contact-right textarea{width:100%;padding:8px;border:1px solid #e0f4f6;border-radius:6px}
.map-wrap{margin-top:12px;border-radius:12px;overflow:hidden;border:1px solid rgba(3,50,53,0.06);box-shadow:0 10px 30px rgba(3,50,53,0.06)}
/* smaller map like Apple style */
.map-wrap iframe{height:160px}

/* Apple-like map card tweaks */
.map-apple{background:linear-gradient(180deg,#ffffff,#f7ffff);padding:10px;border-radius:14px;border:1px solid rgba(3,50,53,0.04);box-shadow:0 8px 24px rgba(3,50,53,0.05)}
.map-apple iframe{border-radius:10px;display:block}
.map-apple .map-caption{font-size:12px;color:var(--muted);margin-top:8px}

/* Contact-specific map adjustments */
.contact-map{margin-top:18px;max-width:420px}
.contact-map img{border-radius:10px;display:block}

/* Leaflet map container style (Apple-like minimal) */
#contact-map{border-radius:10px;background:linear-gradient(180deg,#fbffff,#f7ffff);box-shadow:0 8px 24px rgba(3,50,53,0.05);border:1px solid rgba(3,50,53,0.04)}
#contact-map .leaflet-control-container{display:none}

/* Apple-like marker styling and animation */
.leaflet-marker-icon.apple-pin{transition:transform .38s cubic-bezier(.2,.9,.3,1);transform-origin:center bottom}
.leaflet-marker-icon.apple-pin.bounce{animation:bounceIn .7s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes bounceIn{0%{transform:translateY(-36px) scale(.96)}60%{transform:translateY(6px) scale(1.02)}100%{transform:none}}

/* Popup style more like minimal Apple tooltip */
.leaflet-popup-content-wrapper{border-radius:12px;padding:10px 12px;background:linear-gradient(180deg,#ffffff,#f7ffff);box-shadow:0 12px 30px rgba(3,50,53,0.09);border:1px solid rgba(3,50,53,0.06)}
.leaflet-popup-content{color:#02373a;font-weight:600}
.leaflet-popup-tip{display:none}

/* smaller, subtle attribution text if appears */
.leaflet-control-attribution{opacity:0.6;font-size:11px}

/* Current-location (Apple-like) */
.current-loc-icon{width:36px;height:36px;display:block;position:relative}
.current-loc-icon .dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid #00bcd4;box-shadow:0 4px 18px rgba(0,188,212,0.18)}
.current-loc-icon .pulse{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:rgba(0,188,212,0.18);animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{transform:translate(-50%,-50%) scale(0.9);opacity:0.9}70%{transform:translate(-50%,-50%) scale(2.6);opacity:0}100%{opacity:0}}

/* Slightly hide default Leaflet attribution on small cards */
@media (max-width:900px){.leaflet-control-attribution{display:none}}

/* Button ripple effect */
.btn{position:relative;overflow:hidden}
.btn .ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,0.6);animation:ripple .6s linear;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* Tagline small responsive tweak */
@media(max-width:900px){.hero-tagline{font-size:28px}}

@media(max-width:900px){.about-grid{grid-template-columns:1fr}.contact-pro{grid-template-columns:1fr}}

/* Logo Marquee Animation */
.logo-marquee{overflow:hidden;width:100%;position:relative;padding:20px 0}
.logo-track{display:flex;gap:60px;animation:scroll 19200s linear infinite;width:max-content}
.logo-item{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:200px}
.logo-name{font-size:16px;color:var(--muted);font-weight:500;text-align:center;white-space:nowrap}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}