/* ═══════════════════════════════════════════════
   KONZEPT — Main Stylesheet
════════════════════════════════════════════════ */

/* ── Base ── */
html {
  -webkit-font-smoothing: antialiased;
}
body {
  font-family: 'Manrope', "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.01em;
}
a, button {
  cursor: pointer;
}

/* ── Header ── */
#siteHeader {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20000;
  background: transparent;
  transition: background 0.3s ease, color 0.3s ease;
}
#siteHeader.scrolled {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
}
#navLinks a {
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  position: relative;
}
#navLinks a::after {
  content: '';
  display: block;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
#navLinks a:hover::after {
  transform: scaleX(1);
}
#siteHeader .nav-link {
  color: #ffffff;
}
#siteHeader.scrolled .nav-link,
.page-inner #siteHeader .nav-link {
  color: #636363;
}
.page-inner #siteHeader {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(8px);
}
.page-inner #siteLogo {
  filter: brightness(0) saturate(0) !important;
}
#siteHeader .ecom-btn {
  background: #000000;
  color: #ffffff;
  border: 1px solid #000000;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
#siteHeader .ecom-btn:hover {
  background: #D4EDAF;
  color: #636363;
  border-color: #D4EDAF;
}

/* ── Mobile menu toggle ── */
#menuBtn {
  display: none;
  position: relative;
  z-index: 20001;
  background: transparent;
  border: none;
  padding: 6px;
  color: currentColor;
}
#menuBtn.lg-hidden { display: none; }
#menuBtn[aria-expanded="true"] { color: #636363; }
#mobileMenu {
  display: none;
  position: fixed;
  inset: 0;
  background: #ffffff;
  color: #636363;
  z-index: 19999;
  flex-direction: column;
  padding: 28px 24px;
}
#mobileMenu.open {
  display: flex;
}
#mobileMenu a {
  font-size: 22px;
  font-weight: 500;
  padding: 10px 0;
  text-decoration: none;
  color: #636363;
  border-bottom: 1px solid rgba(99,99,99,0.08);
}
#mobileMenu a:first-of-type {
  margin-top: 50px;
}
#mobileMenu .mobile-lang {
  margin-top: auto;
  display: flex;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
}
#mobileMenu .mobile-lang a {
  font-size: 14px;
  padding: 8px 14px;
  border: 1px solid rgba(99,99,99,0.2);
  border-radius: 60px;
}
#mobileMenu .mobile-lang a.active {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}

@media (max-width: 1024px) {
  #navLinks .nav-link,
  #navLinks .lang-switch,
  #navLinks .ecom-btn {
    display: none !important;
  }
  #menuBtn { display: inline-flex; }
  #siteHeader > div { padding: 20px 24px !important; }
  #siteHeader .nav-link[href="cart.html"] { display: inline-flex !important; }
}
@media (max-width: 480px) {
  #siteHeader #siteLogo { width: 120px; height: auto; }
}

/* ── Language selector ── */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 60px;
  border: 1px solid rgba(255,255,255,0.35);
  font-size: 12px;
  font-weight: 500;
  color: #ffffff;
}
#siteHeader.scrolled .lang-switch,
.page-inner #siteHeader .lang-switch {
  border-color: rgba(99,99,99,0.25);
  color: #636363;
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 9px;
  border-radius: 60px;
  text-decoration: none;
  color: currentColor;
  opacity: 0.65;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.lang-switch a::after { display: none !important; }
.lang-switch a:hover { opacity: 1; }
.lang-switch a.active {
  background: #ffffff;
  color: #636363;
  opacity: 1;
}
#siteHeader.scrolled .lang-switch a.active,
.page-inner #siteHeader .lang-switch a.active {
  background: #000000;
  color: #ffffff;
}
#siteHeader.scrolled .ecom-btn {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}
#siteHeader.scrolled .ecom-btn:hover {
  background: #D4EDAF;
  color: #636363;
  border-color: #D4EDAF;
}

