/*
  styles.css
  European industrial machinery company design
  Refined typography, spacing, and visual hierarchy
*/
:root{
  --bg:#f5f7fa;
  --surface:#ffffff;
  --dark:#0a1f35; /* deep navy blue */
  --dark-secondary:#1a2f47;
  --muted:#64748b; /* refined steel gray */
  --muted-light:#94a3b8;
  --accent:#e63946; /* professional red accent */
  --accent-hover:#c1121f;
  --border:#e2e8f0;
  --radius:8px;
  --max-width:1280px;
  --gap:32px;
  --section-padding:80px;
  --fw-light:300;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extrabold:800;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --letter-spacing-tight:-0.02em;
  --letter-spacing-normal:0;
  --letter-spacing-wide:0.01em;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  font-weight:var(--fw-regular);
  font-size:16px;
  line-height:1.6;
  color:var(--dark);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:var(--letter-spacing-normal);
}
.container{max-width:var(--max-width);margin:0 auto;padding:0 40px}
.small{padding:16px 40px}

/* Header */
.site-header{
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:40;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 40px;
  min-height:80px;
}
.brand{
  display:flex;
  align-items:center;
  gap:16px;
}
.brand-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:var(--radius);
  background:linear-gradient(135deg,var(--dark),var(--dark-secondary));
  color:#fff;
  font-weight:var(--fw-extrabold);
  font-size:20px;
  letter-spacing:var(--letter-spacing-tight);
  box-shadow:0 2px 8px rgba(10,31,53,0.15);
}
.company-name{
  font-weight:var(--fw-bold);
  font-size:18px;
  letter-spacing:var(--letter-spacing-tight);
  line-height:1.3;
  color:var(--dark);
}
.tagline{
  font-size:12px;
  color:var(--muted);
  font-weight:var(--fw-regular);
  letter-spacing:var(--letter-spacing-wide);
  text-transform:uppercase;
  margin-top:2px;
}

/* Navigation */
.nav-controls{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:flex-end;
}
.lang-toggle{
  background:var(--surface);
  border:2px solid var(--accent);
  color:var(--accent);
  padding:8px 14px;
  border-radius:var(--radius);
  font-weight:var(--fw-bold);
  font-size:13px;
  cursor:pointer;
  transition:all 0.2s ease;
  letter-spacing:var(--letter-spacing-wide);
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:50px;
}
.lang-toggle:hover{
  background:var(--accent);
  color:#fff;
  transform:scale(1.05);
}
.lang-toggle:active{
  transform:scale(0.95);
}
.nav-list{
  display:flex;
  gap:32px;
  list-style:none;
  margin:0;
  padding:0;
  align-items:center;
}
.nav-list a{
  color:var(--dark);
  text-decoration:none;
  font-weight:var(--fw-medium);
  font-size:15px;
  letter-spacing:var(--letter-spacing-wide);
  transition:color 0.2s ease;
  position:relative;
  padding:4px 0;
}
.nav-list a:hover{
  color:var(--accent);
}
.nav-list a::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:0;
  height:2px;
  background:var(--accent);
  transition:width 0.3s ease;
}
.nav-list a:hover::after{
  width:100%;
}
.nav-toggle{
  display:none;
  background:none;
  border:0;
  font-size:24px;
  cursor:pointer;
  color:var(--dark);
  padding:8px;
}

/* RTL Support */
html[dir="rtl"] .brand{
  flex-direction:row-reverse;
}
html[dir="rtl"] .nav-controls{
  flex-direction:row-reverse;
}
html[dir="rtl"] .nav-list{
  flex-direction:row-reverse;
}
html[dir="rtl"] .nav-list a::after{
  right:0;
  left:auto;
}
html[dir="rtl"] .header-inner{
  flex-direction:row-reverse;
}
html[dir="rtl"] .hero-inner{
  flex-direction:row-reverse;
}
html[dir="rtl"] .contact-inner{
  flex-direction:row-reverse;
}

