/* ============================================================
   PakBiz Solutions — Premium Business Website Stylesheet
   ------------------------------------------------------------
   Table of Contents
   01. CSS Variables (Theme Customization)
   02. Reset & Base
   03. Utility Classes (Container, Buttons, Section Headings)
   04. Top Bar
   05. Header / Navigation
   06. Hero Section
   07. About Section
   08. Services Section
   09. Why Choose Us Section
   10. Portfolio Section
   11. Pricing Section
   12. Testimonials Section
   13. Call To Action Section
   14. Contact Section
   15. Footer
   16. Floating Buttons (WhatsApp + Back to Top)
   17. Animations & Scroll Reveal
   18. Responsive Media Queries
   ============================================================ */

/* ============================================================
   01. CSS VARIABLES — Edit these to re-brand the entire site
   ============================================================ */
:root {
  /* Brand Colors */
  --primary: #0e9f6e;            /* Main accent (emerald green) */
  --primary-dark: #0b7a55;       /* Hover state */
  --primary-deep: #064e3b;       /* Dark green (gradients) */
  --primary-soft: #e7f7f0;       /* Light tinted background */
  --gold: #f5a623;               /* Rating stars / highlights */
  --gold-soft: #fef3e2;

  /* Neutrals */
  --dark: #0f172a;               /* Headings / dark sections */
  --dark-2: #16213a;             /* Footer / card dark */
  --text: #334155;               /* Body text */
  --muted: #64748b;              /* Secondary text */
  --bg: #ffffff;                 /* Page background */
  --bg-alt: #f5faf8;             /* Alternating section background */
  --border: #e2ebe7;             /* Card / input borders */

  /* Typography */
  --font-head: "Plus Jakarta Sans", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Layout */
  --container: 1200px;
  --header-height: 74px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  /* Shadows & Effects */
  --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.09);
  --shadow-lg: 0 24px 60px rgba(14, 159, 110, 0.18);
  --shadow-primary: 0 10px 24px rgba(14, 159, 110, 0.32);

  --transition: all 0.3s ease;
}

/* ============================================================
   02. Reset & Base
   ============================================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;              /* Smooth anchor scrolling */
  scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--dark);
  line-height: 1.25;
  font-weight: 700;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: inherit;
  font-size: 15px;
}

::selection {
  background: var(--primary);
  color: #fff;
}

/* Custom scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #eef3f1; }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }

/* ============================================================
   03. Utility Classes
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 100px 0;
  position: relative;
}

.section-alt { background: var(--bg-alt); }

/* Small eyebrow label above section titles */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 18px;
}

.section-tag i { font-size: 12px; }

.section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 60px;
}

.section-head h2 {
  font-size: clamp(30px, 4vw, 44px);
  margin-bottom: 16px;
}

.section-head h2 span {
  color: var(--primary);
  position: relative;
}

.section-head p { color: var(--muted); font-size: 17px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15.5px;
  padding: 15px 32px;
  border-radius: 100px;
  transition: var(--transition);
  white-space: nowrap;
}

.btn i { font-size: 14px; transition: transform 0.3s ease; }

.btn:hover i { transform: translateX(4px); }

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(14, 159, 110, 0.4);
}

.btn-outline {
  border: 2px solid var(--primary);
  color: var(--primary-dark);
  background: transparent;
}

.btn-outline:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: var(--shadow-primary);
}

.btn-white {
  background: #fff;
  color: var(--primary-deep);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
}

.btn-white:hover { transform: translateY(-3px); }

/* Transparent outline button for use on dark/gradient backgrounds */
.btn-wa-outline {
  border: 2px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  background: transparent;
}

.btn-wa-outline:hover {
  background: #fff;
  color: var(--primary-deep);
  transform: translateY(-3px);
}

/* ============================================================
   04. Top Bar (contact strip above header)
   ============================================================ */
.topbar {
  background: var(--dark);
  color: #cbd5e1;
  font-size: 13.5px;
  padding: 9px 0;
  position: relative;
  z-index: 1001;
}

.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar a { color: #cbd5e1; }
.topbar a:hover { color: var(--primary); }

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 22px;
}

.topbar i { color: var(--primary); margin-right: 7px; }

.topbar-socials { display: flex; gap: 4px; }