/* ── Global button policy: black → green ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 40px;
  border-radius: 60px;
  background: #000000;
  color: #ffffff;
  border: 1px solid #000000;
  font-family: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-primary:hover {
  background: #D4EDAF;
  color: #636363;
  border-color: #D4EDAF;
}
.btn-primary:active { transform: scale(0.97); }

/* btn-primary on a green background: hover → white */
.cta-green .btn-primary {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}
.cta-green .btn-primary:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 40px;
  border-radius: 60px;
  background: transparent;
  color: #636363;
  border: 1px solid rgba(99,99,99,0.35);
  font-family: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn-secondary:hover {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}
.btn-secondary:active { transform: scale(0.97); }

/* ── Form input / button touch sizing ── */
@media (max-width: 640px) {
  .form-input, .contact-input, .contact-textarea {
    min-height: 48px;
    font-size: 16px !important; /* prevent iOS zoom on focus */
  }
  .btn-primary, .btn-secondary {
    min-height: 48px;
    padding: 0 28px;
  }
  .filter-btn {
    height: 36px !important;
    padding: 0 16px !important;
    font-size: 12px !important;
  }
}

/* ── Filter buttons ── */
.filter-btn {
  background: transparent;
  color: #636363;
  border: 1px solid rgba(99,99,99,0.3);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
  font-family: inherit;
}
.filter-btn:hover {
  border-color: #636363;
  background: transparent;
  color: #636363;
}
.filter-btn.active-filter {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}
.filter-btn.active-filter:hover {
  background: #D4EDAF;
  color: #636363;
  border-color: #D4EDAF;
}

/* ── Hero slides ── */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1s cubic-bezier(.4,0,.2,1), transform 1s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.slide.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* ── Hero text mask-reveal ── */
.mask-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: inherit;
}
.mask-inner {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(.16,1,.3,1), opacity 0.5s ease;
  transition-delay: var(--d, 0ms);
}
.mask-inner.in {
  transform: translateY(0);
  opacity: 1;
}
.mask-inner.out {
  transform: translateY(-110%);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(.4,0,1,1), opacity 0.3s ease;
  transition-delay: var(--d, 0ms);
}

/* ── Responsive utilities ── */
@media (max-width: 1024px) {
  .hero-bottom-grid { flex-direction: column; }
  .hero-col-left, .hero-col-right {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ── Mobile responsive helpers ── */
@media (max-width: 768px) {
  .py-\[90px\], .py-\[80px\] { padding-top: 60px !important; padding-bottom: 60px !important; }
  .py-\[120px\] { padding-top: 80px !important; padding-bottom: 80px !important; }
  .pt-\[90px\] { padding-top: 60px !important; }
  .pb-\[100px\] { padding-bottom: 70px !important; }
  .mb-\[60px\] { margin-bottom: 40px !important; }
  .mb-\[80px\] { margin-bottom: 50px !important; }
  .mb-\[100px\] { margin-bottom: 70px !important; }
  .gap-16 { gap: 2rem !important; }
  .gap-12 { gap: 1.75rem !important; }
  .hero-col-left { display: none; }
  #heroTitle { font-size: 2.5rem !important; }
  #heroCaption { font-size: 1.25rem !important; }
  .pt-\[140px\] { padding-top: 90px !important; }
  .pt-\[160px\], .pt-\[120px\] { padding-top: 90px !important; }
  .pb-\[120px\] { padding-bottom: 80px !important; }
  .pb-\[140px\] { padding-bottom: 90px !important; }
}

/* Make page hero overlays and index CTA fully visible on small screens; adjust absolutely positioned back links */
@media (max-width: 640px) {
  section[style*="height:60vh"] { min-height: 340px !important; height: 55vh !important; }
  section[style*="height:70vh"] { min-height: 380px !important; height: 60vh !important; }
  section[style*="height:50vh"] { min-height: 320px !important; height: 50vh !important; }
  section[style*="height:90vh"] { min-height: 420px !important; height: 75vh !important; }
  section.h-screen, section[style*="height:100vh"] { min-height: 600px !important; height: 90vh !important; }
}

/* ── Hero layout ── */
.hero-bottom-grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: -16px;
  width: calc(100% + 16px);
  margin-top: -16px;
}
.hero-col-left {
  flex: 0 0 25%;
  max-width: 25%;
  padding-left: 16px;
  padding-top: 16px;
}
.hero-col-right {
  flex: 0 0 75%;
  max-width: 75%;
  padding-left: 16px;
  padding-top: 16px;
}
.hero-grad-bottom {
  background: linear-gradient(to top, rgba(37,35,36,0.65) 0%, rgba(37,35,36,0) 100%);
}
#heroIndicatorText {
  transition: opacity .4s ease;
}
#heroBtnInner {
  transition: opacity .4s ease;
}

