:root{
  --navy:#061d3a;
  --navy-2:#08264a;
  --blue:#0f4f91;
  --orange:#ff7900;
  --orange-dark:#e96600;
  --text:#0c2140;
  --muted:#5f6b7a;
  --line:#dbe3ee;
  --soft:#f5f8fc;
  --white:#ffffff;
  --shadow:0 14px 40px rgba(5,30,60,.12);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.55;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1460px,94%);margin-inline:auto}

.site-header{
  height:74px;
  padding:0 28px;
  background:#fff;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:26px;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:100;
}
.brand{
  display:flex;
  flex-direction:column;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:900;
  color:var(--navy);
  font-size:25px;
}
.brand strong{color:var(--orange);font-size:22px;margin-top:4px}
.main-nav{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:42px;
  font-size:14px;
  font-weight:800;
  text-transform:uppercase;
}
.main-nav a:hover,.language-switch a:hover{color:var(--orange)}
.language-switch{
  display:flex;
  gap:12px;
  align-items:center;
  font-size:14px;
  font-weight:800;
  text-transform:uppercase;
  border-left:1px solid #bcc7d4;
  padding-left:24px;
}
.language-switch .active{color:var(--orange)}
.menu-toggle{
  display:none;
  background:none;
  border:0;
  font-size:28px;
  color:var(--navy);
  cursor:pointer;
}

.hero{
  min-height:360px;
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  background-image:url("assets/images/banner.jpg");
  background-size:cover;
  background-position:center;
  color:white;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(4,20,40,.95) 0%,rgba(4,20,40,.88) 25%,rgba(4,20,40,.55) 45%,rgba(4,20,40,.10) 78%),
    linear-gradient(180deg,rgba(4,20,40,.25),rgba(4,20,40,.25));
  z-index:-1;
}
.hero-content{padding:54px 0 44px;max-width:1460px}
.eyebrow{
  color:var(--orange);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:18px;
  margin-bottom:10px;
}
.hero h1{
  font-size:clamp(43px,5vw,66px);
  line-height:1.06;
  letter-spacing:-1.4px;
  max-width:740px;
  margin-bottom:20px;
}
.hero-text{
  max-width:560px;
  font-size:18px;
  color:#edf4ff;
  margin-bottom:22px;
}
.hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  margin:22px 0 26px;
}
.hero-stats div{
  display:grid;
  grid-template-columns:36px auto;
  align-items:center;
  column-gap:10px;
  min-width:130px;
}
.hero-stats .icon{
  grid-row:span 2;
  color:var(--orange);
  font-size:36px;
  line-height:1;
}
.hero-stats strong{font-size:15px;color:#fff}
.hero-stats small{font-size:14px;color:#fff}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  border-radius:4px;
  min-height:48px;
  padding:0 26px;
  font-weight:900;
  text-transform:uppercase;
  font-size:14px;
  border:1px solid transparent;
  cursor:pointer;
  transition:.2s ease;
}
.btn.primary{background:var(--orange);color:white;border-color:var(--orange)}
.btn.primary:hover{background:var(--orange-dark)}
.btn.secondary{background:rgba(2,14,28,.35);color:white;border-color:rgba(255,255,255,.65)}
.btn.secondary:hover{border-color:var(--orange);color:var(--orange)}

.feature-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  padding:18px 0 18px;
}
.feature-card{
  background:white;
  border-right:1px solid var(--line);
}
.feature-card img{
  width:100%;
  height:145px;
  object-fit:cover;
  border-radius:3px;
}
.feature-body{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:15px;
  padding:14px 10px 12px 0;
}
.round-icon{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:999px;
  background:var(--navy);
  color:white;
  font-weight:900;
  align-self:start;
}
.feature-card h2{
  font-size:17px;
  color:var(--navy);
  margin-bottom:4px;
}
.feature-card p{font-size:15px;color:var(--text)}