.topbar-socials a {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 12px;
  transition: var(--transition);
}

.topbar-socials a:hover {
  background: var(--primary);
  color: #fff;
}

/* ============================================================
   05. Header / Navigation
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}

/* State added by JS on scroll */
.site-header.scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-height);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 22px;
  color: var(--dark);
  flex-shrink: 0;
}

.logo-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: #fff;
  font-size: 18px;
  box-shadow: var(--shadow-primary);
}

.logo span { color: var(--primary); }

/* Desktop navigation */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-menu a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--dark);
  padding: 9px 14px;
  border-radius: 8px;
  position: relative;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2.5px;
  border-radius: 4px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.nav-menu a:hover::after,
.nav-menu a.active::after { transform: scaleX(1); }

.nav-menu a:hover,
.nav-menu a.active { color: var(--primary); }

.header-cta { display: flex; align-items: center; gap: 14px; }

.header-cta .btn {
  padding: 12px 26px;
  font-size: 14.5px;
}

/* Hamburger (hidden on desktop) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 10px;
  background: var(--primary-soft);
}

.hamburger span {
  display: block;
  height: 2.5px;
  width: 100%;
  border-radius: 4px;
  background: var(--primary-dark);
  transition: var(--transition);
}

/* Hamburger → X animation */
.hamburger.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ============================================================
   06. Hero Section
   ============================================================ */
.hero {
  position: relative;
  padding: 90px 0 70px;
  overflow: hidden;
  background:
    radial-gradient(700px 400px at 90% -10%, rgba(14, 159, 110, 0.10), transparent 60%),
    radial-gradient(600px 380px at -10% 40%, rgba(245, 166, 35, 0.07), transparent 60%),
    linear-gradient(180deg, #fbfefd 0%, #ffffff 100%);
}

/* Decorative grid pattern */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(14, 159, 110, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 159, 110, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 30%, transparent 75%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
}

/* Hero copy */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: 100px;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 26px;
}

.hero-badge .pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
  animation: pulseDot 2s infinite;
}

.hero h1 {
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 22px;
}

.hero h1 .highlight {
  color: var(--primary);
  position: relative;
  white-space: nowrap;
}

.hero h1 .highlight svg {
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
}

.hero-sub {
  font-size: 18px;
  color: var(--muted);
  max-width: 540px;
  margin-bottom: 34px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 48px;
}

/* Trust indicators (animated counters) */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.stat-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 26px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.stat-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.stat-item .stat-num {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 800;
  color: var(--primary-dark);
  line-height: 1.1;
}

.stat-item .stat-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

/* Hero media */
.hero-media { position: relative; }

.hero-img-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  z-index: 2;
}

.hero-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(14, 159, 110, 0.14), transparent 45%);
}

.hero-img-wrap img {
  width: 100%;
  height: 470px;
  object-fit: cover;
  transition: transform 8s ease;
}

.hero-media:hover .hero-img-wrap img { transform: scale(1.06); }

/* Blob behind hero image */
.hero-blob {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 78%;
  height: 78%;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%;
  opacity: 0.14;
  animation: blobMove 9s ease-in-out infinite alternate;
  z-index: 1;
}

/* Floating cards over hero image */
.float-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 3;
  animation: floatY 5s ease-in-out infinite;
}

.float-card .fc-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 16px;
}

.fc-rating { top: 24px; left: -36px; }
.fc-rating .fc-icon { background: var(--gold-soft); color: var(--gold); }
.fc-rating strong { display: block; font-family: var(--font-head); font-size: 14.5px; color: var(--dark); line-height: 1.3; }
.fc-rating small { font-size: 12px; color: var(--muted); }
.fc-rating .stars { color: var(--gold); font-size: 11px; letter-spacing: 1px; }

.fc-projects { bottom: 34px; right: -30px; animation-delay: 1.4s; }
.fc-projects .fc-icon { background: var(--primary-soft); color: var(--primary-dark); }
.fc-projects strong { display: block; font-family: var(--font-head); font-size: 15px; color: var(--dark); line-height: 1.3; }
.fc-projects small { font-size: 12px; color: var(--muted); }