/* ── Scroll-reveal ── */
.sr {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);
}
.sr.visible {
  opacity: 1;
  transform: translateY(0);
}
.sr-d1 { transition-delay: 0.1s; }
.sr-d2 { transition-delay: 0.2s; }
.sr-d3 { transition-delay: 0.3s; }

/* ── Parallax ── */
.parallax-wrap {
  overflow: hidden;
}
.parallax-img {
  will-change: transform;
  transition: transform 0.8s cubic-bezier(.16,1,.3,1), filter 0.6s ease;
}
.slide .parallax-img {
  transition: none;
}

/* ── Hover brightness on all parallax image cards ── */

/* Solutions cards */
a.parallax-wrap:hover .parallax-img {
  filter: brightness(1.08);
}

/* Technology cards — parent is .group div, grandparent is div.group */
.group:hover .parallax-wrap .parallax-img,
.group:hover > .parallax-wrap .parallax-img {
  filter: brightness(1.06);
}

/* Blog small cards */
.group:hover .parallax-img {
  filter: brightness(1.05);
}

/* ── Blog card hover ── */
.blog-card {
  transition: transform 0.45s cubic-bezier(.16,1,.3,1);
}
.blog-card:hover {
  transform: translateY(-4px);
}
.blog-card .blog-img {
  overflow: hidden;
}
.blog-card .blog-img .parallax-img {
  transition: transform 0.65s cubic-bezier(.16,1,.3,1), filter 0.4s ease;
}
.blog-card:hover .blog-img .parallax-img {
  filter: brightness(1.06);
}
.blog-card:hover .blog-read {
  opacity: 0.5;
}
.blog-card .blog-read {
  transition: opacity 0.3s ease;
}

/* ── Project card hover ── */
.proj-card {
  transition: transform 0.45s cubic-bezier(.16,1,.3,1);
}
.proj-card:hover {
  transform: translateY(-4px);
}
.proj-card .proj-img {
  overflow: hidden;
}
.proj-card .proj-img img {
  transition: transform 0.65s cubic-bezier(.16,1,.3,1), filter 0.4s ease;
}
.proj-card:hover .proj-img img {
  transform: scale(1.06);
  filter: brightness(1.04);
}
.proj-card .proj-arrow {
  opacity: 0.3;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.16,1,.3,1);
}
.proj-card:hover .proj-arrow {
  opacity: 0.9;
  transform: translateX(5px);
}
.proj-card .proj-tag {
  transition: background 0.3s ease;
}
.proj-card:hover .proj-tag {
  background: #c5e49a;
}

/* ── Blog card hover ── */
.blog-card-img img {
  transition: transform 0.65s cubic-bezier(.16,1,.3,1);
}
a:hover .blog-card-img img {
  transform: scale(1.06);
}

/* ── Button press ── */
a[class*="rounded-[60px]"],
button[class*="rounded-[60px]"] {
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
a[class*="rounded-[60px]"]:hover,
button[class*="rounded-[60px]"]:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}
a[class*="rounded-[60px]"]:active,
button[class*="rounded-[60px]"]:active {
  transform: scale(0.97);
}