/* ==========================================================================
   GRPSSolutions — Main Stylesheet
   Author   : Ganesh S. Pol
   Website  : GRPSSolutions, Pune
   Version  : 2.0

   TABLE OF CONTENTS
   ─────────────────
   01. CSS Variables & Theme Tokens
   02. Reset & Base Styles
   03. Typography Utilities
   04. Scrollbar
   05. Reusable Buttons
   06. Section Layout Helpers
   07. Navbar / Header
   08. Hero Section
   09. Services Section
   10. Tech Stack Strip
   11. About Section
   12. Portfolio Section
   13. Work Process Section
   14. Why Choose Us Section
   15. Pricing Section
   16. Testimonials Section
   17. Contact Section
   18. Footer
   19. Back-to-Top Button
   20. Keyframe Animations
   21. Media Queries (Responsive)
   ========================================================================== */


/* ──────────────────────────────────────────────────────────────────────────
   01. CSS Variables & Theme Tokens
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Brand Colours — Version 4.0 (Professional White & Navy) */
  --color-navy:         #f8fafc;   /* page background — clean off-white */
  --color-navy-light:   #ffffff;   /* pure white sections */
  --color-navy-mid:     #f1f5f9;   /* alt section — very light gray */
  --color-navy-card:    rgba(255, 255, 255, 1.00);

  --color-gold:         #1d4ed8;   /* professional deep blue accent */
  --color-gold-light:   #2563eb;   /* standard blue */
  --color-gold-pale:    #93c5fd;   /* pale blue */

  --color-white:        #ffffff;   /* pure white — used in hero / footer text */
  --color-text:         #111827;   /* primary text — near-black navy */
  --color-muted:        #64748b;   /* muted text — slate gray */

  /* Borders */
  --border-faint:  1px solid rgba(17, 24, 39, 0.08);
  --border-light:  1px solid rgba(17, 24, 39, 0.15);
  --border-mid:    1px solid rgba(29, 78, 216, 0.38);

  /* Shadows */
  --shadow-card:   0 2px 18px rgba(17, 24, 39, 0.07);
  --shadow-hover:  0 12px 40px rgba(17, 24, 39, 0.13);
  --shadow-gold:   0 8px 28px rgba(29, 78, 216, 0.22);

  /* Gradients */
  --gradient-gold:      linear-gradient(135deg, #1d4ed8, #2563eb);
  --gradient-navy:      linear-gradient(135deg, #0f172a 0%, #1e2f4a 45%, #1a3560 100%);
  --gradient-section:   linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  --gradient-alt:       linear-gradient(135deg, #f1f5f9 0%, #e9eef6 100%);

  /* Border Radii */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;

  /* Typography */
  --font-primary: 'Poppins', sans-serif;

  /* Transitions */
  --ease-base: all 0.30s ease;
  --ease-fast: all 0.20s ease;

  /* Spacing */
  --section-padding: 90px 0;
}


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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: var(--font-primary);
  background-color: var(--color-navy);
  color: var(--color-text);
  line-height: 1.65;
  overflow-x: hidden;   /* belt-and-braces: prevents any element causing horizontal scroll */
  max-width: 100vw;
}

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

a {
  text-decoration: none;
  color: inherit;
}


/* ──────────────────────────────────────────────────────────────────────────
   03. Typography Utilities
   ────────────────────────────────────────────────────────────────────────── */

/* Small labelling badge above section titles */
.section-badge {
  display: inline-block;
  background: rgba(14, 165, 233, 0.10);
  border: var(--border-light);
  color: var(--color-gold-light);
  padding: 6px 18px;
  border-radius: 25px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 1.9px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.22;
  color: var(--color-text);
  margin-bottom: 10px;
}

.section-title span { color: var(--color-gold); }

.section-subtitle {
  font-size: 0.97rem;
  color: var(--color-muted);
  line-height: 1.85;
  max-width: 600px;
  margin: 0 auto 52px;
}

/* Gold horizontal rule under section titles */
.gold-divider {
  width: 56px;
  height: 3px;
  background: var(--gradient-gold);
  border-radius: 2px;
  margin: 14px auto 20px;
}

.gold-divider.align-left {
  margin-left: 0;
  margin-right: auto;
}


/* ──────────────────────────────────────────────────────────────────────────
   04. Scrollbar
   ────────────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar              { width: 6px; }
::-webkit-scrollbar-track        { background: var(--color-navy); }
::-webkit-scrollbar-thumb        { background: var(--color-gold); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: var(--color-gold-light); }


/* ──────────────────────────────────────────────────────────────────────────
   05. Reusable Buttons
   ────────────────────────────────────────────────────────────────────────── */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gradient-gold);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 13px 30px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: var(--ease-base);
  white-space: nowrap;
}

.btn-gold:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-gold);
  color: var(--color-white);
}

.btn-outline-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--color-gold);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-gold-light);
  cursor: pointer;
  transition: var(--ease-base);
  white-space: nowrap;
}

.btn-outline-gold:hover {
  background: rgba(14, 165, 233, 0.10);
  transform: translateY(-3px);
  color: var(--color-gold);
}


/* ──────────────────────────────────────────────────────────────────────────
   06. Section Layout Helpers
   ────────────────────────────────────────────────────────────────────────── */
section           { padding: var(--section-padding); }
.bg-navy          { background-color: var(--color-navy); }
.bg-section       { background: var(--gradient-section); }
.bg-section-alt   { background: var(--gradient-alt); }


/* ──────────────────────────────────────────────────────────────────────────
   07. Navbar / Header
   ────────────────────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;   /* high enough to stay above all content */
  width: 100%;
}

.navbar {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(17, 24, 39, 0.10);
  padding: 10px 0;
  transition: var(--ease-base);
  box-shadow: 0 2px 16px rgba(17, 24, 39, 0.08);
  width: 100%;
}

/* Compact state after scrolling 60 px */
.navbar.is-scrolled {
  padding: 10px 0;
  box-shadow: 0 4px 20px rgba(17, 24, 39, 0.12);
}

.navbar-brand {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-text) !important;
  letter-spacing: -0.5px;
}

.navbar-brand .brand-accent { color: var(--color-gold); }

.nav-link {
  position: relative;
  color: rgba(17, 24, 39, 0.75) !important;
  font-weight: 500;
  font-size: 0.90rem;
  padding: 8px 16px !important;
  letter-spacing: 0.3px;
  transition: color 0.22s ease;
}

