:root {
  /* Premium Corporate Palette */
  --bg-body: #050505;       /* Deepest Charcoal (Not pure black) */
  --bg-card: #121212;       /* Soft Black for cards */
  --bg-light: #f4f4f5;      /* Soft White/Zinc for light sections */
  
  --text-primary: #f0f0f0;  /* Off-white for headings */
  --text-secondary: #a1a1aa;/* Muted Grey for body */
  --text-on-light: #18181b; /* Dark Charcoal for light backgrounds */
  --text-muted-light: #52525b;

  --gold: #c5a059;          /* Muted Elegant Gold */
  --gold-hover: #d6b36b;
  
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-light: rgba(0, 0, 0, 0.06);
  
  --shadow-card: 0 20px 40px -5px rgba(0, 0, 0, 0.5);
  --shadow-elevated: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  
  --font-main: 'Inter', system-ui, -apple-system, sans-serif;
  --font-head: 'Montserrat', system-ui, sans-serif;
  --max-width: 1200px;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-main);
  margin: 0;
  color: var(--text-primary);
  background-color: var(--bg-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Accessibility */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:12px;top:12px;width:auto;height:auto;background:#fff;color:#000;padding:8px;border-radius:6px;z-index:9999}

/* Layout */
.container{max-width:var(--max-width);margin:0 auto;padding:0 24px}

/* Header */
.site-header{position:sticky;top:0;z-index:60;background:rgba(5, 5, 5, 0.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.header-inner{padding:16px 0}

.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand-name{font-family:var(--font-head);font-weight:700;color:var(--text-primary);letter-spacing:0.5px;font-size:18px;text-transform:uppercase}

/* Navigation */
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.main-nav a{text-decoration:none;color:var(--text-secondary);font-weight:500;font-size:14px;transition:color 0.2s}
.main-nav a:hover{color:var(--gold)}

.header-ctas{display:flex;align-items:center;gap:10px}
.main-nav .btn-gold {
  color: #000 !important; /* Override nav link color */
}

/* Buttons */
.btn{font-weight:600;padding:10px 18px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:all 0.2s;font-size:14px}
.btn-primary{background:var(--text-primary);color:var(--bg-body)}
.btn-primary:hover{background:#fff;transform:translateY(-1px)}
.btn-outline{background:transparent;border:1px solid var(--border-subtle);color:var(--text-primary)}
.btn-outline:hover{border-color:var(--text-primary)}
.btn-gold{background:var(--gold);color:#000}
.btn-gold:hover{background:var(--gold-hover)}

/* Mobile Menu */
.mobile-menu{display:none;background:transparent;border:none;color:var(--text-primary);font-size:24px;cursor:pointer}
.main-nav{transition:opacity 240ms ease, transform 240ms ease}
.main-nav.open{display:block;position:absolute;right:24px;top:72px;background:var(--bg-card);padding:16px;border-radius:12px;box-shadow:var(--shadow-elevated);border:1px solid var(--border-subtle);width:200px}
.main-nav.open ul{flex-direction:column;gap:12px}

/* Hero Section */
.hero{padding:60px 0;position:relative;overflow:hidden;min-height:500px}
.hero-inner{display:flex;flex-direction:column;gap:40px;align-items:center;perspective:1200px;text-align:center;}

.hero-copy{flex:1;display:flex;flex-direction:column;justify-content:center;gap:20px}
.hero-copy h1{font-family:var(--font-head);font-size:36px;line-height:1.2;letter-spacing:-0.5px;color:var(--text-primary);margin:0}
.hero-copy .lead{font-size:18px;color:var(--text-secondary);max-width:54ch;margin:0;font-weight:300}

.hero-actions{display:flex;gap:14px;margin-top:8px;justify-content:center;}

.hero-visual{width:100%;max-width:450px;display:flex;align-items:center;justify-content:center}
.hero-visual .card{width:100%;height:auto;aspect-ratio: 4/3;padding:0;overflow:hidden}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit; /* Inherit border-radius from parent card */
}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.hero-copy, .hero-visual{opacity:0;transform:translateY(10px);animation:fadeUp 800ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards}
.hero-copy{animation-delay:100ms}.hero-visual{animation-delay:300ms}

/* Cards */
.card{background:var(--bg-card);padding:24px;border-radius:16px;box-shadow:var(--shadow-card);border:1px solid var(--border-subtle);transition:transform 0.3s, box-shadow 0.3s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-elevated);border-color:rgba(255,255,255,0.1)}

/* About Section */
.about{padding:60px 0}
.about-two-column .about-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:center}
.about-copy h2{font-family:var(--font-head);font-size:32px;margin:0 0 16px;color:var(--text-primary)}
.about-copy p{color:var(--text-secondary);margin-bottom:24px}
.about-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:12px}
.about-list li{font-size:14px;color:var(--text-primary);display:flex;align-items:center;gap:8px}
.about-list li::before{content:"✓";color:var(--gold)}

/* Why Choose Us */
.why{padding:40px 0 60px}
.why h2{font-family:var(--font-head);font-size:32px;text-align:center;margin-bottom:40px}
.why-grid{display:grid;grid-template-columns:1fr;gap:20px}
.why-item h4{color:var(--gold);margin:0 0 8px;font-size:18px}
.why-item p{color:var(--text-secondary);font-size:14px;margin:0}

/* Services Section - Light Theme */
#services {
  background-color: var(--bg-light);
  color: var(--text-on-light);
  padding: 60px 0;
  margin-top: 40px;
}

