:root{
  --brand:#dc2626;       /* red-600 */
  --brand-700:#b91c1c;   /* red-700 */
  --ink:#0f172a;         /* slate-900 */
  --muted:#475569;       /* slate-600 */
  --ring:rgba(2,6,23,.10);
  --card:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  /* Use a dynamic tech‑themed wallpaper behind a translucent overlay.
     The bottom layer loads an abstract network image (tech_bg.png) to tie in
     with our technology services. The top layer is a mostly opaque white
     gradient overlay to ensure text and components remain readable against
     the busier artwork. */
  background:
    linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)),
    url('tech_bg.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 1rem}
.hstack{display:flex;align-items:center;gap:.75rem}
.vstack{display:flex;flex-direction:column;gap:.75rem}
.grid{display:grid;gap:1rem}
.section{padding:3.5rem 0}
.card{background:var(--card);border:1px solid var(--ring);border-radius:16px;box-shadow:0 2px 6px rgba(2,6,23,.04)}
.badge{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;border-radius:999px;border:1px solid var(--ring);padding:.35rem .6rem;background:#fff}
.badge svg{height:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:.7rem 1rem;border:1px solid var(--ring);font-weight:600}
.btn.primary{background:var(--brand);color:#fff;border-color:transparent}
.btn.primary:hover{filter:brightness(.95)}
.btn.ghost:hover{background:#f8fafc}
.hero-title{font-weight:800;line-height:1.08}
.hero-title .accent{color:var(--brand)}
.subtle{color:var(--muted)}

/* HEADER */
.header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(255,255,255,.7);
  border-bottom:1px solid var(--ring);
}
.header.scrolled{box-shadow:0 8px 24px rgba(2,6,23,.06)}
.brand{display:flex;align-items:center;gap:.6rem}
.brand img{height:40px;width:auto;border-radius:12px;box-shadow:0 6px 14px rgba(220,38,38,.25)}
.nav a{position:relative;display:inline-flex;align-items:center;height:40px;padding:0 .35rem}
.nav a:after{content:"";position:absolute;left:10%;right:10%;bottom:6px;height:2px;background:var(--brand);transform:scaleX(0);transform-origin:50% 50%;transition:transform .2s ease}
.nav a:hover:after{transform:scaleX(1)}
#menuBtn{display:none}

/* Hide mobile nav by default, show only in small screens */
.mnav{
  /* Initially hide mobile nav via the hidden class; explicit display none ensures it's off for larger screens */
  display:none;
}

/* Utility class to hide elements (used for mobile nav) */
.hidden{
  display:none !important;
}

/* Hide the Web & Mobile Development service card on the services page */
#dev {
  display: none !important;
}

/* Style the service icon cards in the hero */
.icon-card span{
  margin-top:.3rem;
  font-size:.75rem;
  color:var(--muted);
}

/* Description text inside service icon cards */
.icon-card small{
  margin-top:.1rem;
  font-size:.6rem;
  color:var(--muted);
}

/* Hide the Web & Mobile Development service card */
#dev{
  display: none !important;
}

/* FOOTER */
.footer{border-top:1px solid var(--ring);background:#fff}
.footer .logo{height:42px;border-radius:12px;box-shadow:0 6px 14px rgba(220,38,38,.25)}

.logo-row img:hover{
  opacity:1;
  transform:translateY(-2px) scale(1.05);
}

/* Clients Marquee */
@keyframes marquee-left{ to{ transform: translateX(-50%);} }100%{transform:translateX(-50%)}}
.marquee{animation:marquee 18s linear infinite;white-space:nowrap}

/* Form */
input[type=text], input[type=email], textarea{
  font:inherit;
  border-radius:12px;
  border: 1px solid var(--border);
  padding:.7rem .9rem;
  background: var(--elev);
  width:100%;
  /* Smooth transitions on focus to enhance elegance */
  transition:border-color .2s ease, box-shadow .2s ease;
}
textarea{resize:vertical}
.hp{position:absolute;left:-5000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Improve form field focus styling for better user experience */
input[type=text]:focus, input[type=email]:focus, textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(220,38,38,.1);
  outline:none;
}

/* Responsive Layouts */
@media (max-width: 1000px){
  .container{max-width:920px}
}
@media (max-width: 860px){
  .container{max-width:740px}
  .grid.stats{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width: 768px){
  #menuBtn{display:inline-flex}
  .nav{display:none}
  .mnav{display:block;border-top:1px solid var(--ring);background:#fff}
  .mnav a{display:block;padding:.8rem 0}
  .hero-split{grid-template-columns:1fr !important}
}
@media (max-width: 520px){
  .container{padding:0 .8rem}
  .hero-title{font-size:clamp(1.8rem,9vw,2.8rem) !important}
}

/* Phase 2: polished contact form */
#contact form input,
#contact form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  margin-bottom: 0.75rem;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#contact form input:focus,
#contact form textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
}
#contact form button {
  align-self: flex-start;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
}

/* PHASE 2: ultra-small devices */
@media (max-width: 375px) {
  .section { padding: 1.25rem 1rem; }
  .hero-title { line-height: 1.15; }
  .grid { gap: .75rem; }
  .card { padding: 1rem; }
  /* Contact row harmony */
  #contact .grid > * { min-height: 280px; }
}

/* PHASE 2: client slider essentials */
.client-slider { overflow: hidden; }
.client-slider .slide-track {
  display: flex;
  gap: 2.5rem;
  will-change: transform;
  animation: scroll 20s linear infinite;
}
.client-slider img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
  flex: 0 0 auto; /* prevent shrink so track stays wider than viewport */
}
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Form placeholder color (theme-aware) */
#contact form input::placeholder,
#contact form textarea::placeholder { color: var(--muted); }