/* ============================================================
   07. About Section
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: center;
}

.about-media { position: relative; }

.about-img-main {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.about-img-main img {
  width: 100%;
  height: 480px;
  object-fit: cover;
}

/* Experience badge */
.exp-badge {
  position: absolute;
  bottom: -26px;
  right: 24px;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: #fff;
  border-radius: var(--radius);
  padding: 22px 26px;
  text-align: center;
  box-shadow: var(--shadow-primary);
}

.exp-badge strong {
  display: block;
  font-family: var(--font-head);
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
}

.exp-badge span { font-size: 13.5px; opacity: 0.92; }

.about-content .section-tag { margin-bottom: 14px; }

.about-content h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  margin-bottom: 18px;
}

.about-content h2 span { color: var(--primary); }

.about-content > p {
  color: var(--muted);
  margin-bottom: 14px;
}

.about-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
  margin: 30px 0 36px;
}

.about-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--dark);
  font-size: 15.5px;
}

.about-points i {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 13px;
}

/* ============================================================
   08. Services Section
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.service-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 26px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

/* Gradient top accent revealed on hover */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.service-card:hover::before { transform: scaleX(1); }

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.service-icon {
  width: 60px;
  height: 60px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 24px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  margin-bottom: 22px;
  transition: var(--transition);
}

.service-card:hover .service-icon {
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: #fff;
  transform: rotateY(180deg);
}

.service-card h3 {
  font-size: 19px;
  margin-bottom: 10px;
}

.service-card p {
  font-size: 14.5px;
  color: var(--muted);
  margin-bottom: 18px;
}

.service-link {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--primary-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.service-link i { font-size: 12px; transition: transform 0.3s ease; }

.service-link:hover i { transform: translateX(5px); }

/* ============================================================
   09. Why Choose Us (dark premium section)
   ============================================================ */
.why-us {
  background:
    radial-gradient(800px 500px at 85% 0%, rgba(14, 159, 110, 0.22), transparent 60%),
    radial-gradient(600px 400px at 0% 100%, rgba(245, 166, 35, 0.10), transparent 55%),
    var(--dark);
  color: #cbd5e1;
}

.why-us .section-head h2 { color: #fff; }
.why-us .section-head h2 span { color: var(--primary); }
.why-us .section-head p { color: #94a3b8; }
.why-us .section-tag { background: rgba(14, 159, 110, 0.16); color: #6ee7b7; }

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.why-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: var(--transition);
  backdrop-filter: blur(4px);
}

.why-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(14, 159, 110, 0.55);
  transform: translateY(-6px);
}

.why-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 21px;
  color: #6ee7b7;
  background: rgba(14, 159, 110, 0.18);
  border: 1px solid rgba(14, 159, 110, 0.3);
  margin-bottom: 20px;
}

.why-card h3 { color: #fff; font-size: 18.5px; margin-bottom: 9px; }
.why-card p { font-size: 14.5px; color: #94a3b8; }

/* ============================================================
   10. Portfolio Section
   ============================================================ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 46px;
}

.filter-btn {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--muted);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  padding: 11px 26px;
  transition: var(--transition);
}

.filter-btn:hover { color: var(--primary-dark); border-color: var(--primary); }

.filter-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-primary);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.portfolio-item { transition: opacity 0.4s ease, transform 0.4s ease; }

/* Hidden state used by the JS filter */
.portfolio-item.hidden {
  display: none;
}

.portfolio-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
}

.portfolio-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

.portfolio-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.portfolio-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.portfolio-card:hover .portfolio-thumb img { transform: scale(1.09); }

/* Dark overlay with view icon */
.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 30%, rgba(15, 23, 42, 0.75) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 20px;
}

.portfolio-card:hover .portfolio-overlay { opacity: 1; }

.portfolio-overlay .view-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary-dark);
  display: grid;
  place-items: center;
  font-size: 16px;
  transform: translateY(14px);
  transition: transform 0.4s ease;
}

.portfolio-card:hover .portfolio-overlay .view-icon { transform: translateY(0); }

.portfolio-cat {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  backdrop-filter: blur(4px);
}

.portfolio-body {
  padding: 20px 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.portfolio-body h3 { font-size: 17.5px; margin-bottom: 3px; }
.portfolio-body p { font-size: 13.5px; color: var(--muted); }
.portfolio-body .arrow-link {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-dark);
  display: grid;
  place-items: center;
  transition: var(--transition);
}