.content-panel{
  display:grid;
  grid-template-columns:1fr 2fr 1.25fr;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  min-height:228px;
}
.content-panel>div{padding:18px 28px 20px 18px;border-right:1px solid var(--line)}
.content-panel>div:last-child{border-right:0}
.section-title{
  color:var(--navy);
  font-size:18px;
  text-transform:uppercase;
  font-weight:900;
  margin-bottom:18px;
  position:relative;
}
.section-title::after{
  content:"";
  position:absolute;
  left:0;bottom:-7px;
  width:28px;height:2px;
  background:var(--orange);
}
.check-list{list-style:none}
.check-list.columns{columns:2;column-gap:26px}
.check-list li{
  break-inside:avoid;
  margin:0 0 10px;
  font-size:14px;
  color:#122a4b;
  position:relative;
  padding-left:22px;
}
.check-list li::before{
  content:"✓";
  color:var(--orange);
  font-weight:900;
  position:absolute;
  left:0;
}
/* Reference logo cloud */
.logo-cloud{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:26px 48px;
  max-width:1180px;
  margin:34px auto 0;
  padding:8px 0 2px;
}
.logo-cloud img{
  display:block;
  width:auto;
  max-width:190px;
  max-height:58px;
  object-fit:contain;
  filter:saturate(.95) contrast(1.03);
  transition:transform .25s ease, filter .25s ease;
}
.logo-cloud img:hover{
  transform:translateY(-3px) scale(1.06);
  filter:saturate(1.08) contrast(1.06);
}
.logo-cloud .logo-deloitte,
.logo-cloud .logo-capgemini,
.logo-cloud .logo-ordina{max-height:68px;max-width:205px}
.logo-cloud .logo-frieslandcampina,
.logo-cloud .logo-nxp,
.logo-cloud .logo-lambweston{max-height:64px;max-width:210px}
.logo-cloud .logo-bayer,
.logo-cloud .logo-cargill,
.logo-cloud .logo-nouryon{max-height:56px}
.logo-cloud .logo-ecopower,
.logo-cloud .logo-fiskars{max-height:52px}
.industries{
  text-align:center;
  margin-top:16px;
  font-size:14px;
  color:#113767;
}
.industries span{color:var(--orange);padding:0 14px;font-weight:900}
.contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.contact-form label span{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
}
.contact-form .full{grid-column:1/-1}
input,textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:3px;
  padding:10px 12px;
  font:inherit;
  font-size:13px;
  color:var(--text);
  background:#fff;
}
textarea{resize:vertical;min-height:74px}