/* Blue underline indicator for active & hovered menu item */
.nav-link:not(.btn-nav-cta)::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 14px;
  right: 14px;
  height: 3px;
  background: var(--color-gold);
  border-radius: 4px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:not(.btn-nav-cta):hover::after {
  transform: scaleX(0.5);
}

.nav-link:hover {
  color: var(--color-gold) !important;
}

.nav-link.is-active {
  color: var(--color-gold) !important;
  font-weight: 700 !important;
}

.nav-link:not(.btn-nav-cta).is-active::after {
  transform: scaleX(1);
}

/* CTA pill in navbar */
.btn-nav-cta {
  background: var(--gradient-gold) !important;
  color: var(--color-white) !important;
  font-weight: 700 !important;
  font-size: 0.84rem !important;
  padding: 8px 22px !important;
  border-radius: 25px;
  transition: var(--ease-base);
}

.btn-nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold);
}

/* Keep text WHITE on the active state (specificity fix — .nav-link.is-active
   has 2-class specificity and would make text blue = invisible on blue bg) */
.btn-nav-cta.is-active,
.btn-nav-cta:hover.is-active {
  color: var(--color-white) !important;
  background: var(--gradient-gold) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.40), var(--shadow-gold) !important;
}

/* Hamburger menu button — clearly visible on white navbar */
.navbar-toggler {
  border: 2px solid #1d4ed8 !important;
  border-radius: 8px !important;
  padding: 7px 9px !important;
  background: rgba(29, 78, 216, 0.06) !important;
  width: 44px !important;
  height: 44px !important;
  line-height: 1;
  flex-shrink: 0;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.20) !important;
  outline: none;
}

.navbar-toggler:hover {
  background: rgba(29, 78, 216, 0.12) !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3e%3cpath stroke='%231d4ed8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M3 6h18M3 12h18M3 18h18'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   08. Hero Section
   ────────────────────────────────────────────────────────────────────────── */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 130px 0 80px;
  background: var(--gradient-navy);
  --color-muted: #94a3b8;
  --color-text:  #f0f6ff;
}

/* Subtle dot-grid pattern overlay on hero for visual richness */
#hero .hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(29, 78, 216, 0.12) 1px, transparent 1px);
  background-size: 38px 38px;
  pointer-events: none;
  z-index: 0;
}

#hero .container { position: relative; z-index: 1; }

/* Decorative radial glow — top right */
#hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -8%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.18) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  max-width: 60vw;
}

/* Decorative radial glow — bottom left */
#hero::after {
  content: '';
  position: absolute;
  bottom: -18%;
  left: -6%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.14) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  max-width: 60vw;
}

/* "Available for Projects" pill */
.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(37, 99, 235, 0.35);
  color: #93c5fd;
  padding: 7px 18px;
  border-radius: 25px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.availability-dot {
  width: 8px;
  height: 8px;
  background: #4ade80;
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

.hero-headline {
  font-size: clamp(2.1rem, 4.8vw, 3.7rem);
  font-weight: 800;
  line-height: 1.12;
  color: var(--color-white);
  margin-bottom: 20px;
}

.hero-headline .highlight { color: var(--color-gold); }

.hero-description {
  font-size: 1.02rem;
  color: var(--color-muted);
  line-height: 1.9;
  max-width: 520px;
  margin-bottom: 36px;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 52px;
}

/* Stats bar at the bottom of the hero left column */
.hero-stats {
  display: flex;
  border-top: var(--border-faint);
  padding-top: 28px;
}

.hero-stat {
  flex: 1;
  text-align: center;
  padding: 0 18px;
  position: relative;
}

.hero-stat + .hero-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.hero-stat .stat-number {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--color-gold);
  line-height: 1;
  margin-bottom: 4px;
}

.hero-stat .stat-label {
  font-size: 0.71rem;
  color: var(--color-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Illustration wrapper */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-illustration {
  width: 100%;
  max-width: 540px;
  border-radius: var(--radius-lg);
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
}

/* Floating status cards overlaid on illustration — clean white style */
.hero-float-card {
  position: absolute;
  background: #ffffff;
  border: 1px solid rgba(17, 24, 39, 0.10);
  border-radius: var(--radius-md);
  padding: 11px 17px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #111827;
  box-shadow: 0 8px 28px rgba(17, 24, 39, 0.12);
  backdrop-filter: blur(8px);
  white-space: nowrap;
  z-index: 2;
  animation: float-updown 3.2s ease-in-out infinite;
}

.hero-float-card.top-left     { top: 8%; left: -2%; animation-delay: 0.4s; }
.hero-float-card.bottom-right { bottom: 8%; right: -2%; animation-delay: 1.2s; }
.hero-float-card .live-dot    { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
.hero-float-card .star-icon   { color: #f59e0b; font-size: 1rem; }


/* ──────────────────────────────────────────────────────────────────────────
   09. Services Section
   ────────────────────────────────────────────────────────────────────────── */
.service-card {
  background: var(--color-navy-card);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: var(--radius-lg);
  padding: 34px 26px 28px;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: var(--ease-base);
  box-shadow: 0 2px 16px rgba(17, 24, 39, 0.06);
}

/* Animated gold top-border on hover */
.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.service-card:hover {
  border-color: rgba(29, 78, 216, 0.30);
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

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

.service-icon-wrap {
  width: 62px;
  height: 62px;
  background: rgba(29, 78, 216, 0.08);
  border: 1px solid rgba(29, 78, 216, 0.18);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-gold);
  margin-bottom: 22px;
  transition: var(--ease-base);
}

/* Icon turns navy-on-gold when card is hovered */
.service-card:hover .service-icon-wrap {
  background: var(--gradient-gold);
  border-color: transparent;
  color: var(--color-navy);
}

.service-card h3 {
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-text);
}

.service-card p {
  font-size: 0.86rem;
  color: var(--color-muted);
  line-height: 1.78;
  margin-bottom: 16px;
}

.service-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-feature-list li {
  font-size: 0.80rem;
  color: var(--color-muted);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Gold bullet dot */
.service-feature-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--color-gold);
  border-radius: 50%;
  flex-shrink: 0;
}


/* ──────────────────────────────────────────────────────────────────────────
   10. Tech Stack Strip
   ────────────────────────────────────────────────────────────────────────── */
#tech { padding: 62px 0; }

.tech-strip-label {
  font-size: 0.74rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 2.2px;
  font-weight: 600;
  margin-bottom: 26px;
}

.tech-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(241, 245, 249, 0.95);
  border: 1px solid rgba(17, 24, 39, 0.10);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 0.80rem;
  font-weight: 600;
  color: var(--color-muted);
  transition: var(--ease-base);
  margin: 4px 3px;
  cursor: default;
}

.tech-badge:hover {
  border-color: rgba(29, 78, 216, 0.35);
  color: var(--color-gold-light);
  background: rgba(29, 78, 216, 0.06);
  transform: translateY(-2px);
}


/* ──────────────────────────────────────────────────────────────────────────
   11. About Section
   ────────────────────────────────────────────────────────────────────────── */
.about-visual-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-illustration {
  width: 100%;
  max-width: 380px;   /* bigger on desktop for better clarity */
}

.skill-chip {
  display: inline-block;
  background: rgba(29, 78, 216, 0.07);
  border: 1px solid rgba(29, 78, 216, 0.20);
  color: var(--color-gold-light);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 500;
  margin: 3px 2px;
}

.about-feature-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.about-feature-icon {
  min-width: 44px;
  height: 44px;
  background: rgba(29, 78, 216, 0.08);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  font-size: 1rem;
}

.about-feature-row h6 {
  font-size: 0.91rem;
  font-weight: 700;
  margin-bottom: 3px;
  color: var(--color-text);
}

.about-feature-row p {
  font-size: 0.81rem;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.65;
}


/* ──────────────────────────────────────────────────────────────────────────
   12. Portfolio Section
   ────────────────────────────────────────────────────────────────────────── */
.portfolio-card {
  background: var(--color-navy-card);
  border: var(--border-faint);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  transition: var(--ease-base);
}

.portfolio-card:hover {
  border-color: rgba(29, 78, 216, 0.28);
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

/* Project thumbnail / visual area */
.portfolio-thumb {
  height: 185px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  position: relative;
  overflow: hidden;
}

.portfolio-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(17, 24, 39, 0.25) 100%);
}