.portfolio-body .arrow-link:hover {
  background: var(--primary);
  color: #fff;
  transform: rotate(-45deg);
}

/* ============================================================
   11. Pricing Section
   ============================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

.price-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 34px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: var(--transition);
}

.price-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

/* Featured (middle) package */
.price-card.featured {
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
  background:
    radial-gradient(400px 200px at 100% 0%, rgba(14, 159, 110, 0.08), transparent 60%),
    #fff;
}

.popular-badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  color: #fff;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 22px;
  border-radius: 100px;
  box-shadow: var(--shadow-primary);
  white-space: nowrap;
}

.price-card h3 {
  font-size: 22px;
  margin-bottom: 6px;
}

.price-card .plan-desc {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 24px;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 26px;
}

.price .currency {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 700;
  color: var(--muted);
}

.price .amount {
  font-family: var(--font-head);
  font-size: 46px;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -1px;
}

.price .period { font-size: 13.5px; color: var(--muted); }

.price-note {
  font-size: 12.5px;
  color: var(--muted);
  background: var(--bg-alt);
  border-radius: 8px;
  padding: 9px 14px;
  margin: -14px 0 22px;
  text-align: center;
}

.price-features {
  margin-bottom: 32px;
  flex-grow: 1;
}

.price-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  font-size: 15px;
  color: var(--text);
}

.price-features i {
  color: var(--primary);
  font-size: 13px;
  margin-top: 5px;
}

.price-card .btn { width: 100%; }

/* ============================================================
   12. Testimonials Section
   ============================================================ */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.testi-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  position: relative;
  transition: var(--transition);
}

.testi-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

.testi-card .quote-icon {
  position: absolute;
  top: 26px;
  right: 28px;
  font-size: 44px;
  color: var(--primary-soft);
}

.testi-stars { color: var(--gold); font-size: 14px; letter-spacing: 2px; margin-bottom: 16px; }

.testi-text {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.testi-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px dashed var(--border);
}

/* Initials avatar (profile image placeholder) */
.testi-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.avatar-1 { background: linear-gradient(135deg, #0e9f6e, #064e3b); }
.avatar-2 { background: linear-gradient(135deg, #f5a623, #d97706); }
.avatar-3 { background: linear-gradient(135deg, #1d4ed8, #0f172a); }

.testi-author strong {
  display: block;
  font-family: var(--font-head);
  color: var(--dark);
  font-size: 16px;
  line-height: 1.3;
}

.testi-author span {
  font-size: 13.5px;
  color: var(--muted);
}

/* ============================================================
   13. Call To Action
   ============================================================ */
.cta {
  position: relative;
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(245, 166, 35, 0.18), transparent 60%),
    radial-gradient(700px 400px at 90% 100%, rgba(14, 159, 110, 0.35), transparent 60%),
    linear-gradient(120deg, #064e3b 0%, #0b7a55 55%, #0e9f6e 100%);
  color: #fff;
  text-align: center;
  overflow: hidden;
}

/* Decorative circles */
.cta::before,
.cta::after {
  content: "";
  position: absolute;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
}

.cta::before { width: 380px; height: 380px; top: -160px; left: -120px; }
.cta::after { width: 300px; height: 300px; bottom: -140px; right: -90px; }

.cta h2 {
  color: #fff;
  font-size: clamp(30px, 4.4vw, 46px);
  margin-bottom: 16px;
}

.cta p {
  font-size: 17.5px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 560px;
  margin: 0 auto 36px;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* ============================================================
   14. Contact Section
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: start;
}

/* Contact info cards */
.contact-info-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.contact-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
  transition: var(--transition);
}

.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.contact-card .cc-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 17px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  margin-bottom: 14px;
}

.contact-card h3 { font-size: 15.5px; margin-bottom: 5px; }
.contact-card p, .contact-card a { font-size: 14px; color: var(--muted); }
.contact-card a:hover { color: var(--primary); }

/* Map wrapper */
.map-wrap {
  margin-top: 18px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  grid-column: 1 / -1;
}

.map-wrap iframe {
  display: block;
  width: 100%;
  height: 240px;
  border: 0;
  filter: saturate(0.9);
}

/* Contact form */
.contact-form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 38px 36px;
  box-shadow: var(--shadow-md);
}

.contact-form-card h3 {
  font-size: 23px;
  margin-bottom: 6px;
}

.contact-form-card > p {
  font-size: 14.5px;
  color: var(--muted);
  margin-bottom: 26px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group { margin-bottom: 16px; }

.form-group label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--dark);
  margin-bottom: 7px;
}

.form-group label span { color: #dc2626; }

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  color: var(--dark);
  outline: none;
  transition: var(--transition);
}

.form-group textarea { resize: vertical; min-height: 120px; }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(14, 159, 110, 0.12);
}

.form-group input.error,
.form-group textarea.error {
  border-color: #dc2626;
  background: #fef2f2;
}

.form-error-msg {
  font-size: 12.5px;
  color: #dc2626;
  margin-top: 5px;
  display: none;
}

.form-error-msg.show { display: block; }

.contact-form-card .btn { width: 100%; }

/* Form success message */
.form-success {
  display: none;
  text-align: center;
  padding: 30px 10px;
}

.form-success.show { display: block; }

.form-success .success-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 30px;
  display: grid;
  place-items: center;
  animation: popIn 0.5s ease;
}

