:root{--bg:#0a1124;--bg-soft:#0e1730;--text:#e7f0ff;--muted:#9fb0cb;--card:#0e1730;--primary:#14b5c9;--primary-2:#2a8bf2;--accent:#44e7ff;--ok:#16a34a;--warn:#f59e0b;--err:#ef4444;--border:#213457;--shadow:0 10px 30px rgba(20,181,201,.18);--radius:16px}:root.light{--bg:#f8fbff;--bg-soft:#ffffff;--text:#0b1730;--muted:#556a8b;--card:#ffffff;--border:#d6e0f2;--shadow:0 12px 28px rgba(42,139,242,.08)}*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,'Noto Sans',sans-serif}
a{color:var(--accent);text-decoration:none}img{max-width:100%;height:auto}.container{max-width:1200px;margin:0 auto;padding:0 20px}
.grid{display:grid;gap:24px}.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1100px){nav ul{gap:14px}}@media (max-width:960px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}

/* FIXED: Header styling - dark by default, light in light mode */
header.site{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(10,17,36,.95);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(33,52,87,.5);
}

/* Light mode header - light background with dark text */
:root.light header.site{
  background:rgba(248,251,255,.95);
  border-bottom:1px solid rgba(214,224,242,.8);
}

/* FIXED: Exact navbar layout matching the screenshot */
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:68px;
  padding:0 20px;
}

/* Logo positioned on far left */
.navbar .logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  white-space:nowrap;
  color:currentColor;
  flex-shrink:0;
}

/* Logo in light mode - dark text */
:root.light .logo{
  color:#0b1730;
}

/* CTI Live button styling */
.cti-live-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white !important;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  margin-right: 1rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
  transition: all 0.3s ease;
}

.cti-live-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

/* CTI Live button in light mode - keep red but with better contrast */
:root.light .cti-live-btn {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

:root.light .cti-live-btn:hover {
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}


/* Navigation centered in available space */
.navbar nav{
  display:flex;
  justify-content:center;
  flex:1;
}

/* Right side controls positioned on far right */
.navbar .controls{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}

/* Navigation text - light for dark mode */
nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:12px;
  line-height:1;
  position:relative;
  color:#d7e8ff;
}

/* Navigation text in light mode - dark */
:root.light nav a{
  color:#0b1730;
}

/* Language selector - dark styling for dark mode */
select.lang{
  background:rgba(14,23,48,.8);
  color:#d7e8ff;
  border:1px solid rgba(33,52,87,.6);
  padding:8px 10px;
  border-radius:12px;
  min-width:92px;
  appearance:auto!important;
  line-height:1.1;
  height:40px;
  white-space:nowrap;
}

/* Language selector in light mode - light styling */
:root.light select.lang{
  background:rgba(248,251,255,.9);
  color:#0b1730;
  border:1px solid rgba(214,224,242,.8);
}

/* Theme button styling for dark header */
button.theme{
  background:rgba(14,23,48,.8);
  color:#d7e8ff;
  border:1px solid rgba(33,52,87,.6);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  height:40px;
}

/* Theme button in light mode - light styling */
:root.light button.theme{
  background:rgba(248,251,255,.9);
  color:#0b1730;
  border:1px solid rgba(214,224,242,.8);
}

.logo img{height:34px;width:auto}
nav ul{display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0;white-space:nowrap;flex-wrap:nowrap}
nav li{display:flex}
nav a:hover{transform:translateY(-1px)}
nav a::after{content:'';position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--primary),var(--primary-2));opacity:0;transform:scaleX(.6);transition:opacity .2s,transform .2s}
nav a:hover::after{opacity:1;transform:scaleX(1)}

/* FIXED: CTA button with solid background and bold text */
nav a.cta{
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  color:#fff;
  box-shadow:var(--shadow);
  height:40px;
  padding:0 14px;
  border-radius:12px;
  font-weight:600;
}

/* CTA button stays same in light mode */
:root.light nav a.cta{
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  color:#fff;
}

/* FIXED: Outline button with same color as CTA but no bold and transparent background */
nav a.outline{
  background:transparent;
  color:#14b5c9;
  border:none;
  height:40px;
  padding:0 14px;
  border-radius:12px;
  font-weight:normal;
  transition:background-color 0.2s ease, color 0.2s ease;
}

/* Hover effect for outline button - slightly brighter blue */
nav a.outline:hover{
  background:rgba(20,181,201,0.1);
  color:#44e7ff;
}

/* Outline button in light mode - same blue color */
:root.light nav a.outline{
  color:#14b5c9;
}

:root.light nav a.outline:hover{
  background:rgba(20,181,201,0.1);
  color:#44e7ff;
}

.lang-switch,.theme-switch{display:flex;align-items:center;gap:8px}