.portfolio-body { padding: 22px 24px; }

.portfolio-type-tag {
  display: inline-block;
  background: rgba(29, 78, 216, 0.08);
  border: 1px solid rgba(29, 78, 216, 0.20);
  color: var(--color-gold-light);
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 0.71rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.portfolio-body h3 {
  font-size: 1.04rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-text);
}

.portfolio-body p {
  font-size: 0.83rem;
  color: var(--color-muted);
  line-height: 1.73;
  margin-bottom: 16px;
}

.tech-tag-row { display: flex; flex-wrap: wrap; gap: 6px; }

.tech-tag {
  font-size: 0.71rem;
  background: rgba(241, 245, 249, 1.00);
  border: 1px solid rgba(17, 24, 39, 0.10);
  color: var(--color-muted);
  padding: 3px 10px;
  border-radius: 6px;
}

/* "Your Project?" invitation card */
.portfolio-cta-card {
  background: linear-gradient(135deg, rgba(29, 78, 216, 0.05) 0%, rgba(241, 245, 249, 0.90) 100%);
  border: 1px solid rgba(29, 78, 216, 0.20);
  border-radius: var(--radius-lg);
  height: 100%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 38px 28px;
  transition: var(--ease-base);
}

.portfolio-cta-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-gold);
}

.portfolio-cta-icon {
  width: 72px;
  height: 72px;
  background: var(--gradient-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--color-navy);
  margin-bottom: 20px;
}


/* ──────────────────────────────────────────────────────────────────────────
   13. Work Process Section
   ────────────────────────────────────────────────────────────────────────── */
.process-step {
  text-align: center;
  position: relative;
  padding: 20px 10px;
}

/* Connector line between steps */
.process-step::after {
  content: '';
  position: absolute;
  top: 50px;
  right: -46%;
  width: 92%;
  height: 2px;
  background: linear-gradient(90deg, rgba(29, 78, 216, 0.25), transparent);
}

.process-step:last-child::after { display: none; }

.step-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(29, 78, 216, 0.07);
  border: 2px solid rgba(29, 78, 216, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--color-gold);
  margin: 0 auto 20px;
  position: relative;
  z-index: 1;
  transition: var(--ease-base);
}

.process-step:hover .step-circle {
  background: var(--gradient-gold);
  color: var(--color-navy);
  border-color: transparent;
  transform: scale(1.06);
}

.process-step h3 {
  font-size: 0.97rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-text);
}

.process-step p {
  font-size: 0.81rem;
  color: var(--color-muted);
  line-height: 1.72;
}


/* ──────────────────────────────────────────────────────────────────────────
   14. Why Choose Us Section
   ────────────────────────────────────────────────────────────────────────── */
.why-card {
  background: rgba(255, 255, 255, 1.00);
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  height: 100%;
  transition: var(--ease-base);
  box-shadow: 0 2px 12px rgba(17, 24, 39, 0.05);
}

.why-card:hover {
  border-color: rgba(29, 78, 216, 0.25);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.why-icon-wrap {
  min-width: 48px;
  height: 48px;
  background: var(--gradient-gold);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--color-navy);
  flex-shrink: 0;
}

.why-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--color-text);
}

.why-card p {
  font-size: 0.81rem;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.72;
}


/* ──────────────────────────────────────────────────────────────────────────
   15. Pricing Section
   ────────────────────────────────────────────────────────────────────────── */
.pricing-card {
  background: var(--color-navy-card);
  border: var(--border-faint);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  height: 100%;
  position: relative;
  transition: var(--ease-base);
  display: flex;
  flex-direction: column;
}

.pricing-card:hover {
  border-color: rgba(29, 78, 216, 0.28);
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

/* Highlighted "most popular" card */
.pricing-card.is-featured {
  background: linear-gradient(155deg, rgba(29, 78, 216, 0.05) 0%, rgba(37, 99, 235, 0.03) 100%);
  border-color: rgba(29, 78, 216, 0.40);
  box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.18), var(--shadow-card);
}

.featured-label {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-gold);
  color: var(--color-navy);
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  padding: 5px 18px;
  border-radius: 20px;
  white-space: nowrap;
}

