/* ===================== ROOT — LIGHT THEME (matches mockup) ===================== */
:root {
  --primary-blue: #013FAC;
  --dark-blue: #002B7A;
  --whatsapp-green: #1DA851;
  --whatsapp-green-dark: #128C7E;
  --orange-price: #FF6B00;
  --heading-color: #111827;
  --text-color: #6B7280;
  --bg-color: #F8FAFC;
  --card-white: #FFFFFF;
  --header-height: 72px;
  --bottom-bar-height: 68px;
  --radius-btn: 12px;
  --radius-card: 16px;
  --shadow-soft: 0 4px 20px rgba(17, 24, 39, 0.08);
  --shadow-softer: 0 2px 14px rgba(17, 24, 39, 0.06);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', sans-serif;
  background-color: #fff;
  color: var(--text-color);
  margin: 0;
  padding-top: var(--header-height);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; }
.text-brand-blue { color: var(--primary-blue); }

/* ===================== BUTTONS ===================== */
.btn-primary-brand {
  background-color: var(--whatsapp-green);
  color: #fff; border: none; border-radius: var(--radius-btn);
  font-weight: 700; font-size: 0.95rem; padding: 0.85rem 1.25rem;
  text-shadow: 0 1px 1px rgba(0,0,0,.12);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
  position: relative; overflow: hidden;
}
.btn-primary-brand:hover, .btn-primary-brand:focus {
  background-color: var(--whatsapp-green-dark); color: #fff; transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(29,168,81,.35);
}
.icon-circle-white {
  width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.2);
  display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink:0;
}
.btn-secondary-brand {
  background-color: #fff; color: var(--primary-blue); border: 1.5px solid var(--primary-blue);
  border-radius: var(--radius-btn); font-weight: 600; font-size: 0.95rem; padding: 0.85rem 1.25rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .15s ease, background-color .15s ease;
}
.btn-secondary-brand:hover, .btn-secondary-brand:focus { background-color:#EEF4FE; color:var(--primary-blue); transform: translateY(-2px); }
.btn-outline-brand {
  background-color:#fff; color:var(--primary-blue); border:1.5px solid var(--primary-blue);
  border-radius:10px; font-weight:600; font-size:.88rem; padding:.55rem 1rem;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.btn-outline-brand:hover, .btn-outline-brand:focus { background-color:var(--primary-blue); color:#fff; transform: translateY(-1px); }
.btn-primary-brand::after,.btn-secondary-brand::after,.btn-outline-brand::after{
  content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.5);
  width:0;height:0;top:50%;left:50%;transform:translate(-50%,-50%);
  transition:width .4s ease,height .4s ease,opacity .6s ease;opacity:0;pointer-events:none;
}
.btn-primary-brand:active::after,.btn-secondary-brand:active::after,.btn-outline-brand:active::after{
  width:220px;height:220px;opacity:1;transition:0s;
}

/* ===================== HEADER ===================== */
.site-header {
  position: fixed; top:0; left:0; right:0; height: var(--header-height);
  background-color:#fff; box-shadow: var(--shadow-soft); z-index:1000; display:flex; align-items:center;
}
.header-inner { display:flex; align-items:center; justify-content:space-between; width:100%; padding:0 16px; }
.header-logo { display:flex; align-items:center; gap:8px; }
.logo-img { height:44px; width:auto; }
.logo-text-wrap { display:flex; flex-direction:column; line-height:1; }
.logo-word { font-weight:800; font-size:1.15rem; color:var(--primary-blue); letter-spacing:.02em; }
.logo-tagline { font-size:.5rem; font-weight:500; color:#9CA3AF; letter-spacing:.02em; white-space:nowrap; }
.hamburger-btn {
  width:40px; height:40px; border:none; background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer;
}
.hamburger-btn span { display:block; width:22px; height:2.5px; background-color:var(--primary-blue); border-radius:2px; transition: transform .25s ease, opacity .25s ease; }
.hamburger-btn.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger-btn.active span:nth-child(2){ opacity:0; }
.hamburger-btn.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ===================== MOBILE MENU ===================== */
.mobile-menu-overlay{ position:fixed; inset:0; background:rgba(17,24,39,.45); z-index:1040; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.mobile-menu-overlay.show{ opacity:1; pointer-events:auto; }
.mobile-menu{
  position:fixed; top:0; right:0; height:100%; width:78%; max-width:320px; background:#fff; z-index:1050;
  padding:20px; transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column;
}
.mobile-menu.show{ transform:translateX(0); }
.mobile-menu-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid #EEF1F5; }
.menu-close-btn{ border:none; background:transparent; font-size:1.25rem; color:var(--heading-color); }
.mobile-menu-links{ list-style:none; padding:0; margin:20px 0 0; }
.mobile-menu-links li + li{ margin-top:6px; }
.mobile-menu-links a{ display:block; padding:12px 8px; color:var(--heading-color); font-weight:500; border-radius:8px; transition:background-color .15s ease; }
.mobile-menu-links a:hover{ background-color: var(--bg-color); }

/* ===================== HERO ===================== */
.hero-section{ padding:20px 0 24px; background: linear-gradient(180deg,#FFFFFF 0%, #F2F7FE 55%, #F8FAFC 100%); }

.hero-flex{
  display:flex;
  align-items:flex-start;
  gap: 4%;
  margin-bottom:18px;
}
.hero-text-col{ flex: 0 0 58%; max-width:58%; min-width:0; }
.hero-image-col{ flex: 0 0 38%; max-width:38%; min-width:0; }

.hero-badge{
  font-size: clamp(0.56rem, 2.5vw, 0.85rem);
  font-weight:700; letter-spacing:0; color:var(--primary-blue);
  margin-bottom:10px; text-transform:uppercase; line-height:1.5; white-space:nowrap;
}
.hero-badge .pipe{ color:#A9C6F5; margin:0 1px; }
.hero-heading{
  font-weight:800; font-size: clamp(1.3rem, 5.6vw, 2.6rem);
  line-height:1.16; color:var(--heading-color); margin-bottom:10px;
}
.hero-paragraph{
  font-size: clamp(0.68rem, 2.9vw, 1rem);
  color:var(--text-color); margin-bottom:16px; line-height:1.5;
}
.hero-cta-group{ display:flex; flex-direction:column; gap:10px; }
.hero-cta-group .btn-cta{
  width:100%; font-size: clamp(0.66rem, 3vw, 0.95rem);
  padding:.7rem .75rem; gap:6px; white-space:nowrap;
}
.hero-cta-group .icon-circle-white{ width:20px; height:20px; font-size:.65rem; flex-shrink:0; }
.btn-secondary-brand.btn-cta{ justify-content:space-between; }

.hero-image-wrap{ position:relative; display:flex; align-items:flex-end; justify-content:center; height:auto; min-height:160px; }
.hero-blue-circle{
  position:absolute; top:-8px; right:-10%; width:92%; padding-top:92%; border-radius:50%;
  background: radial-gradient(circle at 45% 40%, #DCEAFD 0%, #C9DFFB 70%, #B9D5F9 100%); z-index:0;
}
.hero-worker-img{ position:relative; z-index:1; width:100%; height:auto; margin:0 auto; object-fit:contain; }

/* ===================== FEATURE STRIP ===================== */
.feature-strip-section{ padding:8px 0 32px; }
.feature-card{ background-color:var(--card-white); border-radius:var(--radius-card); box-shadow:var(--shadow-soft); padding:20px 6px; }
.feature-item{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.feature-icon-circle{
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--primary-blue);
  display:flex; align-items:center; justify-content:center; color:var(--primary-blue); font-size:1.1rem;
}
.feature-label{ font-size:.68rem; font-weight:600; color:var(--heading-color); line-height:1.3; }

/* ===================== SECTION HEADINGS ===================== */
.section-heading-wrap{ margin-bottom:22px; }
.section-heading{ font-weight:700; font-size:1.5rem; color:var(--heading-color); margin-bottom:8px; }
.heading-underline{ display:inline-block; width:32px; height:3px; border-radius:4px; background-color:var(--primary-blue); }

/* ===================== SERVICES ===================== */
.services-section{ padding:24px 0 12px; }
.services-slider{
  display:flex; gap:9px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 4px 8px; margin:0 -4px; -webkit-overflow-scrolling:touch;
}
.services-slider::-webkit-scrollbar{ display:none; }
.service-card{
  flex:0 0 auto; width: clamp(84px, 24vw, 108px); scroll-snap-align:start; text-align:center;
  background-color:var(--card-white); border-radius:12px; box-shadow:var(--shadow-softer);
  padding:10px 6px; transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.service-icon-circle{
  width:34px; height:34px; border-radius:50%; background-color:var(--primary-blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.85rem; margin:0 auto 7px;
}
.service-title{ font-weight:700; font-size:.66rem; color:var(--heading-color); margin-bottom:3px; line-height:1.2; }
.service-desc{ font-size:.53rem; color:var(--text-color); margin-bottom:6px; min-height:24px; line-height:1.2; }
.service-price{ font-weight:700; font-size:.76rem; color:var(--orange-price); margin-bottom:7px; }
.service-card .btn-outline-brand{ font-size:.56rem; padding:.3rem .3rem; border-width:1px; border-radius:7px; }

.slider-dots{ display:flex; justify-content:center; gap:6px; padding:14px 0 8px; }
.slider-dots .dot{ width:6px; height:6px; border-radius:50%; background-color:#D6DEE9; transition: all .2s ease; }
.slider-dots .dot.active{ background-color: var(--primary-blue); width:16px; border-radius:4px; }

/* ===================== COMING SOON ===================== */
.coming-soon-section{ padding:8px 0 36px; }
.coming-soon-row{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }
.coming-soon-card{
  flex:0 0 auto; width: clamp(90px, 26vw, 114px); text-align:center;
  background-color:#F3F6FB; border:1px dashed #C7D2E3; border-radius:12px;
  padding:14px 8px;
}
.coming-soon-card .service-title{ margin-bottom:8px; color:var(--text-color); }
.muted-icon{ background-color:#AEB9CC; }
.coming-soon-badge{
  display:inline-block; font-size:.58rem; font-weight:700; color:var(--text-color);
  background-color:#E4E9F2; border-radius:20px; padding:3px 9px; letter-spacing:.01em;
}
@media (min-width:768px){
  .coming-soon-card{ width: clamp(150px, 18vw, 180px); padding:22px 14px; }
  .coming-soon-card .service-title{ font-size:.95rem; }
  .coming-soon-badge{ font-size:.72rem; padding:4px 12px; }
}

/* ===================== HOW IT WORKS ===================== */
.how-it-works-section{ padding:20px 0 40px; }
.timeline-wrap{ display:flex; overflow-x:auto; gap:6px; position:relative; padding:8px 4px 12px; }
.timeline-connector{ position:absolute; top:38px; left:56px; right:56px; border-top:2px dashed #C7D8F3; z-index:0; }
.timeline-step{ flex:1 0 25%; min-width:110px; text-align:center; position:relative; z-index:1; padding:0 6px; }
.timeline-icon-circle{
  width:60px; height:60px; border-radius:50%; background-color:#E3EEFE; color:var(--primary-blue);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin:0 auto; position:relative;
}
.step-badge{
  display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
  background-color:var(--primary-blue); color:#fff; font-size:.65rem; font-weight:700;
  margin: -10px auto 10px; position:relative; z-index:2; border:2px solid #fff;
}
.step-title{ font-size:.82rem; font-weight:700; color:var(--heading-color); margin-bottom:4px; line-height:1.3; }
.step-desc{ font-size:.68rem; color:var(--text-color); line-height:1.35; }

/* ===================== BOTTOM FIXED BAR ===================== */
.bottom-bar-spacer{ height: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom,0px)); }
.bottom-fixed-bar{
  position:fixed; bottom:0; left:0; right:0; height:var(--bottom-bar-height); background-color:var(--primary-blue);
  display:flex; align-items:center; justify-content:space-between; z-index:900;
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom,0px)); gap:12px;
  box-shadow: 0 -4px 16px rgba(8,60,156,.2);
}
.bottom-bar-whatsapp{ display:flex; align-items:center; gap:10px; color:#fff; flex:1; min-width:0; }
.bottom-bar-whatsapp .icon-circle-white{ width:32px; height:32px; font-size:1rem; background:rgba(255,255,255,.2); }
.bar-text{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.bar-title{ font-weight:700; font-size:.9rem; white-space:nowrap; }
.bar-subtitle{ font-size:.68rem; color:#D9E7FE; white-space:nowrap; }
.bottom-bar-call{
  display:flex; align-items:center; gap:8px; color:#fff; font-weight:600; font-size:.85rem;
  border:1.5px solid rgba(255,255,255,.6); border-radius:10px; padding:.6rem 1rem; white-space:nowrap;
  transition: background-color .15s ease;
}
.bottom-bar-call:hover{ background-color: rgba(255,255,255,.12); color:#fff; }

/* ===================== FOOTER (kept dark navy — professional contrast band) ===================== */
.site-footer{
  background: linear-gradient(160deg, #0A2A63 0%, #083C9C 100%);
  padding: 44px 0 0;
  color: #C9D9F5;
}
.footer-top{
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 32px;
  text-align: center;
}
.footer-col-title{
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 14px;
}
.footer-brand-col .footer-logo{ height: 38px; width: auto; margin: 0 auto 12px; }
.footer-tagline{ color: #9DC0F7; font-size: .78rem; font-weight: 600; margin-bottom: 10px; }
.footer-about{ font-size: .8rem; line-height: 1.6; color: #B9CDF2; margin: 0 auto 16px; max-width: 340px; }
.footer-social{ display: flex; gap: 10px; justify-content: center; }
.footer-social a{
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: .9rem;
  transition: background-color .15s ease, border-color .15s ease;
}
.footer-social a:hover{ background-color: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }

.footer-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; }
.footer-links a{ color:#C9D9F5; font-size:.85rem; font-weight:500; transition: color .15s ease; }
.footer-links a:hover{ color:#fff; }

.footer-contact{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; align-items:center; gap:12px; }
.footer-contact li{ display:flex; align-items:center; gap:10px; font-size:.85rem; color:#C9D9F5; }
.footer-contact li i{ color:#9DC0F7; font-size:.95rem; width:16px; text-align:center; flex-shrink:0; }
.footer-contact a{ color:#C9D9F5; font-weight:500; }
.footer-contact a:hover{ color:#fff; }

.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.footer-copy{ font-size:.75rem; color:#9DB4E0; margin:0; }
.footer-credit{ font-size:.78rem; color:#fff; margin:0; font-weight:500; }
.footer-credit a{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.footer-credit a:hover{ color:#9DC0F7; }

@media (min-width:768px){
  .footer-top{ flex-direction: row; justify-content: space-between; text-align: left; }
  .footer-col{ flex: 1; }
  .footer-brand-col{ flex: 1.3; }
  .footer-brand-col .footer-logo{ margin: 0 0 12px; }
  .footer-about{ margin: 0 0 16px; }
  .footer-social{ justify-content: flex-start; }
  .footer-links{ align-items: flex-start; }
  .footer-contact{ align-items: flex-start; }
  .footer-bottom{ flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ===================== ANIMATIONS ===================== */
.fade-up{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.fade-up.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .fade-up{opacity:1;transform:none;transition:none;} html{scroll-behavior:auto;} }

/* ===================== RESPONSIVE ===================== */
@media (min-width:768px){
  .hero-flex{ align-items:center; gap:24px; }
  .hero-text-col{ flex-basis:54%; max-width:54%; }
  .hero-image-col{ flex-basis:42%; max-width:42%; }
  .hero-cta-group{ flex-direction:row; }
  .hero-cta-group .btn-cta{ width:auto; white-space:normal; }
  .hero-cta-group .icon-circle-white{ width:24px; height:24px; font-size:.8rem; }
  .hero-badge{ margin-bottom:14px; }
  .hero-paragraph{ margin-bottom:22px; max-width:460px; }
  .hero-blue-circle{ width:300px; height:300px; padding-top:0; }
  .feature-card{ padding:26px 16px; }
  .feature-icon-circle{ width:52px; height:52px; font-size:1.3rem; }
  .feature-label{ font-size:.78rem; }
  .service-card{ width: clamp(165px, 21vw, 195px); padding:18px 14px; }
  .service-icon-circle{ width:52px; height:52px; font-size:1.3rem; margin-bottom:12px; }
  .service-title{ font-size:.95rem; }
  .service-desc{ font-size:.74rem; min-height:34px; }
  .service-price{ font-size:1.1rem; }
  .service-card .btn-outline-brand{ font-size:.82rem; padding:.5rem .75rem; }
  .section-heading{ font-size:1.85rem; }
}
@media (min-width:1024px){
  body{ padding-top:0; }
  .site-header{ position:sticky; }
  .hamburger-btn{ display:none; }
  .header-inner::after{
    content:"Home  •  Our Services  •  How It Works  •  Contact";
    font-size:.85rem; color:var(--heading-color); font-weight:500; letter-spacing:.02em;
  }
  .hero-section{ padding:64px 0; }
  .hero-heading{ font-size:3.2rem; }
  .hero-paragraph{ font-size:1.05rem; }
  .hero-blue-circle{ width:380px; height:380px; }
  .services-slider{ overflow-x:visible; flex-wrap:wrap; justify-content:center; }
  .service-card{ width:22%; }
  .slider-dots{ display:none; }
  .timeline-wrap{ padding:8px 40px 12px; }
}
@media (min-width:1280px){ .container{ max-width:1140px; } .hero-heading{ font-size:3.5rem; } }
@media (min-width:1440px){ .container{ max-width:1240px; } }

/* SEO internal service links — preserve existing card typography */
.internal-service-link{color:inherit;text-decoration:none;}
.internal-service-link:hover{color:inherit;text-decoration:underline;}