/* HERO */
.hero{
  padding:100px 0 120px;
  background:linear-gradient(135deg, var(--dark) 0%, var(--dark-secondary) 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity:0.5;
}
.hero-inner{
  display:grid;
  grid-template-columns:1fr 400px;
  gap:64px;
  align-items:center;
  position:relative;
  z-index:1;
  padding:0 40px;
}
.hero h1{
  font-size:clamp(36px, 5vw, 56px);
  margin:0 0 24px;
  line-height:1.1;
  font-weight:var(--fw-extrabold);
  letter-spacing:var(--letter-spacing-tight);
}
.lead{
  color:rgba(255,255,255,0.85);
  margin-bottom:32px;
  font-size:18px;
  line-height:1.7;
  font-weight:var(--fw-regular);
  max-width:600px;
}
.hero-cta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.hero-card .card{
  background:rgba(255,255,255,0.08);
  padding:32px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(10px);
}
.hero-card h3{
  font-size:22px;
  font-weight:var(--fw-bold);
  margin:0 0 16px;
  letter-spacing:var(--letter-spacing-tight);
}
.hero-card p{
  color:rgba(255,255,255,0.8);
  margin-bottom:20px;
  line-height:1.6;
}
.small-features{
  margin:20px 0 0;
  padding-left:24px;
  list-style:none;
}
.small-features li{
  color:rgba(255,255,255,0.75);
  margin-bottom:10px;
  position:relative;
  padding-left:20px;
  font-size:14px;
}
.small-features li::before{
  content:'→';
  position:absolute;
  left:0;
  color:var(--accent);
  font-weight:var(--fw-bold);
}

/* Sections */
.section{
  padding:var(--section-padding) 0;
  background:transparent;
}
.section:nth-child(even):not(.contact){
  background:var(--surface);
}
.section h2{
  margin-top:0;
  margin-bottom:48px;
  font-size:clamp(32px, 4vw, 42px);
  font-weight:var(--fw-extrabold);
  letter-spacing:var(--letter-spacing-tight);
  line-height:1.2;
  color:var(--dark);
  position:relative;
  padding-bottom:16px;
}
.section h2::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:60px;
  height:4px;
  background:var(--accent);
  border-radius:2px;
}
.muted{
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
}

