/* assets/css/style.css */
/* Minimal modern style tuned to your brand colors */
:root{
  --primary: #1976D2;
  --primary-600: #1E88E5;
  --accent: #E53935;
  --dark: #111217;
  --muted: #6b7280;
  --bg: #f8fafc;
  --maxW: 1100px;
  --radius: 10px;
  font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
body{
  margin:0;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  color:var(--dark);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

.container{
  max-width:var(--maxW);
  margin:0 auto;
  padding:28px 20px;
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  background:rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  border-bottom:1px solid #eee;
  z-index:50;
}
.header-inner{
  display:flex;
  align-items:center;
  gap:5px;
  justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:5px; text-decoration:none; color:inherit;}
.logo-icon{ width:56px; height:56px; object-fit:contain; }
.logo-text{ height:42px; object-fit:contain;margin-top: 25px; }
.brand-text .slogan{ font-size:12px; color:var(--muted); margin-top:-5px;margin-left: -60px; }

/* Nav */
.main-nav{ display:flex; gap:18px; align-items:center; }
.main-nav a{ color:var(--dark); text-decoration:none; font-weight:600; opacity:0.95; padding:8px; border-radius:6px; }
.main-nav a:hover{ background:rgba(30,136,229,0.06); }

.header-tools{ display:flex; align-items:center; gap:12px; }
.lang-switch{ font-size:14px; color:var(--primary); text-decoration:none; }

/* Hero */
.hero{ display:flex; gap:24px; align-items:center; padding:40px 0; }
.hero-left{ flex:1; }
.hero-right{ width:220px; display:flex; justify-content:center; }
.hero-image{ width:160px; opacity:0.95; filter:drop-shadow(0 4px 12px rgba(0,0,0,0.08)); }

h1{ font-size:36px; margin:0 0 12px; color:var(--dark); }
.lead{ font-size:18px; color:var(--muted); margin-bottom:18px; }

/* Buttons */
.btn{ display:inline-block; padding:10px 16px; border-radius:8px; text-decoration:none; cursor:pointer; border:none; font-weight:600; }
.btn.primary{ background:var(--primary); color:white; box-shadow: 0 6px 18px rgba(25,118,210,0.18); }
.btn.ghost{ background:transparent; border:1px solid #eee; color:var(--dark); }

/* Services */
.services h2{ margin-top:18px; }
.grid{ display:grid; gap:18px; }
.services-grid{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:16px; }
.card{ background:white; padding:16px; border-radius:12px; border:1px solid #f0f3f7; box-shadow: 0 6px 14px rgba(16,24,40,0.04); }
.card h3{ margin:0 0 8px; color:var(--primary); }

/* About & Contact */
.about, .contact{ margin-top:28px; background:linear-gradient(180deg,#fff,#fcfeff); padding:22px; border-radius:12px; border:1px solid #f0f3f7; }
.contact-form label{ display:block; margin-bottom:12px; font-weight:600; font-size:14px; color:var(--muted); }
.contact-form input, .contact-form textarea{ width:100%; padding:10px 12px; border-radius:8px; border:1px solid #e7edf6; font-size:14px; margin-top:6px; }
.alert{ padding:12px; border-radius:8px; margin-bottom:14px; }
.alert.success{ background:linear-gradient(90deg,#ecfdf5,#e6fffa); border:1px solid #b7f5d9; color:#065f46; }
.alert.error{ background:linear-gradient(90deg,#fff1f2,#fff5f5); border:1px solid #fecaca; color:#7f1d1d; }

/* Footer */
.site-footer{ margin-top:36px; padding:20px 0; background:transparent; border-top:1px solid #eee; }
.footer-inner{ display:flex; justify-content:space-between; gap:12px; align-items:center; }
.footer-left{ display:flex; gap:12px; align-items:center; }
.footer-logo{ width:42px; }
.company-name{ font-weight:700; }

/* small */
.small{ font-size:13px; }
.muted{ color:var(--muted); }

/* Responsive */
@media (max-width:860px){
  .header-inner{ gap:10px; }
  .hero{ flex-direction:column; text-align:center; }
  .hero-left{ order:2; }
  .hero-right{ order:1; }
  .main-nav{ display:none; }
  .footer-inner{ flex-direction:column; text-align:center; gap:10px; }
}