.image-band{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  padding:18px 0;
}
.image-band img{
  height:150px;
  width:100%;
  object-fit:cover;
  border-radius:5px;
  box-shadow:var(--shadow);
}
.availability{
  background:linear-gradient(90deg,#062044 0%,#082b58 52%,#062044 100%);
  color:white;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.availability-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:stretch;
}
.availability article{
  display:grid;
  grid-template-columns:52px 1fr;
  align-items:center;
  gap:16px;
  padding:20px 24px;
  border-right:1px solid rgba(255,255,255,.32);
}
.availability article:last-child{border-right:0}
.availability-icon{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.availability-icon svg{
  width:42px;
  height:42px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.availability-icon.sap-word{
  border:2px solid #fff;
  border-radius:4px;
  font-size:18px;
  font-weight:800;
  letter-spacing:.5px;
  line-height:1;
}
.availability h3{
  font-size:14px;
  text-transform:uppercase;
  line-height:1.2;
  margin-bottom:4px;
  color:#fff;
}
.availability p{font-size:13px;color:#e7f1ff;line-height:1.35}
.site-footer{
  text-align:center;
  padding:14px;
  font-size:14px;
  color:#17375d;
  background:#fff;
}

@media(max-width:1180px){
  .site-header{grid-template-columns:auto auto auto;gap:14px}
  .main-nav{gap:20px;font-size:13px}
  .content-panel{grid-template-columns:1fr 1fr}
  .contact-block{grid-column:1/-1;border-top:1px solid var(--line)}
  .availability-grid{grid-template-columns:repeat(2,1fr)}
  .availability article{border-bottom:1px solid rgba(255,255,255,.2)}
}

@media(max-width:900px){
  .site-header{height:auto;min-height:68px;padding:12px 18px;grid-template-columns:1fr auto auto}
  .brand{font-size:19px}.brand strong{font-size:17px}
  .menu-toggle{display:block;grid-column:3}
  .language-switch{grid-column:2;grid-row:1;border-left:0;padding-left:0}
  .main-nav{
    display:none;
    grid-column:1/-1;
    justify-self:stretch;
    flex-direction:column;
    gap:0;
    border-top:1px solid var(--line);
    margin-top:10px;
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:14px 0;border-bottom:1px solid var(--line)}
  .hero{min-height:auto;background-position:center right}
  .hero-overlay{background:linear-gradient(90deg,rgba(4,20,40,.96),rgba(4,20,40,.72))}
  .hero-content{padding:42px 0 34px}
  .hero h1{font-size:40px}
  .hero-text{font-size:16px}
  .hero-stats{gap:16px}
  .hero-stats div{min-width:135px}
  .hero-actions .btn{width:100%}
  .feature-strip{grid-template-columns:1fr 1fr}
  .content-panel{grid-template-columns:1fr}
  .content-panel>div{border-right:0;border-bottom:1px solid var(--line);padding:22px 0}
  .logo-cloud{gap:22px 34px;max-width:760px}
  .logo-cloud img{max-height:50px;max-width:165px}
  .logo-cloud .logo-deloitte,
  .logo-cloud .logo-capgemini,
  .logo-cloud .logo-ordina,
  .logo-cloud .logo-frieslandcampina,
  .logo-cloud .logo-nxp,
  .logo-cloud .logo-lambweston{max-height:56px;max-width:175px}
  .image-band{grid-template-columns:1fr}
}

@media(max-width:620px){
  .container{width:min(100% - 28px,1460px)}
  .site-header{padding:10px 14px}
  .language-switch{font-size:13px;gap:8px}
  .hero{background-position:center}
  .hero h1{font-size:31px;letter-spacing:-.5px}
  .eyebrow{font-size:14px}
  .feature-strip{grid-template-columns:1fr;padding-top:14px}
  .feature-card{border-right:0;border-bottom:1px solid var(--line)}
  .feature-card img{height:190px}
  .check-list.columns{columns:1}
  .contact-form{grid-template-columns:1fr}
  .availability-grid{grid-template-columns:1fr}
  .availability article{border-right:0}
  .industries span{padding:0 6px}
  .logo-cloud{gap:20px 28px;margin-top:28px}
  .logo-cloud img{max-width:145px;max-height:44px}
  .logo-cloud .logo-deloitte,
  .logo-cloud .logo-capgemini,
  .logo-cloud .logo-ordina,
  .logo-cloud .logo-frieslandcampina,
  .logo-cloud .logo-nxp,
  .logo-cloud .logo-lambweston{max-width:155px;max-height:50px}
}



/* Contact success/error popup */
.contact-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(11,31,58,.62);
  backdrop-filter:blur(6px);
}
.contact-modal.open{display:flex}
.contact-modal-card{
  position:relative;
  width:min(440px,100%);
  background:var(--white);
  border-radius:14px;
  box-shadow:0 24px 80px rgba(5,30,60,.28);
  padding:34px 30px 28px;
  text-align:center;
  border-top:5px solid var(--orange);
  animation:modalIn .22s ease-out;
}
.contact-modal-close{
  position:absolute;
  top:12px;
  right:14px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#eef4fb;
  color:var(--navy);
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.contact-modal-icon{
  width:58px;
  height:58px;
  margin:0 auto 16px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff;
  font-size:30px;
  font-weight:900;
  box-shadow:0 10px 26px rgba(0,112,242,.22);
}
.contact-modal.is-error .contact-modal-icon{
  background:linear-gradient(135deg,#7a1f1f,#c2410c);
}
.contact-modal h3{
  margin:0 0 8px;
  color:var(--navy);
  font-size:24px;
}
.contact-modal p{
  margin:0 0 22px;
  color:var(--muted);
}
.contact-modal-ok{min-width:110px;justify-content:center}
.contact-form button:disabled{opacity:.72;cursor:wait}
@keyframes modalIn{
  from{opacity:0;transform:translateY(12px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}