/* Grid utilities */
.grid{
  display:grid;
  gap:32px;
}
.services-grid{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.why-grid{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

/* Cards */
.card{
  background:var(--surface);
  padding:32px;
  border-radius:var(--radius);
  box-shadow:0 2px 8px rgba(10,31,53,0.08);
  border:1px solid var(--border);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  height:100%;
  display:flex;
  flex-direction:column;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(10,31,53,0.12);
}
.service-card h3{
  margin-top:0;
  margin-bottom:16px;
  font-size:20px;
  font-weight:var(--fw-bold);
  letter-spacing:var(--letter-spacing-tight);
  color:var(--dark);
  line-height:1.3;
}
.service-card p{
  color:var(--muted);
  line-height:1.7;
  margin:0;
  flex-grow:1;
}
.why-item h4{
  font-size:18px;
  font-weight:var(--fw-bold);
  margin-top:0;
  margin-bottom:12px;
  color:var(--dark);
  letter-spacing:var(--letter-spacing-tight);
}
.why-item p{
  color:var(--muted);
  line-height:1.7;
  margin:0;
}
.optional{
  opacity:0.95;
}

/* Contact */
.contact{
  background:var(--dark) !important;
  color:#fff !important;
  position:relative;
  z-index:1;
}
.contact.section{
  background:var(--dark) !important;
}
.contact h2,
.contact h3,
.contact h4{
  color:#fff !important;
}
.contact h2::after{
  background:var(--accent);
}
.contact p,
.contact span,
.contact li,
.contact strong{
  color:rgba(255,255,255,0.9) !important;
}
.contact .container{
  position:relative;
  z-index:2;
}
.contact-inner{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:48px;
  align-items:start;
  padding:0 40px;
}
.contact-card{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
}
.contact-card h2{
  margin-bottom:24px;
}
.contact-card p{
  color:rgba(255,255,255,0.8);
  margin-bottom:24px;
  font-size:16px;
}
.contact-list{
  list-style:none;
  padding:0;
  margin:0 0 32px;
}
.contact-list li{
  margin-bottom:16px;
  font-size:15px;
  line-height:1.6;
}
.contact-list strong{
  display:inline-block;
  min-width:100px;
  color:rgba(255,255,255,0.9);
  font-weight:var(--fw-semibold);
}
.contact-list a{
  color:rgba(255,255,255,0.85);
  text-decoration:none;
  transition:color 0.2s ease;
  word-break:break-word;
}
.contact-list a:hover,
.contact-list a:focus{
  color:#fff;
  text-decoration:underline;
  outline:2px solid rgba(255,255,255,0.5);
  outline-offset:2px;
  border-radius:2px;
}
.contact-note{
  display:block;
  font-size:12px;
  color:rgba(255,255,255,0.5);
  margin-top:4px;
  font-style:italic;
}
.contact-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:8px;
}
.contact-actions .btn{
  flex:1;
  min-width:120px;
}
.footer-quick-links{
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.1);
}
.footer-quick-links h4{
  font-size:16px;
  font-weight:var(--fw-semibold);
  margin:0 0 12px;
  color:rgba(255,255,255,0.9);
}
.footer-nav{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-nav li{
  margin-bottom:8px;
}
.footer-nav a{
  color:rgba(255,255,255,0.7);
  text-decoration:none;
  font-size:14px;
  transition:color 0.2s ease, padding-left 0.2s ease;
  display:inline-block;
}
.footer-nav a:hover,
.footer-nav a:focus{
  color:#fff;
  padding-left:4px;
  outline:2px solid rgba(255,255,255,0.5);
  outline-offset:2px;
  border-radius:2px;
}
.contact-map{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
}
.contact-map h3{
  font-size:20px;
  margin-top:0;
  margin-bottom:16px;
}
.contact-map p{
  color:rgba(255,255,255,0.7);
  font-size:14px;
  margin:0;
}
.contact-map .muted{
  color:rgba(255,255,255,0.7);
}
.footnote{
  border-top:1px solid rgba(255,255,255,0.1);
  margin-top:48px;
  padding-top:24px;
  padding-bottom:32px;
  text-align:center;
}
.footnote p{
  color:rgba(255,255,255,0.6);
  font-size:14px;
  margin:0 0 12px;
}
.footnote .muted{
  color:rgba(255,255,255,0.6);
}
.footer-back-to-top{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.1);
}
.back-to-top{
  color:rgba(255,255,255,0.7);
  text-decoration:none;
  font-size:14px;
  transition:color 0.2s ease, transform 0.2s ease;
  display:inline-block;
}
.back-to-top:hover,
.back-to-top:focus{
  color:#fff;
  transform:translateY(-2px);
  outline:2px solid rgba(255,255,255,0.5);
  outline-offset:2px;
  border-radius:2px;
}

/* Buttons */
.btn{
  display:inline-block;
  padding:14px 28px;
  border-radius:var(--radius);
  text-decoration:none;
  font-weight:var(--fw-semibold);
  font-size:15px;
  letter-spacing:var(--letter-spacing-wide);
  transition:all 0.2s ease;
  border:none;
  cursor:pointer;
  text-align:center;
}
.btn.primary{
  background:var(--accent);
  color:#fff;
  box-shadow:0 4px 12px rgba(230,57,70,0.3);
}
.btn.primary:hover{
  background:var(--accent-hover);
  box-shadow:0 6px 16px rgba(230,57,70,0.4);
  transform:translateY(-1px);
}
.btn.outline{
  background:transparent;
  border:2px solid rgba(255,255,255,0.3);
  color:#fff;
}
.btn.outline:hover{
  background:rgba(255,255,255,0.1);
  border-color:rgba(255,255,255,0.5);
}

