:root{
  --blue:#1877F2;
  --light-grey:#f7f7f7;
  --white:#fff;
  --dark:#1a1a1a;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:"Poppins",sans-serif;}
body{background:var(--white);color:var(--dark);line-height:1.6;}

/* NAV */
.navbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:var(--white);box-shadow:0 2px 6px rgba(0,0,0,.05);position:sticky;top:0;z-index:100;transition:background .3s}
.navbar.scrolled{background:rgba(255,255,255,.9);backdrop-filter:blur(8px)}
.logo{font-weight:700;font-size:1.6rem}
.logo span{color:var(--blue)}
.nav-links{display:flex;gap:1.5rem;list-style:none}
.nav-links a{text-decoration:none;color:var(--dark);font-weight:500;transition:color .3s}
.nav-links a:hover,.nav-links a.active{color:var(--blue)}
.btn-primary{background:var(--blue);color:var(--white);padding:.7rem 1.2rem;border-radius:6px;text-decoration:none;font-weight:600;transition:.3s;display:inline-block;text-align:center}
.btn-primary:hover{background:#0d5ed7}
.btn-secondary{display:inline-block;background:var(--white);border:2px solid var(--blue);color:var(--blue);padding:.7rem 1.2rem;border-radius:6px;text-decoration:none;font-weight:600;transition:.3s}
.btn-secondary:hover{background:var(--blue);color:var(--white)}
.full{width:100%}

/* GENERIC SECTIONS */
.page-hero,.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 10%;background:var(--light-grey)}
.page-hero h1,.hero h1{font-size:2.5rem;margin-bottom:1rem}
.hero h1 span,.page-hero h1 span{color:var(--blue)}
/* YOUR REQUESTED TWEAK */
.page-hero p,.hero p{color:#555;max-width:1000px;padding:20px;}
/* also requested: hero image smaller */
.hero-image img{max-width:250px;width:100%;border-radius:10px;margin-top:2rem}

/* HOME bits (still compatible) */
.features{padding:4rem 10%;text-align:center}
.feature-grid{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}
.feature-card{background:var(--light-grey);padding:2rem;border-radius:10px;width:300px;box-shadow:0 4px 10px rgba(0,0,0,.05);transition:transform .3s}
.feature-card:hover{transform:translateY(-5px)}

/* ===== SERVICES (kept exactly like your “perfect” version) ===== */
.services-hero{
  display:grid;grid-template-columns: 1.1fr .9fr;gap:2.2rem;padding:4rem 10%;
  background:linear-gradient(180deg,var(--light-grey),#fff);align-items:center;
}
.sh-left h1{font-size:2.4rem;line-height:1.15;margin-bottom:1rem}
.sh-left h1 span{color:var(--blue)}
.sh-left p{color:#4d4d4d;max-width:640px;margin-bottom:1rem}
.sh-badges{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 1.2rem}
.badge{background:#eaf1ff;border:1px solid #d5e4ff;color:#0f3d99;padding:.45rem .7rem;border-radius:999px;font-size:.9rem}
.sh-stats{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.3rem}
.chip{background:#fff;border:1px solid #e9eefb;border-left:4px solid var(--blue);border-radius:10px;padding:.7rem .9rem;min-width:150px}
.chip strong{display:block;font-size:1.1rem}
.chip span{font-size:.85rem;color:#666}
.sh-cta{display:flex;gap:.8rem;flex-wrap:wrap}
.sh-right{position:relative;min-height:260px}
.stack-card{background:#fff;border:1px solid #eef1f7;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.06);padding:1rem 1.1rem}
.sc-main{position:relative;z-index:2}
.sc-float{position:absolute;top:-16px;right:18px}
.sc-float-2{position:absolute;bottom:-14px;left:10%}
.sc-float-3{position:absolute;top:40%;right:-10px}
.services-cards{display:flex;justify-content:center;align-items:stretch;flex-wrap:wrap;gap:2rem;padding:3rem 10%}
.service-card.enhanced{background:#fff;width:320px;padding:2rem;border-radius:12px;box-shadow:0 6px 15px rgba(0,0,0,.06);transition:transform .3s, box-shadow .3s;text-align:left;border-top:4px solid #e9eefb}
.service-card.enhanced:hover{transform:translateY(-6px);box-shadow:0 12px 24px rgba(0,0,0,.1)}
.service-icon{font-size:1.8rem;margin-bottom:.6rem}
.service-points{margin-top:.7rem;padding-left:1rem;color:#4d4d4d}
.service-points li{margin:.35rem 0;list-style:disc}
.cta-section{text-align:center;background:var(--blue);color:#fff;padding:3rem 1rem}
.cta-section h2{margin-bottom:.6rem}

/* ===== ABOUT (refined) ===== */
.about-hero{padding:4rem 10%;text-align:center;background:linear-gradient(180deg,var(--light-grey),#fff)}
.about-hero h1{font-size:2.2rem;margin-bottom:.6rem}
.about-hero p{color:#4d4d4d}

.about-split-2{padding:3.5rem 10%;display:grid;grid-template-columns: 1.1fr .9fr;gap:1.5rem}
.card{background:#fff;border:1px solid #eef1f7;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.05);padding:1.6rem}
.as2-text h2{margin-bottom:.4rem}
.as2-points{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1rem}
.as2-points .mini{background:#f2f6ff;border:1px solid #e3ecff;border-left:4px solid var(--blue);border-radius:10px;padding:.6rem .8rem;min-width:140px}
.as2-media .illus{position:relative;height:220px;background:linear-gradient(180deg,#eaf1ff,#ffffff);border-radius:10px;overflow:hidden;border:1px solid #e0e9ff}
.as2-media .bubble{position:absolute;border-radius:50%;opacity:.5;background:#cfe0ff;filter:blur(1px)}
.as2-media .bubble.one{width:90px;height:90px;top:20px;left:18px}
.as2-media .bubble.two{width:60px;height:60px;bottom:28px;right:22px}
.as2-media .bubble.three{width:40px;height:40px;top:50%;right:35%}
.calendar{position:absolute;inset:18px;background:#fff;border:1px solid #e0e6f5;border-radius:10px;box-shadow:0 6px 12px rgba(0,0,0,.06)}
.calendar .dot{width:6px;height:6px;background:var(--blue);border-radius:50%;display:inline-block;margin:12px 6px 0 6px}
.calendar .row{height:18%;margin:8px;border-radius:6px;background:#eef3ff}
.as2-media .cap{font-size:.9rem;color:#666;margin-top:.8rem;text-align:center}

.about-values-2{padding:2.5rem 10%;display:grid;grid-template-columns: repeat(3, 1fr);gap:1.2rem}
.about-values-2 .val h3{color:var(--blue);margin-bottom:.3rem}

.about-cta{text-align:center;padding:3rem 10%}

/* ===== CONTACT (fresh) ===== */
.contact-hero{
  padding:4rem 10%;text-align:center;
  background: radial-gradient(80% 100% at 50% 0%, #eaf1ff 0%, #ffffff 60%);
}
.contact-hero .chip{
  display:inline-block;background:#eaf1ff;border:1px solid #d9e6ff;color:#0f3d99;
  padding:.35rem .7rem;border-radius:999px;margin-bottom:.6rem;font-weight:600;
}
.contact-hero h1{font-size:2.2rem;margin-bottom:.4rem}

.contact-shell{
  padding:3rem 10%;
  display:grid;grid-template-columns: .9fr 1.1fr;gap:1.5rem;align-items:start;
}
.contact-side.card{position:relative}
.list{margin: .4rem 0 1rem 1.1rem;color:#4d4d4d}
.list li{margin:.25rem 0}
.divider{height:1px;background:#e9eefb;margin:1rem 0}
.socials{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
.pill{border:1px solid #dfe8ff;background:#f3f7ff;color:#234cbb;padding:.35rem .7rem;border-radius:999px;text-decoration:none;font-weight:600}

.contact-glass{
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,.75);
  border:1px solid #e9eefb;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  border-radius:14px;
  padding:1.6rem;
}
.fg{position:relative;margin:1rem 0}
.fg input,.fg textarea{
  width:100%;padding:1rem .9rem;border:1px solid #d9d9d9;border-radius:10px;background:#fff;font-size:1rem;outline:none;
}
.fg label{
  position:absolute;left:12px;top:12px;background:#fff;padding:0 .35rem;color:#777;transition:all .15s ease;font-size:.95rem;
}
.fg input:focus + label,
.fg input:not(:placeholder-shown) + label,
.fg textarea:focus + label,
.fg textarea:not(:placeholder-shown) + label{
  top:-10px;font-size:.78rem;color:var(--blue);
}
.fg textarea{resize:vertical;min-height:140px}
.fine-print{font-size:.85rem;color:#666;margin-top:.6rem}

.contact-cta{
  text-align:center;padding:3rem 10%;
  background:linear-gradient(180deg,#ffffff,#f7f7f7);
}

/* FOOTER */
.footer{background:var(--blue);color:#fff;text-align:center;padding:2rem;margin-top:2rem}

/* RESPONSIVE */
@media(max-width:1024px){
  .services-hero{grid-template-columns:1fr;gap:1.4rem}
  .contact-shell{grid-template-columns:1fr}
  .about-split-2{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav-links,.navbar .btn-primary{display:none}
  .page-hero h1,.hero h1{font-size:2rem}
}
@media(max-width:480px){
  .services-cards,.features,.about-hero,.about-split-2,.about-values-2,.contact-shell{padding:3rem 1.2rem}
  .about-values-2{grid-template-columns:1fr}
  .service-card.enhanced{width:100%}
}

/* ===== ABOUT (simple redesign) ===== */
.about-hero-min{
  padding:4rem 10%;
  text-align:center;
  background:linear-gradient(180deg,var(--light-grey),#fff);
}
.about-hero-min h1{
  font-size:2.2rem;
  margin-bottom:.6rem;
}
.about-hero-min p{
  color:#4d4d4d;
  max-width:800px;
  margin:0 auto;
}

.about-simple{
  padding:3rem 10%;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1.2rem;
}
.as-card{
  background:#fff;
  border:1px solid #eef1f7;
  border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
  padding:1.6rem;
}
.as-card h2{ margin-bottom:.4rem; }
.bullets{ margin-left:1.1rem; color:#4d4d4d; }
.bullets li{ margin:.35rem 0; list-style:disc; }

.about-principles{
  padding:2.5rem 10%;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:1rem;
}
.pill-box{
  background:#f3f7ff;
  border:1px solid #dfe8ff;
  border-left:4px solid var(--blue);
  border-radius:12px;
  padding:1.2rem 1.1rem;
}
.pill-box h3{ color:var(--blue); margin-bottom:.2rem; }
.pill-box p{ color:#4d4d4d; }

.timeline-lite{
  padding:2.5rem 10%;
  max-width:900px;
  margin:0 auto;
  border-top:1px solid #f0f2f7;
  border-bottom:1px solid #f0f2f7;
}
.tl-row{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  padding:1rem 0;
}
.dot{
  width:12px; height:12px; border-radius:50%;
  background:var(--blue);
  margin-top:.5rem;
  flex:0 0 12px;
}
.tl-card{
  background:#fff;
  border:1px solid #eef1f7;
  border-radius:12px;
  padding:1rem 1.1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
}
.tl-card h4{ margin-bottom:.25rem; }

.about-cta-min{
  text-align:center;
  padding:3rem 10%;
}

/* ===== RESPONSIVE tweaks for About ===== */
@media (max-width: 1024px){
  .about-simple{ grid-template-columns:1fr; }
  .about-principles{ grid-template-columns:1fr; }
}
@media (max-width: 480px){
  .about-hero-min, .about-simple, .about-principles, .timeline-lite, .about-cta-min{
    padding:3rem 1.2rem;
  }
}




/* ===========================
   ABOUT (FLUID VERSION) – ADD-ONLY
   =========================== */

/* Fluid hero with soft wave and pills */
.about-hero-fluid{
  position:relative;
  background: radial-gradient(90% 120% at 50% 0%, rgba(24,119,242,0.12) 0%, var(--light-grey) 55%, var(--white) 100%);
  padding:4rem 10% 6rem;
  text-align:center;
}
.ahf-inner{ max-width:1000px; margin:0 auto; }
.about-hero-fluid h1{ font-size:2.3rem; margin-bottom:.6rem; color:#111; }
.about-hero-fluid p{ max-width:900px; margin:0 auto; color:#333; }
.ahf-pills{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin-top:1.1rem; }
.ahf-pills .pill{
  background: rgba(24,119,242,0.08);
  border:1px solid rgba(24,119,242,0.25);
  color:#0f4fb3;
  padding:.5rem .8rem;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
}
.wave-bottom{
  position:absolute; left:0; right:0; bottom:-1px; height:64px;
  background: radial-gradient(60% 80% at 50% -40%, rgba(24,119,242,0.18), rgba(24,119,242,0.0) 70%);
  mask-image: radial-gradient(100% 100% at 50% 0, black 60%, transparent 61%);
}

/* Story section: flowing two-column (no boxes) */
.about-story{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:2rem;
  align-items:center;
  padding:3.5rem 10%;
  background: var(--white);
}
.about-story .story-text h2{ color:#111; margin-bottom:.4rem; }
.about-story .story-text p{ color:#333; margin:.35rem 0; }
.about-story .mini-stats{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.8rem; }
.about-story .stat{
  background: var(--light-grey);
  border:1px solid rgba(24,119,242,0.15);
  border-radius:999px;
  padding:.55rem .9rem;
}
.about-story .stat strong{ color:#0f4fb3; }
.about-story .stat span{ color:#333; margin-left:.35rem; }

/* Abstract visual */
.story-visual{
  position:relative; height:260px;
  background: linear-gradient(180deg, rgba(24,119,242,0.10), rgba(24,119,242,0.03));
  border:1px solid rgba(24,119,242,0.18);
  border-radius:22px;
  overflow:hidden;
}
.story-visual .ring{
  position:absolute; border:2px solid rgba(24,119,242,0.25); border-radius:50%;
  filter:blur(.2px);
}
.story-visual .ring-1{ width:300px;height:300px; left:-60px; top:-80px; }
.story-visual .ring-2{ width:220px;height:220px; right:-40px; top:30px; }
.story-visual .ring-3{ width:160px;height:160px; left:35%; bottom:-60px; }
.story-visual .cal{
  position:absolute; inset:22px;
  background: var(--white);
  border:1px solid rgba(24,119,242,0.22);
  border-radius:14px;
}
.story-visual .cal-bar{ height:10px; margin:10px; background: rgba(24,119,242,0.18); border-radius:6px; }
.story-visual .cal-row{ height:22%; margin:10px; background: var(--light-grey); border-radius:10px; }

/* Principles: light, inline chips */
.about-principles-fluid{
  padding:2.8rem 10%;
  background: linear-gradient(180deg, var(--white), var(--light-grey));
  text-align:center;
}
.about-principles-fluid h2{ margin-bottom:.8rem; color:#111; }
.principles-list{
  list-style:none; display:flex; gap:1.2rem; flex-wrap:wrap; justify-content:center;
}
.principles-list li{
  background: var(--white);
  border:1px solid rgba(24,119,242,0.18);
  padding:.8rem 1rem;
  border-radius:999px;
  color:#333;
}
.principles-list li .dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--blue); display:inline-block; margin-right:.5rem;
}

/* Process: horizontal flow with connectors */
.about-process{
  padding:3rem 10%;
  background: var(--white);
}
.about-process .flow{ display:flex; align-items:center; justify-content:center; gap:.9rem; flex-wrap:wrap; }
.about-process .step{ text-align:center; max-width:260px; }
.about-process .node{
  width:18px;height:18px;border-radius:50%;
  background: var(--blue);
  margin:0 auto .5rem;
}
.about-process .step h3{ color:#111; margin-bottom:.25rem; }
.about-process .step p{ color:#333; }
.about-process .connector{
  width:72px;height:2px;
  background: linear-gradient(90deg, rgba(24,119,242,0.0), rgba(24,119,242,0.6), rgba(24,119,242,0.0));
  border-radius:2px;
}

/* CTA */
.about-cta-fluid{
  padding:3rem 10% 4rem;
  text-align:center;
  background: radial-gradient(70% 100% at 50% 0, rgba(24,119,242,0.10), var(--white) 70%);
}

/* Responsive only for new fluid classes */
@media (max-width: 1024px){
  .about-story{ grid-template-columns:1fr; }
  .story-visual{ height:220px; }
}
@media (max-width: 600px){
  .about-hero-fluid{ padding:3.2rem 1.2rem 4.5rem; }
  .about-story, .about-principles-fluid, .about-process, .about-cta-fluid{ padding:3rem 1.2rem; }
  .principles-list{ gap:.6rem; }
  .about-process .connector{ width:48px; }
}



/* ===========================
   NAV IMPROVEMENTS (append-only)
   =========================== */

/* More breathing room across the header */
.navbar{
  padding: 1rem 10%; /* was 1rem 2rem; this only affects the navbar */
}

/* Bigger hit area + spacing between links */
.navbar .nav-links{
  gap: 2rem; /* was 1.5rem */
  align-items: center;
}

/* Bold by default, smoother hover, better click target */
.navbar .nav-links a{
  display: inline-block;
  font-weight: 600;          /* bold by default */
  padding: .4rem .25rem;     /* larger hit area without shifting layout */
  letter-spacing: .02em;
  line-height: 1.2;
}

/* Extra-bold + active underline for the current page */
.navbar .nav-links a.active{
  font-weight: 800;          /* extra bold for current page */
  position: relative;
  color: var(--blue);
}
.navbar .nav-links a.active::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;              /* sits just below the text */
  height: 3px;
  background: var(--blue);
  border-radius: 2px;
}

/* Slightly stronger hover without layout shift */
.navbar .nav-links a:hover{
  color: var(--blue);
  transform: translateY(-1px);
}

/* Keep the header CTA from crowding the nav */
.navbar > .btn-primary{
  margin-left: 1rem;
}

/* Optional: when scrolled, keep spacing tidy */
.navbar.scrolled{
  padding-top: .8rem;
  padding-bottom: .8rem;
}

/* Small screens: nav links are hidden by your existing CSS,
   but keep the button spacing consistent if shown */
@media (max-width: 768px){
  .navbar > .btn-primary{
    margin-left: 0;
  }
}