.pricing-icon {
  width: 58px;
  height: 58px;
  background: rgba(29, 78, 216, 0.08);
  border: 1px solid rgba(29, 78, 216, 0.18);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--color-gold);
  margin-bottom: 18px;
  transition: var(--ease-base);
}

.pricing-card.is-featured .pricing-icon {
  background: var(--gradient-gold);
  border-color: transparent;
  color: var(--color-navy);
}

.pricing-card h3 {
  font-size: 1.06rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--color-text);
}

.pricing-tagline {
  font-size: 0.80rem;
  color: var(--color-muted);
  margin-bottom: 20px;
}

.pricing-price {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: var(--border-faint);
}

.pricing-price .price-from {
  font-size: 0.71rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pricing-price .price-amount {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--color-gold);
  line-height: 1.1;
}

.pricing-price .price-note {
  font-size: 0.74rem;
  color: var(--color-muted);
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex: 1;
}

.pricing-features li {
  font-size: 0.83rem;
  color: var(--color-muted);
  padding: 7px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: var(--border-faint);
}

.pricing-features li:last-child { border-bottom: none; }

.pricing-features li .fa-check-circle  { color: var(--color-gold); font-size: 0.78rem; }
.pricing-features li .fa-times-circle  { color: rgba(17, 24, 39, 0.20); font-size: 0.78rem; }
.pricing-features li.unavailable       { color: rgba(17, 24, 39, 0.28); }


/* ──────────────────────────────────────────────────────────────────────────
   16. Testimonials Section
   ────────────────────────────────────────────────────────────────────────── */
.testimonial-card {
  background: var(--color-navy-card);
  border: var(--border-faint);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  height: 100%;
  transition: var(--ease-base);
}

.testimonial-card:hover {
  border-color: rgba(29, 78, 216, 0.25);
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
}

.testimonial-quote {
  font-size: 2.8rem;
  color: rgba(29, 78, 216, 0.18);
  line-height: 1;
  margin-bottom: 14px;
  font-family: Georgia, serif;
  font-style: normal;
}

.testimonial-stars {
  color: var(--color-gold);
  font-size: 0.85rem;
  margin-bottom: 16px;
}

.testimonial-text {
  font-size: 0.88rem;
  color: var(--color-muted);
  line-height: 1.84;
  margin-bottom: 22px;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: var(--border-faint);
}

.author-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--gradient-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-navy);
  flex-shrink: 0;
}

.author-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2px;
}

.author-role {
  font-size: 0.76rem;
  color: var(--color-muted);
}


/* ──────────────────────────────────────────────────────────────────────────
   17. Contact Section
   ────────────────────────────────────────────────────────────────────────── */
.contact-info-card {
  background: var(--color-navy-card);
  border: var(--border-faint);
  border-radius: var(--radius-lg);
  padding: 32px;
  height: 100%;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}

.contact-icon-wrap {
  min-width: 50px;
  height: 50px;
  background: rgba(29, 78, 216, 0.08);
  border: 1px solid rgba(29, 78, 216, 0.18);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  font-size: 1.05rem;
  flex-shrink: 0;
}

.contact-item-label {
  font-size: 0.72rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  margin-bottom: 2px;
}

.contact-item-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.social-row { display: flex; gap: 10px; margin-top: 12px; }

.social-btn {
  width: 42px;
  height: 42px;
  background: rgba(29, 78, 216, 0.07);
  border: 1px solid rgba(29, 78, 216, 0.18);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold);
  font-size: 0.9rem;
  text-decoration: none;
  transition: var(--ease-base);
}

.social-btn:hover {
  background: var(--color-gold);
  color: var(--color-navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

/* Contact form card */
.contact-form-card {
  background: rgba(255, 255, 255, 1.00);
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 2px 20px rgba(17, 24, 39, 0.06);
  border-radius: var(--radius-xl);
  padding: 38px;
}

.form-label {
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 6px;
  display: block;
}

.form-control,
.form-select {
  background: rgba(248, 250, 252, 1.00) !important;
  border: 1px solid rgba(17, 24, 39, 0.12) !important;
  color: var(--color-text) !important;
  border-radius: var(--radius-sm) !important;
  padding: 11px 14px !important;
  font-size: 0.87rem;
  font-family: var(--font-primary);
  transition: border-color 0.25s ease;
}

.form-control::placeholder { color: var(--color-muted) !important; }

.form-control:focus,
.form-select:focus {
  background: rgba(255, 255, 255, 1) !important;
  border-color: var(--color-gold) !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12) !important;
  outline: none !important;
}

.form-select option { background: #ffffff; color: var(--color-text); }

/* Inline form feedback messages */
.alert-success-custom {
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: #4ade80;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 0.88rem;
  font-weight: 600;
}

.alert-error-custom {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #f87171;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 0.88rem;
  font-weight: 600;
}

/* ── Field-level validation feedback ── */
.field-error {
  display: none;
  color: #ef4444;
  font-size: 0.775rem;
  font-weight: 500;
  margin-top: 4px;
  line-height: 1.3;
}
.field-error.show { display: block; }

.form-control.field-invalid,
.form-select.field-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10) !important;
}

.form-control.field-valid,
.form-select.field-valid {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.08) !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   18. Footer
   ────────────────────────────────────────────────────────────────────────── */
.site-footer {
  background: #0f172a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 64px 0 28px;
  /* Scoped overrides so footer text stays readable on dark background */
  --color-muted:      #94a3b8;
  --color-white:      #f1f5f9;
  --color-gold:       #60a5fa;
  --color-gold-light: #93c5fd;
}

/* Social buttons inside the dark footer need light borders */
.site-footer .social-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #93c5fd;
}

.site-footer .social-btn:hover {
  background: #60a5fa;
  color: #0f172a;
  border-color: transparent;
}

.footer-brand-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: 12px;
}

.footer-brand-name span { color: var(--color-gold); }

.footer-description {
  font-size: 0.83rem;
  color: var(--color-muted);
  line-height: 1.87;
  max-width: 295px;
}

.footer-section-heading {
  font-size: 0.77rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.9px;
  color: var(--color-gold);
  margin-bottom: 18px;
}

.footer-link-list { list-style: none; padding: 0; margin: 0; }

.footer-link-list li { margin-bottom: 9px; }