/* About section */
.about p{
  font-size:18px;
  line-height:1.8;
  color:var(--muted);
  max-width:800px;
  margin:0;
}

/* Brands section */
.brands p{
  font-size:16px;
  line-height:1.7;
}

/* Strategic Partners Section - Premium B2B Design */
.partners-section{
  background:#fff;
  padding:var(--section-padding) 0;
}

.section-header{
  text-align:center;
  margin-bottom:64px;
}

.section-header h2{
  margin-bottom:16px;
}

.section-subtitle{
  font-size:18px;
  color:var(--muted);
  font-weight:var(--fw-regular);
  margin:0;
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
  opacity:0;
  transition:opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay:0.2s;
}
.section-header.visible .section-subtitle{
  opacity:1;
}

.partner-subsection{
  margin-bottom:80px;
}

.partner-subsection:last-child{
  margin-bottom:0;
}

.partner-header{
  text-align:center;
  margin-bottom:48px;
}

.partner-logo-wrapper{
  margin-bottom:24px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:80px;
}

.partner-logo{
  max-width:200px;
  max-height:80px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:none;
  opacity:0.9;
  transition:opacity 0.3s ease;
}

/* Partner logo micro-interaction (refined and subtle) */
.partner-logo{
  transition:transform 360ms cubic-bezier(0.22,1,0.36,1), filter 360ms cubic-bezier(0.22,1,0.36,1), box-shadow 360ms cubic-bezier(0.22,1,0.36,1), opacity 200ms ease;
  will-change:transform,filter,box-shadow;
  transform-origin:center center;
}
.partner-logo-wrapper{transition:transform 360ms cubic-bezier(0.22,1,0.36,1);} 
.partner-logo:hover{
  opacity:1;
  transform:translateY(-6px) scale(1.03);
  filter:contrast(1.04) saturate(1.02);
  box-shadow:0 12px 30px rgba(8,36,64,0.06);
  z-index:30;
}
.partner-logo:active{transform:translateY(-3px) scale(1.02)}

.partner-title{
  font-size:24px;
  font-weight:var(--fw-bold);
  color:var(--dark);
  margin:0 0 12px;
  letter-spacing:var(--letter-spacing-tight);
  transition-delay:0.15s;
}

.partner-description{
  font-size:16px;
  color:var(--muted);
  margin:0;
  max-width:500px;
  margin-left:auto;
  margin-right:auto;
  transition-delay:0.25s;
}

.machine-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:24px;
  margin-top:40px;
}

.machine-card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border:1px solid #f1f5f9;
}

.machine-card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(0,0,0,0.1);
}

.machine-image-wrapper{
  position:relative;
  width:100%;
  padding-bottom:75%;
  overflow:hidden;
  background:#f8fafc;
}

.machine-image-wrapper img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform 350ms cubic-bezier(0.22,1,0.36,1), filter 350ms cubic-bezier(0.22,1,0.36,1);
  filter:contrast(1.05) brightness(1.02);
}

/* Refined image hover "pop" interaction */
.machine-image-wrapper,
.work-image-wrapper,
.enterprise-card-image,
.enterprise-background > img,
.work-card .work-image-wrapper{
  will-change:transform,box-shadow;
}

.machine-image-wrapper img,
.work-image-wrapper img,
.enterprise-card-image img,
.enterprise-background > img{
  transform:translateY(0) scale(1);
  transition:transform 380ms cubic-bezier(0.22,1,0.36,1), filter 380ms cubic-bezier(0.22,1,0.36,1), box-shadow 380ms cubic-bezier(0.22,1,0.36,1);
  backface-visibility:hidden;
}

.machine-image-wrapper:hover img,
.work-image-wrapper:hover img,
.enterprise-card-image:hover img,
.enterprise-background > img:hover{
  transform:translateY(-6px) scale(1.035);
  filter:contrast(1.06) saturate(1.03);
}