/* Focus ring uses theme variables */
#contact form input:focus,
#contact form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 28%, transparent);
}



/* === Contact section UX: brand-red focus ring (scoped to #contact) === */
#contact form input:focus,
#contact form select:focus,
#contact form textarea:focus{
  border-color: var(--brand) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 30%, transparent) !important;
}

:root[data-theme="dark"] #contact form input:focus,
:root[data-theme="dark"] #contact form select:focus,
:root[data-theme="dark"] #contact form textarea:focus{
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 38%, transparent) !important;
}



/* === Process section (4 steps) alignment === */
#process .grid{
  align-items: stretch;
  gap: 1rem;
}
#process .card{
  display: flex;
  flex-direction: column;
  gap: .55rem;
  height: 100%;
  padding: 1rem;
}
#process .card p{
  margin: 0;
  color: var(--muted);
}
#process .card .btn{
  margin-top: auto;
  width: 100%;
  justify-content: center;
}
@media (min-width: 768px){
  #process .card{ min-height: 200px; }
}



/* Header clock */
#clock{
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: .02em;
  margin-left: .75rem;
  padding: .2rem .5rem;
  border-radius: 6px;
  background: color-mix(in oklab, var(--surface) 60%, transparent);
  color: var(--muted);
}
:root[data-theme="dark"] #clock{
  background: color-mix(in oklab, var(--surface) 30%, transparent);
  color: var(--muted);
}



/* Header clock icon */
#clock{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
#clock::before{
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: currentColor;
  /* Use mask so the icon inherits text color */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 3'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 3'/></svg>") no-repeat center / contain;
}

/* ==== Seamless infinite client marquees ==== */
.marquee{ --gap:2.5rem; --speed:120; overflow:hidden; padding:1rem;
  --fade: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,1) 8%, rgba(0,0,0,1) 92%, rgba(0,0,0,0));
  -webkit-mask-image: var(--fade); mask-image: var(--fade);
}
.marquee__track{ display:flex; gap:var(--gap); width:max-content; will-change:transform; animation-name:marquee-left; animation-duration:var(--duration,30s); animation-timing-function:linear; animation-iteration-count:infinite; }
.marquee.reverse .marquee__track{ animation-name: marquee-right; }
.marquee__content{ display:flex; gap:var(--gap); }
@keyframes marquee-left{ to{ transform: translateX(-50%);} } }
@media (prefers-reduced-motion: reduce){
  .marquee__track{ display:flex; gap:var(--gap); width:max-content; will-change:transform; animation-name:marquee-left; animation-duration:var(--duration,30s); animation-timing-function:linear; animation-iteration-count:infinite; }
}
/* =========================================== */