.footer-link-list a {
  font-size: 0.83rem;
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.22s ease;
}

.footer-link-list a:hover { color: var(--color-gold); }

.footer-contact-line {
  font-size: 0.83rem;
  color: var(--color-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-contact-line i { color: var(--color-gold); font-size: 0.78rem; }

/* Bottom copyright bar */
.footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 48px;
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--color-muted);
}


/* ──────────────────────────────────────────────────────────────────────────
   19. Back-to-Top Button
   ────────────────────────────────────────────────────────────────────────── */
#back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  background: var(--gradient-gold);
  color: var(--color-navy);
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  cursor: pointer;
  display: none;          /* toggled to flex via JS */
  align-items: center;
  justify-content: center;
  transition: var(--ease-base);
  z-index: 990;
  box-shadow: var(--shadow-gold);
}

#back-to-top.is-visible { display: flex; }
#back-to-top:hover       { transform: translateY(-3px); }


/* ──────────────────────────────────────────────────────────────────────────
   20. Keyframe Animations
   ────────────────────────────────────────────────────────────────────────── */
@keyframes float-updown {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0   rgba(74, 222, 128, 0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(74, 222, 128, 0); }
}


/* ──────────────────────────────────────────────────────────────────────────
   21. Media Queries — Responsive Overrides
   ────────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
   21. Media Queries — Responsive Overrides
   ────────────────────────────────────────────────────────────────────────── */

/* ── Large tablets & below (≤ 1024px) ── */
@media (max-width: 1024px) {
  .hero-float-card   { display: none; }
  .hero-illustration { max-width: 420px; }
}

/* ── Tablet (≤ 991px — Bootstrap lg breakpoint) ── */
@media (max-width: 991px) {
  :root { --section-padding: 72px 0; }

  /* Navbar mobile menu spacing */
  .navbar-collapse { padding: 14px 0 10px; }
  .navbar-nav      { gap: 2px; }
  .nav-link        { padding: 10px 12px !important; border-radius: 8px; }
  .nav-link:hover  { background: rgba(29, 78, 216, 0.06); }
  .nav-link.is-active {
    background: rgba(29, 78, 216, 0.09) !important;
    border-left: 4px solid var(--color-gold);
    border-radius: 4px 8px 8px 4px;
    padding-left: 14px !important;
    font-weight: 700 !important;
  }
  .nav-link:not(.btn-nav-cta).is-active::after { display: none; }
  .btn-nav-cta     { display: inline-block; margin-top: 8px; text-align: center; border-radius: 10px !important; }

  /* Hero — stack columns */
  #hero            { padding: 100px 0 60px; min-height: auto; }
  .hero-headline   { font-size: clamp(2rem, 5vw, 2.8rem); }

  /* Sections: reduce gaps */
  .row.g-5         { --bs-gutter-x: 2rem; --bs-gutter-y: 2rem; }

  /* Process connector */
  .process-step::after { display: none; }

  /* Pricing cards — 2 per row on tablet */
  .pricing-card    { margin-bottom: 24px; }
}

/* ── Mobile (≤ 767px) ── */
@media (max-width: 767px) {
  :root { --section-padding: 56px 0; }

  /* ── Navbar ── */
  .navbar          { padding: 8px 0; }

  /* ── Hero ── */
  #hero            { padding: 90px 0 48px; text-align: left; }
  .hero-headline   { font-size: 2rem; line-height: 1.18; }
  .hero-description { font-size: 0.94rem; margin-bottom: 28px; }

  .hero-cta-group  {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 36px;
  }
  .hero-cta-group .btn-gold,
  .hero-cta-group .btn-outline-gold {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 0.95rem;
  }

  /* Hero stats — equal thirds */
  .hero-stats      { padding-top: 22px; gap: 0; }
  .hero-stat       { flex: 1; padding: 0 10px; }
  .hero-stat .stat-number { font-size: 1.65rem; }
  .hero-stat .stat-label  { font-size: 0.65rem; }

  /* ── Section headings ── */
  .section-title   { font-size: 1.75rem; }
  .section-subtitle { font-size: 0.88rem; margin-bottom: 36px; }

  /* ── Services ── */
  .service-card    { padding: 26px 20px 22px; }

  /* ── Tech strip ── */
  #tech            { padding: 44px 0; }
  .tech-badge      { font-size: 0.74rem; padding: 8px 12px; }

  /* ── About ── */
  .about-illustration { max-width: 320px; margin: 0 auto 30px; }
  .about-feature-row  { gap: 12px; }

  /* ── Portfolio ── */
  .portfolio-thumb { height: 150px; font-size: 2.8rem; }

  /* ── Process ── */
  .process-step    { padding: 10px 6px; }
  .step-circle     { width: 64px; height: 64px; font-size: 1.2rem; }

  /* ── Why cards ── */
  .why-card        { padding: 18px; }

  /* ── Pricing ── */
  .pricing-card    { padding: 28px 20px; }
  .pricing-price .price-amount { font-size: 1.55rem; }

  /* ── Contact form ── */
  .contact-form-card { padding: 22px 16px; border-radius: var(--radius-lg); }
  .contact-info-card { padding: 22px 18px; }

  /* ── Footer ── */
  .site-footer     { padding: 44px 0 22px; }
  .footer-logo-img { height: 55px; }

  /* ── Back to top ── */
  #back-to-top     { bottom: 18px; right: 18px; width: 40px; height: 40px; font-size: 0.9rem; }

  /* ── Inner page hero ── */
  .page-hero       { padding: 100px 0 50px; }
  .page-hero h1    { font-size: 1.9rem; }
}

/* ── Small phones (≤ 480px) ── */
@media (max-width: 480px) {
  :root { --section-padding: 48px 0; }

  #hero            { padding: 82px 0 40px; }
  .hero-headline   { font-size: 1.75rem; }
  .availability-badge { font-size: 0.68rem; padding: 6px 14px; }

  .hero-stat .stat-number { font-size: 1.4rem; }
  .hero-stat .stat-label  { font-size: 0.60rem; letter-spacing: 0; }

  .section-title   { font-size: 1.5rem; }
  .section-badge   { font-size: 0.66rem; padding: 5px 14px; }
  .service-icon-wrap { width: 52px; height: 52px; font-size: 1.2rem; }

  .btn-gold,
  .btn-outline-gold { font-size: 0.87rem; padding: 12px 18px; }

  .testimonial-card  { padding: 22px 18px; }
  .contact-form-card { padding: 18px 14px; }

  .page-hero       { padding: 88px 0 44px; }
  .page-hero h1    { font-size: 1.6rem; }
  .page-hero p     { font-size: 0.9rem; }
}