.machine-image-wrapper:hover,
.work-image-wrapper:hover,
.enterprise-card-image:hover,
.enterprise-background:hover{
  z-index:30;
}

.machine-image-wrapper:hover::after,
.work-image-wrapper:hover::after{
  /* subtle corporate blue glow */
  content:'';
  pointer-events:none;
  position:absolute;
  inset:6px;
  border-radius:8px;
  box-shadow:0 10px 30px rgba(8,36,64,0.06);
}

/* Keep the effect calm on card hover as well (avoid double aggressive movement) */
.work-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,0.12)}

/* Our Work Section - Real Installations */
.our-work-section{
  background:#f8fafc;
  padding:var(--section-padding) 0;
}

.work-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:32px;
  margin-top:40px;
}

.work-card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  transition:transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  border:1px solid #e2e8f0;
}

.work-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 28px rgba(0,0,0,0.12);
}

.work-image-wrapper{
  position:relative;
  width:100%;
  padding-bottom:66.67%;
  overflow:hidden;
  background:#f1f5f9;
}

.work-image-wrapper img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  filter:contrast(1.1) brightness(1.05);
  will-change:transform;
}

.work-card:hover .work-image-wrapper img{
  transform:scale(1.03);
}

.work-caption{
  padding:20px 24px;
  background:#fff;
}

.work-caption p{
  margin:0;
  font-size:15px;
  font-weight:var(--fw-medium);
  color:var(--dark);
  letter-spacing:var(--letter-spacing-wide);
}

/* Enterprise Section - B2B Industrial Supply Style */
.enterprise-section{
  position:relative;
  min-height:600px;
  padding:80px 0;
  overflow:hidden;
  display:flex;
  align-items:center;
  margin-top:0;
}

.enterprise-background{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:0;
  overflow:hidden;
}
.enterprise-background img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:blur(12px) saturate(0.5) brightness(0.75);
  transform:scale(1.15);
  display:block;
}

.enterprise-overlay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(135deg, rgba(10,125,190,0.45) 0%, rgba(15,82,186,0.55) 100%);
  z-index:1;
  pointer-events:none;
}

.enterprise-container{
  position:relative;
  z-index:2;
  padding:0 40px;
}

.enterprise-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:32px;
  max-width:1200px;
  margin:0 auto;
}

.enterprise-card{
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.1);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  min-height:400px;
  background:#1a2f47;
}

.enterprise-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,0.16), 0 4px 12px rgba(0,0,0,0.1);
}

.enterprise-card-image{
  position:relative;
  width:100%;
  height:100%;
  min-height:400px;
  overflow:hidden;
  background:#1a2f47;
  border-radius:18px;
}

.enterprise-card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:contrast(1.2) brightness(1.05);
  transition:transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change:transform;
}

.enterprise-card:hover .enterprise-card-image img{
  transform:scale(1.03);
}

.enterprise-card-overlay{
  display:none;
}

.enterprise-card-content{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:40px 32px 32px;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
}

.enterprise-card-content h3{
  margin:0 0 12px;
  font-size:26px;
  font-weight:var(--fw-bold);
  letter-spacing:var(--letter-spacing-tight);
  line-height:1.3;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,0.3);
}

.enterprise-card-content p{
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:rgba(255,255,255,0.95);
  font-weight:var(--fw-regular);
  text-shadow:0 1px 4px rgba(0,0,0,0.2);
}