.hero{padding:64px 0;background:linear-gradient(180deg, rgba(42,139,242,.10) 0%, rgba(20,181,201,.10) 100%)}
.hero .lead{font-size:40px;line-height:1.1;margin:0 0 14px}.hero .sub{font-size:18px;color:var(--muted);max-width:860px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(20,181,201,.22)}.card h3{margin-top:0}.section{padding:56px 0}
footer.site{margin-top:56px;border-top:1px solid var(--border);padding:32px 0;background:var(--bg-soft)}.badge{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--border);font-size:12px;color:var(--muted)}
.table{width:100%;border-collapse:separate;border-spacing:0}.table th,.table td{padding:12px;border-bottom:1px solid var(--border);text-align:left}.table th{color:var(--muted);font-weight:600}
.notice{padding:14px;border-left:4px solid var(--primary);background:rgba(20,181,201,.10);border-radius:8px;margin:16px 0}
.rtl{direction: rtl}.rtl .navbar{flex-direction: row-reverse}.rtl nav ul{flex-direction: row-reverse}.rtl .logo{flex-direction: row-reverse}
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;transition:transform .12s ease, box-shadow .12s ease}
.btn:hover{transform:translateY(-1px)}.btn.primary{background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#fff;border:none}.btn.ghost{background:transparent}
input, textarea, select{width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--bg-soft); color:var(--text); outline:none}
input:focus, textarea:focus, select:focus{border-color:var(--primary-2); box-shadow:0 0 0 3px rgba(42,139,242,.22)}label{display:block; font-weight:600; margin:8px 0 6px}
.icon{width:20px;height:20px;display:inline-block;vertical-align:middle}.icon path{fill:var(--accent)}.icon.red path{fill:var(--err)}
.reveal{opacity:0; transform:translateY(12px); transition:opacity .4s ease, transform .4s ease}.reveal.in{opacity:1; transform:none}
/* Mobile-Friendly Enhancements */
@media (max-width: 768px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .grid.cols-6 {
    grid-template-columns: 1fr !important;
  }
  
  .hero .lead {
    font-size: 28px !important;
  }
  
  .hero .sub {
    font-size: 16px !important;
  }
  
  .card {
    padding: 1.25rem !important;
  }
  
  .section {
    padding: 2rem 1rem !important;
  }
  
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Customer logos mobile */
  .customer-logo img {
    max-height: 50px !important;
  }
  
  /* Testimonials mobile */
  div[style*="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Certifications mobile */
  div[style*="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))"],
  div[style*="grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))"],
  div[style*="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Service cards mobile */
  div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Footer mobile */
  footer.site div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  /* Navbar mobile */
  .navbar {
    flex-direction: column !important;
    padding: 1rem !important;
  }
  
  nav ul {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
}

@media (max-width: 480px) {
  .hero .lead {
    font-size: 24px !important;
  }
  
  h1 {
    font-size: 1.75rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
  
  h3 {
    font-size: 1.25rem !important;
  }
}

/* Touch-friendly buttons */
a, button {
  min-height: 44px;
  min-width: 44px;
}

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
}

/* Better spacing on mobile */
@media (max-width: 768px) {
  * {
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  }
}

/* Hotline Button in Header */
.hotline-btn:hover {
  background: #b91c1c !important;
  transform: scale(1.05);
  transition: all 0.2s ease;
}

@media (max-width: 768px) {
  .hotline-btn {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.8rem !important;
    margin-right: 0.5rem !important;
  }
  .hotline-btn span:last-child {
    display: none !important;
  }
  .hotline-btn::after {
    content: 'Hotline' !important;
    font-size: 0.75rem;
  }
}

/* === HAMBURGER MENU === */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001;
  margin-left: auto;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: var(--text);
  border-radius: 3px;
  transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* === MOBILE NAVIGATION OVERRIDE === */
@media (max-width: 768px) {
  .hamburger {
    display: flex !important;
  }
  
  .navbar {
    flex-wrap: wrap !important;
    position: relative;
    padding: 1rem !important;
  }
  
  .navbar .logo {
    order: 1;
  }
  
  .navbar .hamburger {
    order: 2;
  }
  
  .navbar nav {
    position: fixed !important;
    top: 0;
    left: -100%;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background: var(--bg);
    box-shadow: 2px 0 10px rgba(0,0,0,0.3);
    transition: left 0.3s ease;
    z-index: 1000;
    padding: 5rem 1rem 1rem 1rem;
    overflow-y: auto;
    order: 4;
  }
  
  .navbar nav.active {
    left: 0 !important;
  }
  
  .navbar nav ul {
    flex-direction: column !important;
    gap: 0 !important;
    width: 100%;
  }
  
  .navbar nav ul li {
    width: 100%;
    border-bottom: 1px solid var(--border);
  }
  
  .navbar nav ul li a {
    display: block !important;
    padding: 1rem !important;
    width: 100%;
    text-align: left;
	color: currentColor;  
  }
  
  /* Desktop controls - hide on mobile (controls moved inside nav) */
  .navbar > .controls {
    display: none !important;
  }
  
  /* Mobile controls inside nav */
  .navbar nav .controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100%;
    padding: 1rem 0;
    margin-top: 1rem;
    border-top: 2px solid var(--border);
  }
  
  .cti-live-btn {
    width: 100% !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0.75rem 1rem !important;
  }
  
  .hotline-btn {
    width: 100% !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0.75rem 1rem !important;
  }
  
  .hotline-btn span:last-child {
    display: inline !important;
  }
  
  .hotline-btn::after {
    content: '' !important;
  }
  
  
}

/* === MOBILE NAVIGATION UPDATE === */
@media (max-width: 768px) {
  /* Hide desktop controls (they're now inside nav) */
  .navbar > .controls {
    display: none !important;
  }
  
  /* Show mobile controls inside nav */
  .navbar nav .controls.mobile-controls {
    display: flex !important;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    margin-top: 1rem;
    border-top: 2px solid var(--border);
    width: 100%;
  }
  
  .navbar nav .controls.mobile-controls .cti-live-btn,
  .navbar nav .controls.mobile-controls .hotline-btn {
    width: 100% !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0.875rem 1rem !important;
    font-size: 0.9rem !important;
  }
  
  .navbar nav .controls.mobile-controls .lang-switch,
  .navbar nav .controls.mobile-controls .theme-switch {
    width: 100%;
  }
  
  .navbar nav .controls.mobile-controls .lang-switch select,
  .navbar nav .controls.mobile-controls .theme-switch button {
    width: 100%;
    padding: 0.75rem !important;
    font-size: 0.9rem !important;
    border-radius: 8px;
    text-align: center;
  }
  
  /* Logo positioning */
  .navbar .logo {
    order: 1;
    margin-right: auto;
  }
  
  /* Hamburger on the right */
  .navbar .hamburger {
    order: 2;
    margin-left: 0;
  }
}

/* Mobile default light theme */
@media (max-width: 768px) {
  :root:not(.light):not(.dark) {
    --bg: #ffffff;
    --bg-soft: #f8fafc;
    --text: #0877D1;
    --muted: #64748b;
    --card: #ffffff;
    --border: #e2e8f0;
  }
}

/* Desktop: hide mobile controls inside nav */
@media (min-width: 769px) {
  .navbar nav .controls.mobile-controls {
    display: none !important;
  }
}

/* === DESKTOP VS MOBILE CONTROLS === */
/* Desktop: show desktop controls, hide mobile controls */
@media (min-width: 769px) {
  .navbar .controls.mobile-controls {
    display: none !important;
  }
  
  .navbar .controls.desktop-controls {
    display: flex !important;
  }
}

/* Mobile: hide desktop controls, show mobile controls inside menu */
@media (max-width: 768px) {
  .navbar > .controls.desktop-controls {
    display: none !important;
  }
  
  .navbar nav .controls.mobile-controls {
    display: flex !important;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem 0 1rem 0;
    margin-top: 1.5rem;
    border-top: 2px solid var(--border);
    width: 100%;
  }
  
  .navbar nav .controls.mobile-controls .cti-live-btn,
  .navbar nav .controls.mobile-controls .hotline-btn {
    width: 100% !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 1rem !important;
    font-size: 0.95rem !important;
    border-radius: 10px;
  }
  
  .navbar nav .controls.mobile-controls .lang-switch,
  .navbar nav .controls.mobile-controls .theme-switch {
    width: 100%;
  }
  
  .navbar nav .controls.mobile-controls .lang-switch select {
    width: 100%;
    padding: 0.875rem;
    font-size: 0.95rem;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
  }
  
  .navbar nav .controls.mobile-controls .theme-switch button {
    width: 100%;
    padding: 0.875rem;
    font-size: 1.2rem;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
  }
  
  /* Logo stays left */
  .navbar .logo {
    order: 1;
    margin-right: auto;
  }
  
  /* Hamburger on right */
  .navbar .hamburger {
    order: 2;
    margin-left: 0;
  }
}

/* === FIXED MOBILE MENU OVERLAY === */
@media (max-width: 768px) {
  /* Dark overlay behind menu */
  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  
  .mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: all;
  }
  
  /* Mobile navigation drawer */
  .navbar nav {
    position: fixed !important;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    background: var(--bg);
    box-shadow: 2px 0 20px rgba(0,0,0,0.4);
    transition: left 0.3s ease;
    z-index: 1000;
    padding: 5rem 1.5rem 2rem 1.5rem;
    overflow-y: auto;
    order: 4;
  }
  
  .navbar nav.active {
    left: 0 !important;
  }
  
  /* Hamburger above everything */
  .navbar .hamburger {
    z-index: 1001;
    position: relative;
  }
  
  /* Logo stays visible */
  .navbar .logo {
    z-index: 1001;
    position: relative;
  }
}