/* ──────────────────────────────────────────────────────────────────────────
   22. Inner-page Hero Banner
   Used on all pages except index.html (shorter banner, not full-screen)
   ────────────────────────────────────────────────────────────────────────── */
.page-hero {
  padding: 140px 0 70px;
  background: var(--gradient-navy);
  position: relative;
  overflow: hidden;
  --color-muted: #94a3b8;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 500px;
  height: 500px;
  max-width: 60vw;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.16) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

/* Dot grid on inner page banner */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(37, 99, 235, 0.10) 1px, transparent 1px);
  background-size: 38px 38px;
  pointer-events: none;
}

.page-hero .container { position: relative; z-index: 1; }

.page-hero-eyebrow {
  font-size: 0.73rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-gold);
  margin-bottom: 12px;
  display: block;
}

.page-hero h1 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.2;
  margin-bottom: 16px;
}

.page-hero h1 span { color: var(--color-gold); }

.page-hero p {
  font-size: 1rem;
  color: var(--color-muted);
  line-height: 1.85;
  max-width: 560px;
}

/* Breadcrumb navigation on inner pages */
.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 22px;
  flex-wrap: wrap;
}

.breadcrumb-nav a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb-nav a:hover       { color: var(--color-gold); }
.breadcrumb-nav .bc-sep       { opacity: 0.4; }
.breadcrumb-nav .bc-current   { color: var(--color-gold); font-weight: 600; }


/* ──────────────────────────────────────────────────────────────────────────
   23. Logo Images
   ────────────────────────────────────────────────────────────────────────── */

/* ── Navbar logo ── */
.navbar-logo-link {
  padding: 0 !important;
  line-height: 1;
  background: transparent !important;
}

/* Navbar logo — no box, sits directly on white navbar */
.navbar-logo-wrap {
  display: inline-flex;
  align-items: center;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: opacity 0.22s ease;
}

.navbar-logo-wrap:hover { opacity: 0.78; }

/* Logo — controlled by width so the full landscape PNG fits naturally.
   height:auto preserves aspect ratio. No negative margins ever. */
/* Logo — Prominent, bold & readable display matching footer logo size */
.navbar-logo-img {
  height: 85px;
  width: auto;
  max-height: 95px;
  display: block;
  object-fit: contain;
  object-position: left center;
  transition: var(--ease-base);
}

/* Tablet */
@media (max-width: 991px) {
  .navbar-logo-img { height: 70px; max-height: 80px; }
}

/* Mobile */
@media (max-width: 767px) {
  .navbar-logo-img { height: 58px; max-height: 68px; }
}

/* Small phones */
@media (max-width: 480px) {
  .navbar-logo-img { height: 50px; max-height: 58px; }
}


/* ── Footer logo ── */
.footer-logo-wrap {
  display: inline-block;
  background: #ffffff;
  border-radius: 12px;
  padding: 12px 20px;
  margin-bottom: 18px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

.footer-logo-img {
  height: 85px;
  width: auto;
  display: block;
  object-fit: contain;
}

@media (max-width: 768px) {
  .footer-logo-img  { height: 65px; }
  .footer-logo-wrap { padding: 10px 14px; }
}


/* ──────────────────────────────────────────────────────────────────────────
   21. Team / Leadership Section (Reference Design)
   ────────────────────────────────────────────────────────────────────────── */
.team-section {
  background: var(--gradient-alt);
  position: relative;
  border-top: var(--border-faint);
}

.team-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 4px 20px rgba(17, 24, 39, 0.05);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(17, 24, 39, 0.11);
  border-color: rgba(29, 78, 216, 0.25);
}

/* Light top decorative header bar matching reference image */
.team-card-top-bar {
  height: 24px;
  background: #f1f5f9;
  border-bottom: 1px solid rgba(17, 24, 39, 0.04);
  width: 100%;
}

.team-card-body {
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Distinctive vertical capsule / stadium arch frame from reference */
.team-card-img-wrap {
  width: 165px;
  height: 215px;
  border-radius: 82px;
  margin: 0 auto 22px auto;
  overflow: hidden;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.07);
  position: relative;
  border: 1px solid rgba(17, 24, 39, 0.06);
  flex-shrink: 0;
}

.team-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s ease;
}

.team-card:hover .team-card-img-wrap img {
  transform: scale(1.05);
}

.team-card-name {
  font-size: 1.18rem;
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: 4px;
  line-height: 1.3;
}

.team-card-role {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-muted);
  margin-bottom: 12px;
  display: block;
}

.team-card-bio {
  font-size: 0.86rem;
  line-height: 1.62;
  color: #475569;
  margin-bottom: 20px;
  flex-grow: 1;
}

.team-card-bio strong {
  color: #1e293b;
  font-weight: 600;
}

.team-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 10px;
}