#services h2 {
  color: var(--text-on-light);
  font-family: var(--font-head);
  font-size: 32px;
  text-align: center;
  margin-bottom: 40px;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

#services .card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

#services .card:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}

#services .service-icon { font-size: 32px; margin-bottom: 16px; }
#services h3 { color: var(--text-on-light); margin: 0 0 10px; font-size: 18px; }
#services p { color: var(--text-muted-light); margin: 0; font-size: 14px; }

/* GCC Countries Section */
#gcc-countries { padding: 60px 0; }
#gcc-countries h2 { font-family: var(--font-head); font-size: 32px; text-align: center; margin-bottom: 16px; color: var(--text-primary); }
#gcc-countries p { text-align: center; color: var(--text-secondary); max-width: 600px; margin: 0 auto 40px; }

.gcc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  list-style: none;
  padding: 0;
}

.gcc-item {
  background: var(--bg-card);
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 15px;
  transition: transform 0.2s, border-color 0.2s, color 0.2s;
  cursor: default;
}

.gcc-item:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: var(--shadow-card);
}

/* Jobs Section */
.jobs{padding:60px 0}
.jobs h2{font-family:var(--font-head);font-size:32px;text-align:center;margin-bottom:40px}
.job-grid{display:grid;grid-template-columns:1fr;gap:20px}
.job h4{margin:0 0 6px;color:var(--text-primary)}
.job .salary{color:var(--gold);margin:0 0 16px;font-size:15px;font-weight:500}

/* Contact Section */
.contact{padding:0 0 60px}
.contact h2{font-family:var(--font-head);font-size:32px;margin-bottom:16px}
.contact p{color:var(--text-secondary);margin-bottom:32px;max-width:600px}
.contact-form{max-width:600px;display:flex;flex-direction:column;gap:16px}
.contact-form label{display:block;font-size:14px;color:var(--text-secondary);margin-bottom:4px}

.btn-full-width {
  width: 100%;
  margin-top: 12px;
}

/* Register Section */
.register { padding: 0 0 60px; }
.register h2 { font-family: var(--font-head); font-size: 32px; text-align: center; margin-bottom: 30px; color: var(--text-primary); }
.register-card { max-width: 600px; margin: 0 auto; }

input, textarea, select {
  width: 100%;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit;
  transition: border-color 0.2s;
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255,255,255,0.05);
}

/* Footer */
.site-footer {
  background: #000;
  border-top: 1px solid var(--border-subtle);
  padding: 60px 0 30px;
  font-size: 14px;
  color: var(--text-secondary);
}

.footer-content { display: grid; grid-template-columns: 1fr; gap: 40px; text-align: center; }
.footer-col h4 { color: var(--text-primary); margin: 0 0 24px; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; }
.footer-brand-lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.footer-contact-list, .footer-links-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.footer-contact-list a { color: var(--text-secondary); text-decoration: none; }
.footer-contact-list a:hover { color: var(--gold); }
.footer-bottom { text-align: center; margin-top: 60px; padding-top: 30px; border-top: 1px solid var(--border-subtle); opacity: 0.6; }

/* WhatsApp */
.whatsapp-btn-glow {
  display: inline-flex; align-items: center; gap: 8px;
  background: #25D366; color: #fff !important;
  padding: 8px 16px; border-radius: 50px; font-weight: 600;
  margin-top: 8px; font-size: 13px;
}
.whatsapp-fab {
  position: fixed; right: 24px; bottom: 24px;
  background: #25D366; border-radius: 50%;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
  z-index: 100; transition: transform 0.2s;
}
.whatsapp-fab:hover { transform: scale(1.1); }

/* Modals */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.8); backdrop-filter: blur(4px); z-index: 200; padding: 24px; }
.modal[aria-hidden="false"] { display: flex; }
.modal-content { background: var(--bg-card); padding: 32px; border-radius: 16px; width: 100%; max-width: 480px; border: 1px solid var(--border-subtle); position: relative; }
.modal-close { position: absolute; right: 20px; top: 20px; background: transparent; border: none; color: var(--text-secondary); font-size: 24px; cursor: pointer; }
.body-modal-open { overflow: hidden; }

/* =============================================== */
/* Tablet & Medium Screens */
/* =============================================== */
@media (min-width: 600px) {
  .hero-copy h1 { font-size: 42px; }
  .why-grid, .services-grid { grid-template-columns: repeat(2, 1fr); }
  .job-grid { grid-template-columns: repeat(2, 1fr); }
  .about-list{ grid-template-columns: 1fr 1fr; }
}

/* =============================================== */
/* Desktop & Large Screens */
/* =============================================== */
@media (min-width: 900px) {
  .hero{padding:80px 0;}
  .hero-inner { flex-direction: row; text-align: left; gap: 60px; }
  .hero-actions { justify-content: flex-start; }
  .hero-copy .lead{ margin: 0; }
  .hero-copy h1 { font-size: 48px; }

  .main-nav { display: none; }
  .mobile-menu { display: block; }
  .main-nav { display: flex; }
  .mobile-menu { display: none; }

  .about-two-column .about-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: repeat(4, 1fr); }
  .services-grid { grid-template-columns: repeat(4, 1fr); }
  .job-grid { grid-template-columns: repeat(3, 1fr); }

  .footer-content { grid-template-columns: 1.5fr 1fr; gap: 60px; text-align: left; }
  .footer-brand-lockup { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}