@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root {
  --main-bg: #f7f9fb;
  --nav-bg: #121316;
  --nav-highlight: #fff;
  --accent: #0857fa;
  --section-dark: #181a1e;
  --section-light: #fff;
  --gray: #ececec;
  --text: #222;
  --nav-font: 1rem;
  --footer-bg: #191a1f;
  --footer-text: #96a1af;
  --section-title: #0857fa;
  --section-subtitle: #1d1f24;
}

/* Core */
html { font-size: 16px; scroll-behavior: smooth;}
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  background: var(--main-bg);
  color: var(--text);
  margin: 0;
  line-height: 1.75;
}

/* Navigation Bar */
.header-bar {
  width: 100vw;
  background: var(--nav-bg);
  height: 63px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #191d21;
  position: sticky; top: 0; z-index: 999;
  justify-content: center;
}
.header-inner {
  width: 100vw; max-width: 1420px; display: flex;
  align-items: center; justify-content: space-between;
  margin: 0 auto; padding: 0 2vw;
}
.logo-box img { height: 29px; vertical-align: middle;}
.nav-main { display: flex; align-items: center; gap: 2rem; }
.nav-main a {
  color: var(--nav-highlight);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: var(--nav-font);
  font-weight: 500;
  transition: background .18s, color .18s;
}
.nav-main a.active, .nav-main a:hover {
  background: #e6f0fe; color: var(--accent);
}
.header-actions .header-action-btn {
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  font-weight:600;
  border: none;
  padding: 0.56em 1.4em;
  border-radius: 18px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.7em;
  box-shadow: 0 2px 8px #0957fa28;
}

/* HERO */
.hero-section {
  min-height: 590px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  text-align: left; background: #101215;
  color: #fff;
  overflow: hidden;
}
.hero-bg { position: absolute; width: 100vw; height: 100%; object-fit: cover; left:0; top:0; z-index:0; filter: brightness(.37);}
.hero-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(70deg,#16181e 65%,rgba(8,87,250,0.11) 100%); z-index: 1;}
.hero-inner { position: relative; z-index:2; max-width:660px; margin:2.7em 0 0 3vw;}
.hero-title { font-family:Inter,sans-serif;font-weight:700; font-size:2.25rem; color:#fff; margin-bottom: 1.05em; letter-spacing:.006em;}
.hero-tagline{font-size:1.17rem;color:#eaf3ff;max-width:540px;}
.hero-btn { background:var(--accent);color:#fff;border:none;font-size:1rem;font-weight:600;padding:0.7em 2em; border-radius:20px; text-decoration:none; box-shadow:0 1px 12px #075be930; margin-top:2.2em; display:inline-block;transition:filter .18s;}
.hero-btn:hover{filter:brightness(1.16);}

.section {width:100vw;max-width:1390px;margin:0 auto 3rem auto;padding:3.5em 3vw;}
.section-title{font-family:Inter,sans-serif;font-weight:700;font-size:2rem;color:var(--section-title);margin-bottom:1.2rem;letter-spacing:.007em;}
/* Why Cards */
.section > div[style*='flex']{flex-wrap:wrap;gap:2vw;}
.section > div[style*='background'], .icon-service, .testimonial-card {
  transition: box-shadow .2s;
}
.section > div[style*='background']:hover, .icon-service:hover, .testimonial-card:hover {
  box-shadow:0 5px 24px #0857fa14, 0 1px 10px #e7eaf128;
}
/* Process icons */
.icon-group{display:flex;gap:1.8rem;justify-content:center;flex-wrap:wrap;margin:2.2rem 0 1rem 0;}
.icon-service{
  width:154px;background:#f8fbff;border-radius:17px;padding:2.08rem 1.04rem;
  box-shadow:0 2px 12px #cee2ff36;color:#0857fa;text-align:center;
}
.icon-service > svg{height:34px;width:34px;margin-bottom:9px;}
.icon-service-title{font-weight:600;font-size:1.08rem;margin-bottom:.35em;}
.icon-service-desc{color:#0d294e;font-size:.98rem;}
/* Stats Milestones */
.section[data-bg="milestone"]{background:#f6fafd;}
/* Gallery */
.gallery-masonry{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px;margin:3rem auto 2rem auto;}
.gallery-masonry img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:15px;box-shadow:0 4px 18px #eaf3ff15;transition:filter .2s,transform .19s;filter:brightness(.85);}
.gallery-masonry img:hover{filter:brightness(1.05);transform:scale(1.045);}
.testimonials-slider{display:flex;gap:1.7vw;overflow-x:auto;padding:2.4rem 0;margin-bottom:3rem;}
.testimonial-card{min-width:320px;max-width:370px;background:#ffffff;border-radius:14px;box-shadow:0 2px 13px #cee2ff17;padding:2.1rem 1.1rem;color:#112330;}
.testimonial-text{font-size:1.09rem;font-family:Inter,sans-serif;font-style:italic;margin-bottom:1.05em;}
.testimonial-author{display:flex;align-items:center;gap:0.7em;font-size:.98rem;color:#0857fa;}
.testimonial-card img{height:33px;width:33px;border-radius:50%;}
/* Footer */
.page-footer{width:100vw;background:var(--footer-bg);color:var(--footer-text);padding:2.1rem 0;text-align:center;font-size:.99rem;border-top:1px solid #222;}
.footer-inner{max-width:1100px;margin:0 auto;}
.footer-logo{height:23px;margin-bottom:1.2em;}
.footer-social{display:flex;justify-content:center;gap:1.2em;margin:1em 0;}
.footer-social a{color:var(--accent);}
.footer-links{margin:1em 0;color:#b3bbce;}
.footer-address{margin-bottom:0.95em;color:#b3bbce;}
.copy{margin-top:.5em;}
/* Responsive */
@media(max-width:980px){
  .header-inner{padding:0 1vw;}
  .nav-main{gap:1.2em;}
}
@media(max-width:720px){
  .section{padding:2.1em .6em;}
  .gallery-masonry{grid-template-columns:1fr;}
  .hero-title{font-size:1.18rem;}
  .nav-main a{font-size:0.98rem;padding:8px 8px;}
}
.section-animate {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity .8s cubic-bezier(.25,.8,.25,1), transform .75s cubic-bezier(.27,.77,.28,1);
}
.section-animate.visible {
  opacity: 1;
  transform: translateY(0);
}
.parallax-bg {
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}
.faq-list { max-width:800px;margin:2.2em auto 0 auto;}
.faq-item { border-radius:8px; margin-bottom:1.1em; background:#f7fafd; box-shadow:0 3px 19px #dbeafe18;}
.faq-q { cursor:pointer; font-weight:600; font-size:1.08rem; padding:1.05em 2.3em 1.05em 1.1em; position:relative; color:#0857fa; }
.faq-q:after {
  content: '';
  border: solid #0857fa;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
  position:absolute; right:1.1em; top:1.3em;
  transform: rotate(45deg);
  transition:.25s;
}
.faq-item.open .faq-q:after { transform:rotate(-135deg);}
.faq-a { max-height:0; overflow: hidden; transition:max-height .4s cubic-bezier(.37,1.2,.57,1); padding:0 1.1em;}
.faq-item.open .faq-a { max-height:150px; padding-bottom:1.1em; }