.team-read-more {
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e3a8a;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.team-read-more:hover {
  color: var(--color-gold-light);
  transform: translateX(2px);
}

.team-read-more i {
  font-size: 0.78rem;
  transition: transform 0.25s ease;
}

.team-read-more:hover i {
  transform: rotate(90deg);
}

/* Team Modal styling for full bio */
.team-modal .modal-content {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.team-modal .modal-header {
  border-bottom: 1px solid rgba(17, 24, 39, 0.07);
  background: #f8fafc;
  padding: 18px 24px;
}

.team-modal .modal-body {
  padding: 26px 24px;
}

.team-modal-avatar {
  width: 130px;
  height: 170px;
  border-radius: 65px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.08);
  flex-shrink: 0;
  background: #e2e8f0;
}

.team-modal-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ──────────────────────────────────────────────────────────────────────────
   22. Extended Modern Features (Theme Switcher, Progress Bar, Filter Tabs, Modal, Calculator, Matrix, Floating WhatsApp)
   ────────────────────────────────────────────────────────────────────────── */

/* ── Theme Tokens (Dark Mode Overrides) ── */
[data-theme="dark"] {
  --color-navy:         #0b0f19;   /* deep obsidian slate */
  --color-navy-light:   #111827;   /* elevated slate surface */
  --color-navy-mid:     #1e293b;   /* mid surface */
  --color-navy-card:    #161e2e;   /* card background */

  --color-gold:         #38bdf8;   /* bright sky blue glow accent */
  --color-gold-light:   #60a5fa;   /* vibrant accent */
  --color-gold-pale:    #93c5fd;

  --color-white:        #ffffff;
  --color-text:         #f8fafc;   /* crisp white text */
  --color-muted:        #94a3b8;   /* slate gray text */

  --border-faint:  1px solid rgba(255, 255, 255, 0.08);
  --border-light:  1px solid rgba(255, 255, 255, 0.15);
  --border-mid:    1px solid rgba(56, 189, 248, 0.40);

  --shadow-card:   0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-hover:  0 14px 45px rgba(0, 0, 0, 0.55);
  --shadow-gold:   0 8px 28px rgba(56, 189, 248, 0.25);

  --gradient-gold:      linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
  --gradient-navy:      linear-gradient(135deg, #070a12 0%, #0f172a 45%, #1e293b 100%);
  --gradient-section:   linear-gradient(180deg, #0b0f19 0%, #111827 100%);
  --gradient-alt:       linear-gradient(135deg, #111827 0%, #1e293b 100%);
}

[data-theme="dark"] .navbar {
  background: rgba(11, 15, 25, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .nav-link {
  color: rgba(248, 250, 252, 0.80) !important;
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.is-active {
  color: var(--color-gold) !important;
}

[data-theme="dark"] .team-card {
  background: #161e2e;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .team-card-top-bar {
  background: #1e293b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .team-card-name {
  color: #60a5fa;
}

[data-theme="dark"] .team-card-bio {
  color: #94a3b8;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: #161e2e;
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .form-control::placeholder {
  color: #64748b;
}

[data-theme="dark"] .tech-tab-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(248, 250, 252, 0.85);
}

[data-theme="dark"] .tech-tab-btn.active,
[data-theme="dark"] .tech-tab-btn:hover {
  background: var(--gradient-gold);
  border-color: transparent;
  color: #ffffff !important;
  box-shadow: var(--shadow-gold);
}

[data-theme="dark"] .tech-badge {
  background: #161e2e;
  border-color: rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}

[data-theme="dark"] .filter-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(248, 250, 252, 0.85);
}

/* ── Scroll Progress Bar ── */
.scroll-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 10001;
}

.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--gradient-gold);
  transition: width 0.08s ease-out;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.8);
}

/* ── Theme Switcher Toggle Button ── */
.theme-toggle-btn {
  background: rgba(29, 78, 216, 0.08);
  border: 1px solid rgba(29, 78, 216, 0.22);
  color: var(--color-gold);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--ease-base);
  font-size: 1.05rem;
}

.theme-toggle-btn:hover {
  transform: rotate(20deg) scale(1.08);
  background: var(--color-gold);
  color: #ffffff;
  box-shadow: var(--shadow-gold);
}

/* ── Portfolio Filter Bar ── */
.portfolio-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 40px;
}

.filter-btn {
  background: rgba(17, 24, 39, 0.04);
  border: var(--border-light);
  color: var(--color-text);
  padding: 8px 22px;
  border-radius: 25px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ease-base);
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--gradient-gold);
  color: #ffffff !important;
  border-color: transparent;
  box-shadow: var(--shadow-gold);
}

/* Portfolio Card Clickable Cursor & Hint */
.portfolio-card {
  cursor: pointer;
}

.portfolio-card .click-hint {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  transition: var(--ease-fast);
}

.portfolio-card:hover .click-hint {
  transform: translateX(4px);
}

/* ── Case Study Modal Styling ── */
.case-modal .modal-content {
  background: var(--color-navy-card);
  color: var(--color-text);
  border-radius: var(--radius-xl);
  border: var(--border-light);
  box-shadow: var(--shadow-hover);
  overflow: hidden;
}

.case-modal .modal-header {
  border-bottom: var(--border-faint);
  padding: 20px 28px;
}

.case-modal .modal-body {
  padding: 28px;
}

.case-modal-hero-icon {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  margin-bottom: 20px;
  box-shadow: var(--shadow-gold);
}

.case-modal-metric {
  background: rgba(29, 78, 216, 0.06);
  border: var(--border-faint);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  text-align: center;
}

.case-modal-metric .metric-val {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-gold);
}

.case-modal-metric .metric-lbl {
  font-size: 0.75rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Comparison Table Matrix ── */
.comparison-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: var(--border-light);
  background: var(--color-navy-card);
  box-shadow: var(--shadow-card);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.92rem;
}

.comparison-table th,
.comparison-table td {
  padding: 16px 22px;
  border-bottom: var(--border-faint);
  vertical-align: middle;
}

.comparison-table th {
  background: rgba(29, 78, 216, 0.06);
  font-weight: 700;
  color: var(--color-text);
}

.comparison-table .grps-col {
  background: rgba(29, 78, 216, 0.08);
  font-weight: 600;
}

.comparison-table th.grps-col {
  color: var(--color-gold);
  font-size: 1.05rem;
}

.comparison-table .check-yes {
  color: #22c55e;
  font-size: 1.1rem;
}

.comparison-table .check-no {
  color: #ef4444;
  font-size: 1.1rem;
}

.comparison-table .check-partial {
  color: #f59e0b;
  font-size: 1.1rem;
}

/* ── Interactive Quote Estimator Calculator ── */
.quote-calc-card {
  background: var(--color-navy-card);
  border: var(--border-mid);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--shadow-hover);
}

.calc-step-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.calc-step-title span {
  width: 28px;
  height: 28px;
  background: var(--gradient-gold);
  color: #ffffff;
  border-radius: 50%;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calc-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.calc-option-card {
  border: 1.5px solid rgba(17, 24, 39, 0.12);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  cursor: pointer;
  transition: var(--ease-base);
  background: transparent;
  text-align: left;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
}

.calc-option-card:hover {
  border-color: var(--color-gold);
  transform: translateY(-2px);
}

.calc-option-card.selected {
  border-color: var(--color-gold);
  background: rgba(29, 78, 216, 0.08);
  box-shadow: var(--shadow-gold);
}

.calc-option-card .opt-icon {
  font-size: 1.4rem;
  color: var(--color-gold);
}

.calc-option-card .opt-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-text);
  margin-bottom: 2px;
}

