:root{
  --blue:#0A1E3D; --blueBright:#2979FF; --gold:#F5B041; --offwhite:#F8F9F9; --textDim:#D5D8DC;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:'Poppins',sans-serif; background:var(--blue); color:#fff}
.navbar{position:sticky; top:0; display:flex; align-items:center; justify-content:space-between;
  padding:18px 56px; background:linear-gradient(180deg, rgba(10,30,61,.9), rgba(10,30,61,.6)); backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08)}
.logo img{height:28px}
.navbar ul{display:flex; gap:28px; align-items:center; list-style:none; margin:0; padding:0}
.navbar a{color:#fff; text-decoration:none; font-weight:500}
.btn-quote{background:var(--gold); color:var(--blue); padding:10px 16px; border-radius:10px; font-weight:600}
.hero{display:grid; background-color: #06193B; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:90px 80px 70px}
.hero-text h1{font-size:48px; line-height:1.15; margin:0 0 16px}
.hero-text p{color:var(--textDim); margin:0 0 24px; max-width:680px}
.hero-buttons{display:flex; gap:16px}
.btn-blue,.btn-gold{display:inline-block; padding:14px 22px; border-radius:12px; text-decoration:none; font-weight:600; transition:all 0.3s ease}
.btn-blue{background:var(--blueBright); color:#fff}
.btn-blue:hover{filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 8px 20px rgba(41,121,255,.3)}
.btn-gold{background:var(--gold); color:var(--blue)}
.btn-gold:hover{filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 8px 20px rgba(245,176,65,.3)}
.hero-map img{width:100%;  display:block; margin:0 auto; }
.services{background:#fff; color:var(--blue); padding:70px 40px 100px; border-top-left-radius:24px; border-top-right-radius:24px}
.services h2{text-align:center; font-size:32px; margin:0 0 36px}
.cards{display:flex; justify-content:center; gap:28px; flex-wrap:wrap}
.card{background:var(--offwhite); width:300px; padding:26px; border-radius:16px; box-shadow:0 12px 28px rgba(10,30,61,.08); animation:fadeInUp 0.8s ease-out forwards; opacity:0; transform:translateY(30px); transition:transform 0.3s ease, box-shadow 0.3s ease}
.card:hover{transform:translateY(-8px); box-shadow:0 20px 40px rgba(10,30,61,.15)}
.card:nth-child(1){animation-delay:0.2s}
.card:nth-child(2){animation-delay:0.4s}
.card:nth-child(3){animation-delay:0.6s}
.card:nth-child(4){animation-delay:0.8s}
@keyframes fadeInUp{to{opacity:1; transform:translateY(0)}}
.card img{width:44px; height:44px; margin-bottom:14px}
.card h3{margin:8px 0 8px; font-size:18px}
.card p{margin:0; color:#333}
.about{background:var(--blue); color:#fff; padding:80px 40px; text-align:center}
.about-content{max-width:800px; margin:0 auto}
.about h2{font-size:32px; margin:0 0 24px; color:#fff}
.about p{font-size:18px; line-height:1.6; margin:0 0 20px; color:var(--textDim)}
.about p:last-child{margin-bottom:0}
.faq{background:#fff; color:var(--blue); padding:80px 40px}
.faq-content{max-width:1200px; margin:0 auto}
.faq h2{text-align:center; font-size:32px; margin:0 0 48px; color:var(--blue)}
.faq-category{margin-bottom:48px}
.faq-category:last-child{margin-bottom:0}
.faq-category h3{font-size:24px; margin:0 0 24px; color:var(--blue); text-align:center; position:relative; padding-bottom:12px}
.faq-category h3:after{content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:60px; height:3px; background:var(--gold)}
.faq-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(350px, 1fr)); gap:24px}
.faq-item{background:var(--offwhite); padding:24px; border-radius:12px; border-left:4px solid var(--gold); animation:fadeInUp 0.6s ease-out forwards; opacity:0; transform:translateY(20px)}
.faq-item h4{margin:0 0 12px; font-size:16px; font-weight:600; color:var(--blue)}
.faq-item p{margin:0; font-size:14px; line-height:1.5; color:#555}
.faq-item:nth-child(1){animation-delay:0.1s}
.faq-item:nth-child(2){animation-delay:0.2s}
.faq-item:nth-child(3){animation-delay:0.3s}
.faq-item:nth-child(4){animation-delay:0.4s}
.faq-item:nth-child(5){animation-delay:0.5s}
.faq-item:nth-child(6){animation-delay:0.6s}
.modal{display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background-color:rgba(10,30,61,0.8); backdrop-filter:blur(4px)}
.modal-content{background:#fff; margin:5% auto; padding:32px; border-radius:16px; width:90%; max-width:500px; position:relative; animation:modalSlideIn 0.3s ease-out}
@keyframes modalSlideIn{from{opacity:0; transform:translateY(-30px)} to{opacity:1; transform:translateY(0)}}
.close{color:#aaa; float:right; font-size:28px; font-weight:bold; cursor:pointer; position:absolute; right:20px; top:20px}
.close:hover{color:var(--blue)}
.modal h2{color:var(--blue); margin:0 0 24px; font-size:24px; text-align:center}
.form-group{margin-bottom:20px}
.form-group label{display:block; margin-bottom:8px; font-weight:600; color:var(--blue)}
.form-group input, .form-group textarea{width:100%; padding:12px; border:2px solid #e1e8ed; border-radius:8px; font-family:'Poppins',sans-serif; font-size:14px; transition:border-color 0.3s ease}
.form-group input:focus, .form-group textarea:focus{outline:none; border-color:var(--blueBright)}
.form-group textarea{resize:vertical; min-height:100px}
.btn-submit{background:var(--gold); color:var(--blue); border:none; padding:14px 24px; border-radius:8px; font-family:'Poppins',sans-serif; font-weight:600; font-size:16px; cursor:pointer; width:100%; transition:all 0.3s ease}
.btn-submit:hover:not(:disabled){filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 8px 20px rgba(245,176,65,.3)}
.btn-submit:disabled{background:#ccc; color:#666; cursor:not-allowed; transform:none; box-shadow:none}
/* Tablet Landscape - 1024px */
@media (max-width:1024px){
  .hero{grid-template-columns:1fr; text-align:center; padding:60px 40px 50px}
  .hero-text p{margin-left:auto; margin-right:auto}
  .logo-crest{height:80px}
  .navbar{padding:16px 40px}
  .services{padding:60px 30px 80px}
  .about{padding:60px 30px}
  .faq{padding:60px 30px}
}

/* Tablet Portrait - 768px */
@media (max-width:768px){
  .navbar{padding:14px 20px; flex-direction:column; gap:16px}
  .navbar ul{flex-wrap:wrap; justify-content:center; gap:16px}
  .navbar .cta{display:none}
  .floating-request-btn{display:block !important}
  .hero{padding:40px 20px 30px}
  .hero-text h1{font-size:36px; line-height:1.2}
  .logo-crest{height:60px; margin-bottom:16px}
  .hero-buttons{flex-direction:column; align-items:center; gap:12px}
  .hero-buttons a{width:280px; text-align:center}
  .services{padding:50px 20px 60px}
  .services h2{font-size:28px}
  .cards{gap:20px}
  .card{width:100%; max-width:320px}
  .about{padding:50px 20px}
  .about h2{font-size:28px}
  .about p{font-size:16px}
  .faq{padding:50px 20px}
  .faq h2{font-size:28px}
  .faq-category h3{font-size:22px}
  .faq-grid{grid-template-columns:1fr; gap:16px}
  .modal-content{margin:10% auto; padding:24px; width:95%}
  .modal h2{font-size:20px}
}

/* Mobile Large - 480px */
@media (max-width:480px){
  .navbar{padding:12px 16px}
  .navbar ul{gap:12px}
  .navbar a{font-size:14px}
  .hero{padding:30px 16px 20px}
  .hero-text h1{font-size:28px; margin-bottom:12px}
  .hero-text p{font-size:16px; margin-bottom:20px}
  .logo-crest{height:50px; margin-bottom:12px}
  .floating-request-btn{bottom:16px !important; right:16px !important; padding:10px 16px !important; font-size:13px !important}
  .hero-buttons a{width:100%; padding:12px 20px; font-size:15px}
  .services{padding:40px 16px 50px}
  .services h2{font-size:24px; margin-bottom:28px}
  .card{padding:20px; width:100%}
  .card h3{font-size:17px}
  .card p{font-size:14px; line-height:1.4}
  .about{padding:40px 16px}
  .about h2{font-size:24px; margin-bottom:20px}
  .about p{font-size:15px; margin-bottom:16px}
  .faq{padding:40px 16px}
  .faq h2{font-size:24px; margin-bottom:32px}
  .faq-category{margin-bottom:32px}
  .faq-category h3{font-size:20px; margin-bottom:20px}
  .faq-item{padding:20px}
  .faq-item h4{font-size:15px; margin-bottom:10px}
  .faq-item p{font-size:13px}
  .modal-content{margin:15% auto; padding:20px; width:96%}
  .modal h2{font-size:18px; margin-bottom:20px}
  .form-group{margin-bottom:16px}
  .form-group input, .form-group textarea{padding:10px; font-size:14px}
  .btn-submit{padding:12px 20px; font-size:15px}
}

/* Mobile Small - 320px */
@media (max-width:320px){
  .hero-text h1{font-size:24px; line-height:1.3}
  .hero-text p{font-size:15px}
  .logo-crest{height:40px; margin-bottom:10px}
  .floating-request-btn{bottom:12px !important; right:12px !important; padding:8px 14px !important; font-size:12px !important}
  .services h2, .about h2, .faq h2{font-size:22px}
  .card{padding:16px}
  .card h3{font-size:16px}
  .card p{font-size:13px}
  .faq-category h3{font-size:18px}
  .faq-item{padding:16px}
  .faq-item h4{font-size:14px}
  .faq-item p{font-size:12px}
  .modal-content{padding:16px}
  .form-group input, .form-group textarea{padding:8px; font-size:13px}
}

/* Hero logo crest */
.logo-crest{
  height: 120px;
  margin-bottom: 14px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}

/* Floating Request Talent Button */
.floating-request-btn{
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--gold);
  color: var(--blue);
  padding: 12px 18px;
  border-radius: 25px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(245, 176, 65, 0.4);
  z-index: 1000;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.floating-request-btn:hover{
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 25px rgba(245, 176, 65, 0.6);
  filter: brightness(1.1);
}