/* Image loading states - images start visible but can fade in */
.enterprise-card-image img{
  opacity:1;
  transition:opacity 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.enterprise-card-image:has(img:not([src])),
.enterprise-card-image:has(img[src=""]){
  background:linear-gradient(135deg, #1e3a5f 0%, #2d4a6b 100%);
}

/* Responsive layout */
@media (max-width:1024px){
  .container{
    padding:0 32px;
  }
  .hero-inner{
    gap:48px;
  }
  .section{
    padding:64px 0;
  }
  .enterprise-section{
    padding:80px 0;
    min-height:500px;
  }
  .enterprise-container{
    padding:0 32px;
  }
  .enterprise-cards{
    gap:24px;
  }
  .enterprise-card{
    min-height:360px;
  }
  .enterprise-card-image{
    min-height:360px;
  }
  .enterprise-card-content{
    padding:32px 28px 28px;
  }
  .enterprise-card-content h3{
    font-size:22px;
  }
}

@media (max-width:880px){
  .container{
    padding:0 24px;
  }
  .header-inner{
    padding:16px 24px;
    min-height:72px;
  }
  .hero{
    padding:60px 0 80px;
  }
  .hero-inner{
    grid-template-columns:1fr;
    gap:40px;
    padding:0 24px;
  }
  .hero-card{
    order:2;
  }
  .nav-list{
    display:none;
    position:absolute;
    right:24px;
    top:72px;
    background:var(--surface);
    padding:16px;
    border-radius:var(--radius);
    box-shadow:0 10px 30px rgba(10,31,53,0.15);
    flex-direction:column;
    gap:12px;
    min-width:200px;
    border:1px solid var(--border);
  }
  .nav-list.open{
    display:flex;
  }
  html[dir="rtl"] .nav-list{
    right:auto;
    left:24px;
  }
  .nav-toggle{
    display:inline-block;
  }
  .section{
    padding:48px 0;
  }
  .section h2{
    margin-bottom:32px;
    font-size:28px;
  }
  .contact-inner{
    grid-template-columns:1fr;
    gap:32px;
    padding:0 24px;
  }
  .contact-actions{
    flex-direction:column;
  }
  .contact-actions .btn{
    width:100%;
  }
  .footer-quick-links{
    margin-top:20px;
    padding-top:20px;
  }
  .services-grid,
  .why-grid{
    grid-template-columns:1fr;
    gap:24px;
  }
  .section-header{
    margin-bottom:48px;
  }
  .section-subtitle{
    font-size:16px;
  }
  .partner-subsection{
    margin-bottom:56px;
  }
  .partner-header{
    margin-bottom:32px;
  }
  .partner-logo-wrapper{
    min-height:60px;
    margin-bottom:20px;
  }
  .partner-logo{
    max-width:140px;
    max-height:60px;
  }
  .partner-title{
    font-size:20px;
  }
  .partner-description{
    font-size:15px;
  }
  .machine-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .work-grid{
    grid-template-columns:1fr;
    gap:24px;
  }
  .hero-cta{
    flex-direction:column;
  }
  .btn{
    width:100%;
  }
  .enterprise-section{
    padding:60px 0;
    min-height:auto;
  }
  .enterprise-container{
    padding:0 24px;
  }
  .enterprise-cards{
    grid-template-columns:1fr;
    gap:24px;
  }
  .enterprise-card{
    min-height:320px;
  }
  .enterprise-card-image{
    min-height:320px;
  }
  .enterprise-card-content{
    padding:28px 24px 24px;
  }
  .enterprise-card-content h3{
    font-size:20px;
    margin-bottom:10px;
  }
  .enterprise-card-content p{
    font-size:15px;
  }
}

/* Small tweaks */
.card.small{
  padding:24px;
}
a{
  color:var(--dark);
  transition:color 0.2s ease;
}

/* Skip link for accessibility */
.skip-link{
  position:absolute;
  top:-40px;
  left:0;
  background:var(--dark);
  color:#fff;
  padding:8px 16px;
  text-decoration:none;
  z-index:100;
  font-weight:var(--fw-semibold);
}
.skip-link:focus{
  top:0;
  outline:3px solid var(--accent);
  outline-offset:2px;
}

/* Accessibility focus */
a:focus,
button:focus{
  outline:3px solid rgba(230,57,70,0.5);
  outline-offset:3px;
  border-radius:2px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible){
  outline:none;
}
a:focus-visible,
button:focus-visible{
  outline:3px solid rgba(230,57,70,0.5);
  outline-offset:3px;
  border-radius:2px;
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .hero::after{
    animation:none;
  }
}

/* Print styles */
@media print{
  .site-header,
  .nav,
  .hero-cta,
  .btn,
  .enterprise-section{
    display:none;
  }
  body{background:#fff;color:#000}
  .section{page-break-inside:avoid;padding:20px 0}
  a{text-decoration:underline}
  a[href^="mailto:"]::after{content:" (" attr(href) ")"}
}

/* Premium image layout & focus interaction (two-column grid + desktop-only focus overlay)
   - Implements two-column rows, consistent 16:9 aspect ratio
   - Uses a focus overlay to softly blur the page while keeping the hovered image crisp
*/

/* Two-column grids for premium layout (overrides earlier responsive auto-fit)
   Last-in cascade to ensure desired layout on large screens */
.machine-grid,
.work-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:40px;
  margin-top:48px;
}

/* Consistent landscape aspect ratio for images */
.machine-image-wrapper,
.work-image-wrapper{
  aspect-ratio:16/9;
  padding-bottom:0; /* remove legacy padding-box fallback */
  overflow:hidden;
  border-radius:12px;
}

.focus-overlay{
  position:fixed;inset:0;
  /* subtle veil instead of backdrop-filter to avoid blurring focused element */
  background:rgba(12,20,32,0.06);
  pointer-events:none;
  z-index:20;
  opacity:0;
  transition:opacity 480ms cubic-bezier(0.22,1,0.36,1);
}
body.image-focus-active .focus-overlay{opacity:1}

/* Dim non-focused image blocks when an image is focused */
body.image-focus-active .machine-card:not(.focused),
body.image-focus-active .work-card:not(.focused),
body.image-focus-active .partner-logo-wrapper:not(.focused){
  /* soften and slightly blur only non-focused cards */
  filter:brightness(0.88) saturate(0.92) grayscale(0.02) blur(2px);
  opacity:0.88;
  transition:filter 480ms cubic-bezier(0.22,1,0.36,1),opacity 480ms cubic-bezier(0.22,1,0.36,1);
  pointer-events:auto;
}

/* Focused image elevated style (sharp, crisp, soft shadow) */
.machine-card .machine-image-wrapper,
.work-card .work-image-wrapper,
.partner-logo-wrapper{
  transition:transform 520ms cubic-bezier(0.22,1,0.36,1),box-shadow 520ms cubic-bezier(0.22,1,0.36,1),filter 520ms cubic-bezier(0.22,1,0.36,1);
  will-change:transform,box-shadow,filter;
}
.machine-card.focused .machine-image-wrapper,
.work-card.focused .work-image-wrapper,
.partner-logo-wrapper.focused{
  transform:translateY(-8px) scale(1.06);
  box-shadow:0 30px 60px rgba(8,36,64,0.18);
  z-index:30;
  filter:contrast(1.04) saturate(1.03);
}

/* Keep image element crisp */
.machine-card .machine-image-wrapper img,
.work-card .work-image-wrapper img{
  display:block;width:100%;height:100%;object-fit:cover;border-radius:12px;backface-visibility:hidden
}

/* Partner logo wrapper treated like an image-card */
.partner-logo-wrapper{display:flex;justify-content:center;align-items:center}
.partner-logo-wrapper img{max-width:200px;max-height:80px;border-radius:8px}

/* Disable heavy interactions on touch/mobile */
@media (max-width:880px){
  .machine-grid,.work-grid{grid-template-columns:1fr}
  .focus-overlay{display:none}
  body.image-focus-active .machine-card:not(.focused),
  body.image-focus-active .work-card:not(.focused){filter:none;opacity:1}
  .machine-card .machine-image-wrapper,
  .work-card .work-image-wrapper{transition:none;transform:none}
  .partner-logo-wrapper img{transform:none}
}

/* Premium Scroll Reveal Animations - Calm, Confident, Expensive */
.reveal-fade{
  opacity:0;
  transition:opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change:opacity;
}
.reveal-fade.visible{
  opacity:1;
}

.reveal-scale{
  opacity:0;
  transform:scale(0.95);
  transition:opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change:opacity,transform;
}
.reveal-scale.visible{
  opacity:1;
  transform:scale(1);
}

.reveal-up{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change:opacity,transform;
}
.reveal-up.visible{
  opacity:1;
  transform:translateY(0);
}

.reveal-stagger{
  opacity:0;
  transform:translateY(15px);
  transition:opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay:var(--stagger-delay, 0ms);
  will-change:opacity,transform;
}
.reveal-stagger.visible{
  opacity:1;
  transform:translateY(0);
}

.reveal-stagger-work{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay:var(--stagger-delay, 0ms);
  will-change:opacity,transform;
}
.reveal-stagger-work.visible{
  opacity:1;
  transform:translateY(0);
}

/* Legacy reveal support */
.reveal{
  opacity:0;
  transform:translateY(18px) scale(0.995);
  transition:opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change:opacity,transform;
}
.reveal.visible{
  opacity:1;
  transform:none;
}

/* Hero subtle motion */
.hero h1{transform-origin:left top}
.hero .lead{transform-origin:left top}
.hero::after{
  content:'';
  position:absolute;
  right:-20%;
  top:-10%;
  width:60%;
  height:120%;
  background:linear-gradient(120deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  transform:rotate(12deg);
  filter:blur(18px);
  animation:drift 12s linear infinite;
  opacity:0.9;
}
@keyframes drift{
  0%{transform:translateX(0) rotate(12deg)}
  50%{transform:translateX(-6%) rotate(10deg)}
  100%{transform:translateX(0) rotate(12deg)}
}

/* Card hover depth - consolidated with earlier card styles */
.card{
  transition:transform 0.28s cubic-bezier(.2,.9,.2,1), box-shadow 0.28s cubic-bezier(.2,.9,.2,1);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(10,31,53,0.16), 0 4px 12px rgba(10,31,53,0.1);
}

/* Buttons micro-interactions - consolidated with earlier button styles */
.btn{
  transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn:active{
  transform:translateY(1px);
}
.btn.primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(230,57,70,0.4);
}

/* Header shrink on scroll */
.site-header{transition:padding 0.22s ease, box-shadow 0.22s ease, backdrop-filter 0.22s ease}
.site-header.shrink .header-inner{padding:10px 24px;min-height:64px}
.site-header.shrink .brand-logo{width:44px;height:44px;font-size:16px}
.site-header.shrink{backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(2,12,22,0.08)}

/* subtle underline animation for section titles */
.section h2::after{transition:width 0.5s cubic-bezier(.2,.9,.2,1)}
.section h2.reveal::after{width:140px}

/* RTL Typography and Layout Support */
html[dir="rtl"]{
  direction:rtl;
  text-align:right;
}

html[dir="rtl"] body{
  direction:rtl;
}

html[dir="rtl"] .section h2::after{
  left:auto;
  right:0;
}

html[dir="rtl"] .grid,
html[dir="rtl"] .services-grid,
html[dir="rtl"] .why-grid,
html[dir="rtl"] .work-grid{
  direction:rtl;
}

html[dir="rtl"] .footer-nav{
  text-align:right;
}

html[dir="rtl"] .contact-list{
  direction:rtl;
  text-align:right;
}

html[dir="rtl"] li{
  text-align:right;
}

html[dir="rtl"] a{
  direction:rtl;
}

/* Adjust text alignment for mixed content */
html[dir="rtl"] p,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6{
  text-align:right;
}

html[dir="rtl"] .contact-actions{
  flex-direction:row-reverse;
}

html[dir="rtl"] .hero-cta{
  flex-direction:row-reverse;
}