.calc-option-card .opt-desc {
  font-size: 0.78rem;
  color: var(--color-muted);
}

.calc-total-banner {
  background: var(--gradient-gold);
  color: #ffffff;
  border-radius: var(--radius-lg);
  padding: 26px 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: var(--shadow-gold);
}

.calc-total-banner .total-price {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
}

/* ── Floating WhatsApp & Action Widget ── */
.whatsapp-float-widget {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 9990;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.whatsapp-float-btn {
  width: 56px;
  height: 56px;
  background: #25d366;
  color: #ffffff !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45);
  transition: var(--ease-base);
  text-decoration: none;
  position: relative;
}

.whatsapp-float-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.65);
}

.whatsapp-status-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background: #22c55e;
  border: 2.5px solid #ffffff;
  border-radius: 50%;
}

.whatsapp-tooltip {
  background: rgba(15, 23, 42, 0.92);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  opacity: 0;
  transform: translateX(10px);
  transition: var(--ease-base);
}

.whatsapp-float-widget:hover .whatsapp-tooltip {
  opacity: 1;
  transform: translateX(0);
}

/* Tech Category Tabs in Tech Stack Section */
.tech-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.tech-tab-btn {
  background: rgba(17, 24, 39, 0.05);
  border: 1px solid rgba(17, 24, 39, 0.15);
  color: #1e293b;
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ease-fast);
}

.tech-tab-btn.active,
.tech-tab-btn:hover {
  background: var(--gradient-gold);
  border-color: transparent;
  color: #ffffff !important;
  box-shadow: var(--shadow-gold);
}

/* Additional Responsive Adjustments */
@media (max-width: 768px) {
  .portfolio-filter-bar { gap: 6px; }
  .filter-btn { padding: 6px 14px; font-size: 0.8rem; }
  .calc-total-banner { flex-direction: column; text-align: center; justify-content: center; }
  .whatsapp-float-btn { width: 50px; height: 50px; font-size: 1.6rem; }
}


/* ──────────────────────────────────────────────────────────────────────────
   23. Polish, Accessibility & Responsive Refinements (v2.1)
   ────────────────────────────────────────────────────────────────────────── */

/* Readability */
body { font-size: 1rem; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
p { overflow-wrap: break-word; }
.section-subtitle, .page-hero p { max-width: 680px; margin-left: auto; margin-right: auto; line-height: 1.8; }
.service-card p, .why-card p, .process-step p, .pricing-card li { line-height: 1.75; }
main section[id], section[id] { scroll-margin-top: 90px; }

/* Skip link (keyboard / screen-reader users) */
.skip-link {
  position: fixed; top: -60px; left: 12px; z-index: 20000;
  background: var(--color-gold); color: #ffffff !important;
  padding: 10px 18px; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600; font-size: 0.9rem; transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

/* Clear focus states */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .nav-link:focus-visible {
  outline: 3px solid var(--color-gold-light);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Buttons: allow wrapping gracefully, comfortable tap targets */
.btn-gold, .btn-outline-gold { min-height: 46px; }
.theme-toggle-btn, .social-btn { min-width: 40px; min-height: 40px; }

/* Back-to-top no longer overlaps the floating WhatsApp button */
#back-to-top { bottom: 96px; right: 29px; z-index: 9980; }

/* Footer link hover + contact link legibility */
.footer-link-list a, .footer-contact-line a { transition: color 0.2s ease, padding-left 0.2s ease; }
.footer-link-list a:hover { padding-left: 4px; }
.footer-contact-line a:hover { color: var(--color-gold-pale) !important; }

/* Tables and media never break layout */
table { max-width: 100%; }
.comparison-table-wrap { -webkit-overflow-scrolling: touch; }
iframe, video, svg { max-width: 100%; }

/* Forms: 16px font prevents iOS zoom-on-focus */
.form-control, .form-select { font-size: 1rem; min-height: 46px; }
textarea.form-control { min-height: 120px; }

/* Tablet and below */
@media (max-width: 991px) {
  .section-title { font-size: clamp(1.6rem, 4.5vw, 2.1rem); }
  .page-hero { padding: 120px 0 56px; }
  .navbar-collapse { max-height: calc(100vh - 80px); overflow-y: auto; }
}

/* Phones */
@media (max-width: 767px) {
  .container { padding-left: 18px; padding-right: 18px; }
  /* CTA button pairs stack, full width, no side margin hacks */
  .btn-gold.me-3, .btn-outline-gold.me-3 { margin-right: 0 !important; }
  section .container.text-center > .btn-gold,
  section .container.text-center > .btn-outline-gold {
    display: flex; justify-content: center; width: 100%; max-width: 360px; margin: 0 auto 12px;
  }
  .service-card .btn-gold, .pricing-card .btn-gold, .pricing-card .btn-outline-gold { width: 100%; justify-content: center; }
  .footer-bottom-bar { flex-direction: column; text-align: center; gap: 8px; }
  .site-footer .col-6 { width: 50%; }
  .social-row { justify-content: flex-start; }
  .page-hero { padding: 104px 0 46px; }
  .page-hero h1 { line-height: 1.2; }
  .breadcrumb-nav { font-size: 0.82rem; flex-wrap: wrap; }
  .comparison-table th, .comparison-table td { padding: 12px 14px; font-size: 0.84rem; white-space: nowrap; }
  .quote-calc-card { padding: 22px 16px; }
  .calc-total-banner .total-price { font-size: 1.8rem; }
  #back-to-top { bottom: 82px; right: 22px; }
  .whatsapp-float-widget { bottom: 18px; right: 18px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .navbar-logo-img { height: 44px; max-height: 50px; }
  .section-title { font-size: 1.35rem; }
  .tech-badge { font-size: 0.7rem; padding: 6px 10px; }
  .site-footer .col-6 { width: 100%; }
}

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

/* Print: clean output */
@media print {
  .site-header, .whatsapp-float-widget, #back-to-top, .scroll-progress-container, .theme-toggle-btn { display: none !important; }
  body { background: #fff; color: #000; }
}

.contact-item-value a { color: inherit; transition: color 0.2s ease; }
.contact-item-value a:hover { color: var(--color-gold); text-decoration: underline; }