:root{
  /* Base surfaces */
  --surface: #ffffff;
  --surface-2: #f8fafc;
  /* Text */
  --text-strong: #0f172a;
  --text-muted: #475569;
  /* Brand */
  --brand-blue-600: #2563eb;
  --brand-blue-700: #1d4ed8;
  --on-primary: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text-strong); background: var(--surface); line-height:1.6; }
.header { position:fixed; top:0; left:0; right:0; z-index:1000; background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%); color: #FFFFFF; box-shadow:0 4px 20px rgba(0,0,0,.12); }
.nav { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 20px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.5rem; color: #FFFFFF; text-decoration:none; }
.nav-menu { display:flex; align-items:center; gap:22px; list-style:none; }
.nav-menu a { color: #FFFFFF; text-decoration:none; padding:8px 12px; border-radius:8px; transition:.2s ease; font-weight:600; }
.nav-menu a:hover { background:rgba(255,255,255,.12); transform:translateY(-1px); }
.dropdown { position:relative; }
.dropdown-content { position:absolute; top:100%; left:0; background: var(--surface); color: var(--text-strong); min-width:220px; box-shadow:0 10px 30px rgba(2,6,23,.12); border-radius:12px; display:none; padding:8px 0; }
.dropdown:hover .dropdown-content { display:block; }
.dropdown-content a { color: var(--text-strong) !important; display:block; padding:10px 14px; border-radius:6px; }
.dropdown-content a:hover { background:#f1f5f9; }
.lang-switch { display:flex; align-items:center; gap:8px; cursor:pointer; }
.mobile-toggle { display:none; color: #FFFFFF; background:none; border:none; font-size:1.4rem; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
.page-header { background:linear-gradient(135deg,#1e3a8a,#3b82f6); color: #FFFFFF; padding:96px 0 48px; text-align:center; margin-top:56px; }
.page-title { font-size:2.6rem; margin-bottom:8px; }
.page-sub { opacity:.9; }
.hero { padding:120px 0 80px; background:linear-gradient(135deg,#0f172a,#1e293b 50%,#334155); color: #FFFFFF; text-align:center; position:relative; overflow:hidden; margin-top:56px; }
.hero h1 { font-size:3.2rem; margin-bottom:10px; background:linear-gradient(45deg,#60a5fa,#34d399); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero p { font-size:1.15rem; opacity:.9; max-width:850px; margin:0 auto 22px; }
.cta { display:inline-block; background: var(--brand-blue-600); color: var(--on-primary); padding:12px 20px; border-radius:999px; text-decoration:none; font-weight:700; box-shadow:0 10px 25px rgba(37,99,235,.28); transition:.2s ease; border:1px solid transparent; }
.cta:hover { transform:translateY(-2px); box-shadow:0 14px 32px rgba(29,78,216,.38); background: var(--brand-blue-700); }
.grid { display:grid; gap:22px; }
.grid.cols-3 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid.cols-4 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.card { background: var(--surface); padding:22px; border-radius:18px; box-shadow:0 10px 26px rgba(2,6,23,.08); border:1px solid #e2e8f0; transition:.2s ease; }
.card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(2,6,23,.12); }
.icon-xl { font-size:2.2rem; color:#3b82f6; }
.section-title { text-align:center; font-size:2rem; margin:0 0 28px; color: var(--text-strong); }
.solutions { padding:48px 0; background: var(--surface); }
.services { padding:48px 0; }
.service-features { list-style:none; margin-top:10px; }
.service-features li { display:flex; gap:8px; align-items:flex-start; color: var(--text-muted); padding:6px 0; }
.service-features li::before { content:'\2713'; color:#10b981; font-weight:900; }
.product-grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); margin:24px 0; }
.specs { list-style:none; margin-top:10px; border-top:1px solid #e2e8f0; }
.specs li { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #e2e8f0; }
.specs .lbl { font-weight:700; color:#475569; }
.specs .val { color:#1d4ed8; font-weight:600; }
.plans { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); margin:24px 0; }
.plan .title { font-size:1.2rem; font-weight:800; color: var(--text-strong); margin-bottom:6px; }
.plan .desc { color:#475569; margin-bottom:10px; }
.plan ul { list-style:none; }
.plan ul li { padding:6px 0; }
.plan ul li::before { content:'\2713'; color:#10b981; font-weight:900; margin-right:8px; }
.values { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:14px; }
.val { background: var(--surface); padding:16px; border-radius:14px; box-shadow:0 6px 18px rgba(2,6,23,.06); }
.val h4 { color:#3b82f6; margin-bottom:6px; display:flex; gap:8px; align-items:center; }
.quote { padding:48px 0; background:linear-gradient(135deg,#1e3a8a,#3b82f6); color: #FFFFFF; text-align:center; }
.quote .toggle { display:inline-block; margin-top:8px; }
.quote-form { max-width:880px; margin:18px auto 0; background: var(--surface); color: var(--text-strong); padding:22px; border-radius:16px; display:none; text-align:left; box-shadow:0 14px 40px rgba(2,6,23,.2); }
.form-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label { font-weight:700; color: var(--text-muted); }
.form-group input, .form-group select, .form-group textarea { padding:12px; border:1px solid #cbd5e1; border-radius:10px; }
.form-actions { margin-top:10px; }
.contact { padding:48px 0; background:#0f172a; color: #FFFFFF; }
.contact-grid { display:grid; gap:28px; grid-template-columns:1fr 1fr; }
.contact-item { display:flex; gap:12px; align-items:flex-start; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:12px; border-radius:12px; }
.footer { background: #0F172A; color: #E2E8F0; padding:18px 0 8px; }
.footer-grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.footer h4 { color:#60a5fa; margin-bottom:8px; }
.footer a { color:#cbd5e1; text-decoration:none; display:block; margin:4px 0; }
.footer a:hover { text-decoration:underline; }
.copyright { text-align:center; font-size:.85rem; color:#cbd5e1; border-top:1px solid rgba(255,255,255,.1); margin-top:10px; padding-top:8px; }
@media (max-width: 900px) {
  .mobile-toggle { display:block; }
  .nav-menu { position:absolute; top:100%; left:0; right:0; background:#1e3a8a; display:none; flex-direction:column; padding:10px; }
  .nav-menu.active { display:flex; }
  .contact-grid { grid-template-columns:1fr; }
}
.fade { opacity:0; transform:translateY(18px); transition:all .6s ease; }
.fade.visible { opacity:1; transform:translateY(0); }
.active-link { background: rgba(255,255,255,.18); }

a { color: var(--brand-blue-700); }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--brand-blue-700); outline-offset: 2px; }

.card { background: var(--surface); color: var(--text-strong); }
.section { background: var(--surface-2); }


/* V1.3.1: Ensure navbar logo visible and sized */
.navbar-brand img{max-height:48px; display:block; width:auto;}



/* V1.3.2: Smooth, GPU-friendly dropdowns */
.navbar .dropdown { position: relative; }
.navbar .dropdown-menu {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  will-change: opacity, transform;
}
.navbar .dropdown:hover > .dropdown-menu,
.navbar .dropdown.open > .dropdown-menu,
.navbar .dropdown:focus-within > .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .navbar .dropdown-menu {
    transition: none !important;
    transform: none !important;
  }
}



/* V1.3.3: global smooth scroll (fallback) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* V1.3.4: page fade transitions to soften navigation */
html.is-transitioning body { opacity: 0; }
body { transition: opacity .22s ease; }


/* === Upgrades v1.4 === */
/* Smooth page transition */
body { opacity: 1; transition: opacity .25s ease; }
body.leaving { opacity: 0; }

/* Reduce active menu underline (ruban) height and duration */
.nav-menu a {
  position: relative;
}
.nav-menu a::after{
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  height: 2px; /* thinner ribbon */
  width: 0;
  background: currentColor;
  transition: width .18s ease; /* faster */
}
.nav-menu a:hover::after, .nav-menu a[aria-current="page"]::after{ width: 100%; }

/* Improve dropdown on touch: */
.dropdown > a { cursor: default; }
.dropdown.open > .dropdown-content { display: block; }
.dropdown-content { transition: transform .18s ease, opacity .18s ease; transform-origin: top; transform: scaleY(.98); opacity: 0; }
.dropdown:hover .dropdown-content, .dropdown.open .dropdown-content { transform: scaleY(1); opacity: 1; }

/* Ensure logo visibility against gradient */
.logo img { display:block; height:48px; filter: none; image-rendering: auto; }

/* Focus styles for accessibility */
a:focus-visible, button:focus-visible { outline: 3px solid var(--brand-blue-600); outline-offset: 2px; }

/* Reduce header flash by keeping background solid while transitioning */
.header { will-change: backgound, backdrop-filter; }