/* === Unified sizing for client logos in infinite marquees === */
.marquee { --logo-h: 56px; }
.marquee__content { display:flex; gap: var(--gap, 2.5rem); align-items:center; }
.marquee__content > * { flex: 0 0 auto; }
.marquee__content img, .marquee__content svg {
  height: var(--logo-h);
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
  filter: none;
  opacity: .95;
}
@media (min-width: 1024px){
  .marquee { --logo-h: 64px; }
}
@media (max-width: 640px){
  .marquee { --logo-h: 44px; }
}
/* =========================================================== */

@keyframes marquee-right{ to{ transform: translateX(50%);} }

/* === Audit fixes === */
.footer-socials svg { width:52px !important; height:52px !important; }
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:fixed; left:16px; top:16px; width:auto; height:auto; padding:8px 12px; background:#111; color:#fff; border-radius:8px; z-index:9999; }
.cookie-prefs { margin-top:8px; font-size:.9rem; }


/* === v7.4 footer + brand polish === */
.header .brand .logo{ height:40px; width:auto !important; border-radius:12px; }
.footer .grid{ align-items:flex-start; }
.footer .vstack > .hstack{ align-items:center; gap:.6rem; }
.footer ul.vstack{ gap:.35rem; padding-left: 1.1rem; }
.footer ul.vstack li{ margin:0; }
.footer .btn{ border-radius:999px; min-height:44px; }
.footer .btn.primary{ background: var(--brand); color:#fff; border-color: transparent; }
.footer .btn.ghost{ background:#fff; border:1px solid var(--ring); }
[data-theme="dark"] .footer .btn.ghost{ background: transparent; }
.footer .footer-map iframe{ width:100%; height:260px; border:0; border-radius:12px; }


/* v7.4.1 Footer logo sizing */
.footer .logo{
  height: 36px !important;
  width: auto !important;
  max-width: 220px;
  object-fit: contain;
  border-radius: 12px;
  display: inline-block;
}


/* v7.4.1 Header single-line layout */
.header .container.hstack{ flex-wrap: nowrap; align-items: center; }
.header .container.hstack > .nav{ flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; flex-wrap: nowrap; gap: 1.1rem; }
.header .container.hstack > .hstack{ flex: 0 0 auto; }
.header .nav a{ white-space: nowrap; }


/* v7.4.3 Coverage map sizing */
.hg-map-wrap{ position: relative; }
#coverageMap{ width: 100%; height: 420px; border-radius: 12px; overflow: hidden; }
@media (max-width: 720px){
  #coverageMap{ height: 320px; }
}


/* ==== V7.4.4 — Locale-consistent hero sizing (EN/DE) ==== */
.hero.section { padding: 3.5rem 0; }
.hero .hero-inner { max-width: 1120px; margin: 0 auto; padding: 0 1rem; }
.hero .hero-title { font-size: clamp(1.8rem, 9vw, 2.8rem); line-height: 1.15; }
.hero .hero-subtitle { margin-top: .75rem; max-width: 58ch; }
.hero .hero-ctas { margin-top: 1.25rem; display: flex; gap: .75rem; flex-wrap: wrap; }


/* ==== V8 header/hero tweaks ==== */
/* Left-align the hero supporting paragraph and align CTAs to the left */
.hero .hero-subtitle{ text-align:left; margin-left:0; margin-right:auto; }
.hero .hero-ctas{ justify-content:flex-start; }


/* ==== V8 header nav right-aligned & tidy wrapping ==== */
.header .container.hstack{ justify-content: space-between !important; }
.header .brand{ flex: 0 0 auto; }
.header .container.hstack > .nav{ 
  flex: 1 1 auto; 
  display:flex; 
  justify-content:flex-end; 
  align-items:center; 
  flex-wrap: wrap; 
  gap: 1rem;
}
/* Keep header links on one line on wide screens; allow up to two rows when needed */
@media (min-width: 1100px){
  .header .container.hstack > .nav{ flex-wrap: nowrap; }
}
@media (max-width: 1099px){
  .header .container.hstack > .nav{ row-gap: .3rem; }
}
/* Remove default underline so only the red custom underline remains */
.header .nav a,
.header .nav a:hover,
.header .nav a:focus{ text-decoration: none !important; position:relative; }


/* ==== V8 hero & CTA refresh (match comps) ==== */
.hero .hero-subtitle{ 
  text-align:center !important; 
  margin-left:auto !important; 
  margin-right:auto !important; 
}
.hero .hero-ctas{ 
  justify-content:center !important; 
}
/* Primary button: brand red pill */
.btn-primary{ 
  background: var(--brand) !important; 
  color:#fff !important; 
  border-color: transparent !important; 
  border-radius: 14px !important; 
  padding: .95rem 1.3rem !important; 
  box-shadow: 0 8px 18px rgba(220,38,38,.20);
}
.btn-primary:hover{ filter: brightness(.95); }


/* ==== V8 footer tune-up ==== */
.footer .logo{ height: 76px !important; width:auto !important; border-radius: 14px; }
@media (max-width: 640px){
  .footer .logo{ height: 64px !important; }
}
/* Nudge social icons upward and tighten spacing */

.footer-socials svg{ width:36px; height:36px; }


/* ==== V8 footer socials aligned with contact ==== */
.footer-socials{ margin-top: 8px; display:flex; gap:14px; align-items:center; }
.footer-socials a{ display:inline-flex; }
.footer-socials svg{ width:34px; height:34px; }


/* ==== V8 footer column alignment tweak ==== */
@media (min-width: 900px){
  /* Move 2nd and 3rd footer columns a bit to the right for better visual alignment */
  .footer .grid > div:nth-child(2),
  .footer .grid > div:nth-child(3){
    padding-left: 1rem !important;
  }
}


/* ==== V8 Typography Unification ==== */
/* Tokens */
:root{
  --h1-about-min: 2.2rem;
  --h1-about-fluid: 6.2vw;
  --h1-about-max: 4.25rem;
  --lead-max: 1.15rem;
}
/* About hero (EN + DE): use same scale and rhythm */
#about-us .hero-inner .hero-title{
  font-size: clamp(var(--h1-about-min), var(--h1-about-fluid), var(--h1-about-max));
  line-height: 1.05;
  letter-spacing: -0.01em;
}
#about-us .hero-inner .hero-subtitle{
  font-size: clamp(1.02rem, 1.8vw, var(--lead-max));
  line-height: 1.55;
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}
/* Index hero (top of home) consistent across locales is already under .hero; ensure the same family/weight */
.hero .hero-title{ font-family: inherit; font-weight: 800; }
.hero .hero-subtitle{ font-family: inherit; }


/* ===== V8.3: base polish + marquee support ===== */
img { max-width:100%; height:auto; }
header nav ul { display:flex; gap:1rem; flex-wrap:nowrap; align-items:center; }
@media (max-width:768px){ a,button{ min-height:44px; min-width:44px; } header nav ul{ flex-wrap:wrap; } }

/* Marquee */
.marquee{ --gap: 48px; --speed: 70; position:relative; overflow:hidden; mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track{ display:flex; align-items:center; gap:var(--gap); will-change: transform; }
.marquee__content{ display:flex; align-items:center; gap:var(--gap); }
.marquee__content img{ height: 40px; width:auto; object-fit:contain; display:block; }
@keyframes marquee-left{ from{ transform:translateX(0) } to{ transform:translateX(calc(-50% - var(--gap)/2)) } }
@keyframes marquee-right{ from{ transform:translateX(calc(-50% - var(--gap)/2)) } to{ transform:translateX(0) } }
/* ===== End V8.3 ===== */