.form-success h4 {
  font-size: 21px;
  margin-bottom: 8px;
}

.form-success p { font-size: 14.5px; color: var(--muted); margin-bottom: 20px; }

/* ============================================================
   15. Footer
   ============================================================ */
.site-footer {
  background:
    radial-gradient(700px 300px at 100% 0%, rgba(14, 159, 110, 0.16), transparent 55%),
    var(--dark);
  color: #94a3b8;
  padding-top: 80px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.1fr 1.2fr;
  gap: 44px;
  padding-bottom: 56px;
}

.footer-brand .logo { color: #fff; margin-bottom: 18px; }

.footer-brand p {
  font-size: 14.5px;
  max-width: 320px;
  margin-bottom: 22px;
}

.footer-socials { display: flex; gap: 10px; }

.footer-socials a {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: var(--transition);
}

.footer-socials a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  transform: translateY(-4px);
}

.footer-col h4 {
  color: #fff;
  font-size: 17px;
  margin-bottom: 22px;
  position: relative;
  padding-bottom: 12px;
}

.footer-col h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 3px;
  border-radius: 4px;
  background: var(--primary);
}

.footer-links li { margin-bottom: 11px; }

.footer-links a {
  font-size: 14.5px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: var(--transition);
}

.footer-links a i { font-size: 10px; color: var(--primary); transition: transform 0.3s ease; }

.footer-links a:hover { color: #fff; padding-left: 5px; }
.footer-links a:hover i { transform: translateX(3px); }

.footer-contact li {
  display: flex;
  gap: 13px;
  margin-bottom: 15px;
  font-size: 14.5px;
}

.footer-contact i {
  color: var(--primary);
  margin-top: 4px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.footer-contact a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding: 22px 0;
}

.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
}

.footer-bottom a:hover { color: #fff; }

.footer-bottom .legal { display: flex; gap: 22px; }
.footer-bottom .legal a { display: inline-flex; align-items: center; gap: 6px; }
.footer-bottom .legal i { font-size: 3px; color: var(--primary); }

/* ============================================================
   16. Floating Buttons (WhatsApp + Back to Top)
   ============================================================ */

/* Floating WhatsApp button with tooltip */
.wa-float {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 999;
}

.wa-float .wa-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  font-size: 29px;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45);
  position: relative;
  transition: transform 0.3s ease;
}

.wa-float .wa-btn:hover { transform: scale(1.1); }

/* Pulsing green rings */
.wa-float .wa-btn::before,
.wa-float .wa-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25d366;
  opacity: 0.5;
  z-index: -1;
  animation: waPulse 2.2s ease-out infinite;
}

.wa-float .wa-btn::after { animation-delay: 1.1s; }

/* Tooltip */
.wa-tooltip {
  position: absolute;
  right: 72px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: var(--dark);
  color: #fff;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding: 10px 16px;
  border-radius: 10px;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  box-shadow: var(--shadow-md);
}

.wa-tooltip::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--dark);
}

.wa-float:hover .wa-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* Back to top button */
.back-top {
  position: fixed;
  bottom: 100px;
  right: 36px;
  z-index: 998;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--dark);
  color: #fff;
  font-size: 15px;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: var(--transition);
}

.back-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-top:hover { background: var(--primary); }

/* ============================================================
   17. Animations & Scroll Reveal
   ============================================================ */

/* Scroll-reveal base state (JS adds .visible) */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for grids */
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.4s; }
.reveal-delay-6 { transition-delay: 0.48s; }

/* Keyframes */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-13px); }
}

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14, 159, 110, 0.45); }
  50% { box-shadow: 0 0 0 7px rgba(14, 159, 110, 0); }
}

@keyframes blobMove {
  0% { border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%; transform: rotate(0deg) scale(1); }
  100% { border-radius: 45% 55% 42% 58% / 55% 45% 58% 42%; transform: rotate(8deg) scale(1.05); }
}

@keyframes waPulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.65); opacity: 0; }
}

@keyframes popIn {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   18. Responsive Media Queries
   ============================================================ */

/* Large tablets / small laptops */
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .fc-rating { left: -14px; }
  .fc-projects { right: -14px; }
}

/* Tablets */
@media (max-width: 992px) {
  .section { padding: 76px 0; }

  /* Hide topbar on tablet to save space */
  .topbar { display: none; }

  /* Mobile navigation */
  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(340px, 84vw);
    height: 100vh;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    padding: 96px 30px 40px;
    box-shadow: -20px 0 60px rgba(15, 23, 42, 0.16);
    transition: right 0.45s cubic-bezier(0.77, 0, 0.18, 1);
    overflow-y: auto;
  }

  .nav-menu.open { right: 0; }

  .nav-menu a {
    width: 100%;
    font-size: 17px;
    padding: 13px 16px;
  }

  .nav-menu a::after { display: none; }
  .nav-menu a:hover { background: var(--primary-soft); color: var(--primary-dark); }

  .hamburger { display: flex; }

  /* Hide the header CTA button on mobile (it moves into the menu) */
  .header-cta .btn { display: none; }

  /* Drawer close button */
  .nav-menu .menu-cta {
    display: inline-flex;
    margin-top: 22px;
    width: 100%;
    justify-content: center;
  }

  /* Hero */
  .hero { padding: 60px 0 60px; }
  .hero-grid { grid-template-columns: 1fr; gap: 54px; }
  .hero-media { max-width: 560px; margin: 0 auto; width: 100%; }
  .fc-rating { left: -10px; }
  .fc-projects { right: -10px; }

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: 70px; }
  .about-media { max-width: 560px; }

  /* Portfolio */
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }

  /* Testimonials */
  .testi-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Mobile */
@media (max-width: 640px) {
  /* Allow the highlighted phrase to wrap naturally on small screens */
  .hero h1 .highlight {
    white-space: normal;
    display: inline;
  }

  .hero h1 .highlight svg {
    display: none;
  }

  .hero-stats { gap: 10px; }
  .stat-item { flex: 1 1 calc(50% - 10px); padding: 14px 18px; }
  .stat-item .stat-num { font-size: 23px; }

  .hero-img-wrap img { height: 340px; }

  .services-grid,
  .why-grid,
  .portfolio-grid { grid-template-columns: 1fr; }

  .about-points { grid-template-columns: 1fr; }
  .about-img-main img { height: 340px; }

  .form-row { grid-template-columns: 1fr; }

  .contact-form-card { padding: 28px 22px; }

  .footer-grid { grid-template-columns: 1fr; gap: 36px; }

  .footer-bottom .container { flex-direction: column; text-align: center; }

  .hero-actions .btn { width: 100%; }
  .hero-actions .btn:last-child { margin-top: -8px; }

  .fc-rating { top: 14px; left: 8px; }
  .fc-projects { bottom: 14px; right: 8px; }
  .float-card { padding: 10px 14px; }

  .back-top { right: 22px; bottom: 92px; }
  .wa-float { bottom: 20px; right: 20px; }
  .wa-float .wa-btn { width: 54px; height: 54px; font-size: 25px; }
}

/* Small phones */
@media (max-width: 400px) {
  .container { padding: 0 18px; }
  .logo { font-size: 19px; }
  .logo-icon { width: 38px; height: 38px; }
  .exp-badge { right: 12px; padding: 16px 20px; }
  .exp-badge strong { font-size: 28px; }
}