/* Lotus Design Studio - Custom styles for small tweaks beyond Tailwind */
/* Brand colors for reference: light #FEFEFE, grayLight #ECF1F5, textDark #424242, primary #255096 */

html, body {
    overflow-x: hidden !important;
}

/* Smooth selection color */
::selection { background: #255096; color: #FEFEFE; }

/***** Form helpers *****/
.input-field { width: 100%; border-radius: 0.375rem; border: 1px solid #d1d5db; background: #ffffff; padding: 0.5rem 1rem; font-size: 0.875rem; color: #1f2937; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: all 200ms ease; outline: none; }
.input-field::placeholder { color: #9ca3af; }
.input-field:focus { border-color: #255096; box-shadow: 0 0 0 2px rgba(37,80,150,0.3); }
/* .input-field:invalid { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.2); } */
.input-field:disabled { background: #f8fafc; color: #94a3b8; cursor: not-allowed; }
.textarea-field { width: 100%; border-radius: 0.375rem; border: 1px solid #d1d5db; background: #ffffff; padding: 0.5rem 1rem; font-size: 0.875rem; color: #1f2937; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: all 200ms ease; outline: none; min-height: 140px; }
.textarea-field::placeholder { color: #9ca3af; }
.textarea-field:focus { border-color: #255096; box-shadow: 0 0 0 2px rgba(37,80,150,0.3); }
/* .textarea-field:invalid { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.2); } */
.textarea-field:disabled { background: #f8fafc; color: #94a3b8; cursor: not-allowed; }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.375rem; background-color: #255096; padding: 0.625rem 1.25rem; color: #ffffff; font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: all 200ms ease; }
.btn-primary:hover { background-color: #1f4380; }
.btn-primary:focus { outline: 2px solid rgba(37,80,150,0.4); outline-offset: 2px; }
.btn-secondary { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.375rem; border: 1px solid rgba(255,255,255,0.8); padding: 0.625rem 1.25rem; color: #ffffff; font-weight: 500; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: all 200ms ease; }
.btn-secondary:hover { background-color: #ffffff; color: #255096; }

/***** Utilities *****/
.transition-base { transition: all 200ms ease; }
.elevate-on-hover { transition: transform 200ms ease, box-shadow 200ms ease; }
.elevate-on-hover:hover { transform: translateY(-3px); box-shadow: 0 12px 22px -12px rgba(0,0,0,.25); }
.section-subtitle { color: #64748b; margin-top: .5rem; }

/***** Mobile menu *****/
#mobile-menu a { display: block; border-radius: 0.375rem; padding: 0.5rem 0.75rem; font-size: 15px; color: #374151; transition: all 200ms ease; }
#mobile-menu a:hover { background: #f3f4f6; color: #255096; }

/* ---------------- Additional enhanced styles ---------------- */
:root {
  --color-primary: #255096;
  --color-light: #FEFEFE;
  --color-grayLight: #ECF1F5;
  --color-textDark: #424242;
}

html, body { scroll-behavior: smooth; }

/* Modern brand scrollbar */
* { scrollbar-width: thin; scrollbar-color: #9db0d8 #eef2f7; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #eef2f7; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #255096, #1f3f7a); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #1f3f7a, #0f2a5c); }

/* Brand gradient and improved buttons */
.bg-gradient-primary {
  background-image: linear-gradient(135deg, #255096 0%, #1f3f7a 55%, #0f2a5c 100%);
}

/* Buttons: subtle shine on primary + ghost variant */
.btn-primary { position: relative; overflow: hidden; background-image: linear-gradient(135deg, #255096 0%, #1f3f7a 55%, #0f2a5c 100%); box-shadow: 0 10px 15px -3px rgba(37,80,150,0.25), 0 4px 6px -4px rgba(37,80,150,0.25); transform: translateY(0); }
.btn-primary::after { content: ''; position: absolute; top: -120%; left: -40%; width: 30%; height: 340%; background: linear-gradient(120deg, rgba(255,255,255,.0), rgba(255,255,255,.24), rgba(255,255,255,0)); transform: skewX(-18deg); pointer-events: none; transition: left 400ms ease; }
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(-1px); }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 0.375rem;
  border: 1px solid rgba(255,255,255,0.8); padding: 0.625rem 1.25rem; color: #ffffff;
  font-weight: 500; transition: all 200ms ease; backdrop-filter: saturate(140%) blur(2px);
}
.btn-outline:hover { background: #ffffff; color: var(--color-primary); }
.btn-outline:focus { outline: 2px solid rgba(37,80,150,0.4); outline-offset: 2px; }
.btn-primary:hover::after { left: 120%; }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1rem; border-radius: 0.375rem; color: var(--color-primary); background: transparent; transition: all 200ms ease; }
.btn-ghost:hover { background: rgba(37,80,150,0.08); }

/* Services button: gradient border with subtle frosted background */
.btn-services {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 0.625rem 1.25rem; border-radius: 0.5rem; font-weight: 500;
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.10)) padding-box,
    linear-gradient(135deg, #255096, #1f3f7a) border-box;
  color: #ffffff; backdrop-filter: saturate(140%) blur(2px);
  transition: all 220ms ease;
}
.btn-services:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.16)) padding-box,
    linear-gradient(135deg, #255096, #1f3f7a) border-box;
  box-shadow: 0 10px 18px -10px rgba(37,80,150,.35);
}
.btn-services:active { transform: translateY(-1px); }
.btn-services svg { width: 18px; height: 18px; display: block; transition: transform 220ms ease; }
.btn-services:hover svg { transform: translateX(3px); }
.btn-services:focus { outline: 2px solid rgba(37,80,150,0.4); outline-offset: 2px; }

/* Filter chips for portfolio */
.filter-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .875rem; border-radius: 9999px;
  font-size: .875rem; font-weight: 500;
  color: #374151; background: #ffffff; border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: all 180ms ease;
}
.filter-chip:hover { color: var(--color-primary); border-color: #dbe3f4; box-shadow: 0 8px 16px -10px rgba(37,80,150,.25); transform: translateY(-1px); }
.filter-chip.active, .filter-chip[aria-pressed="true"] {
  color: #fff; background: linear-gradient(135deg, #255096, #1f3f7a);
  border-color: transparent; box-shadow: 0 10px 20px -12px rgba(37,80,150,.35);
}
.filter-chip:focus-visible { outline: 3px solid rgba(37,80,150,0.35); outline-offset: 2px; }

/* CTA shine effect */
.cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: -120px; width: 120px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0)); transform: skewX(-12deg); pointer-events: none; opacity: .6; }
.cta:hover::after { animation: ctaShine 1100ms ease forwards; }
@keyframes ctaShine { to { left: 110%; } }

/* Nav link underline and active state */
.nav-link { position: relative; font-weight: 500; color: #374151; transition: color 200ms ease; }
.nav-link:hover { color: var(--color-primary); }
.nav-link.active { color: var(--color-primary); }
.nav-link::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--color-primary); border-radius: 9999px; transition: width 200ms ease; }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Floating WhatsApp button */
.whatsapp-fab { position: fixed; right: 20px; bottom: 20px; z-index: 60; }
.whatsapp-fab a { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 9999px; background: #25D366; color: #ffffff; box-shadow: 0 12px 20px -8px rgba(37,80,150,0.35), 0 6px 10px -6px rgba(0,0,0,0.2); transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease; }
.whatsapp-fab a:hover { transform: translateY(-3px); filter: brightness(1.05); box-shadow: 0 16px 28px -12px rgba(37,80,150,0.45), 0 8px 14px -8px rgba(0,0,0,0.25); }
.whatsapp-fab .pulse-ring { position: absolute; inset: 0; border-radius: 9999px; box-shadow: 0 0 0 0 rgba(37,211,102,0.6); animation: pulseRing 2s infinite; }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.45); } 70% { box-shadow: 0 0 0 18px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
@media (max-width: 640px) { .whatsapp-fab { right: 14px; bottom: 14px; } .whatsapp-fab a { width: 52px; height: 52px; } }

/* Section titles */
.section-title { position: relative; padding-bottom: 0.75rem; }
.section-title::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px;
  background: linear-gradient(90deg, #255096, #1f3f7a); border-radius: 9999px;
}

/* Card enhancements */
.card {
  border-radius: 0.75rem; background: #ffffff; padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid #f3f4f6;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 20px -8px rgba(37,80,150,0.25), 0 6px 10px -6px rgba(0,0,0,.1); border-color: #e5e7eb; }
.feature-icon { height: 2.5rem; width: 2.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; color: #255096; background: rgba(37,80,150,0.08); transition: transform 200ms ease, background-color 200ms ease; }
.card:hover .feature-icon { transform: scale(1.06); background: rgba(37,80,150,0.12); }
.badge-step { display: inline-flex; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center; border-radius: 9999px; color: #ffffff; font-weight: 600; background-image: linear-gradient(135deg, #255096, #1f3f7a); box-shadow: 0 6px 12px -4px rgba(37,80,150,.4); }

/* Portfolio card hover overlay */
[data-portfolio-item] .portfolio-hover {
  position: absolute; inset: 0; background: rgba(0,0,0,0.45);
  opacity: 0; display: flex; align-items: center; justify-content: center;
  transition: opacity 200ms ease;
}
[data-portfolio-item]:hover .portfolio-hover { opacity: 1; }

/* Subtle patterns and hero accent */
.bg-grid {
  background-image: linear-gradient(to right, rgba(16,24,40,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,24,40,.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.hero-pattern::before {
  content: ''; position: absolute; inset: -40% -20% auto -20%; height: 120%;
  background: radial-gradient(closest-side, rgba(37,80,150,.5), transparent 65%) 0 0/40rem 40rem no-repeat,
              radial-gradient(closest-side, rgba(37,80,150,.5), transparent 65%) 60% -20%/40rem 40rem no-repeat;
  pointer-events: none; z-index: -1;
}
.hero-pattern::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,24,40,.1), rgba(16,24,40,.6)); z-index: -1; }

/* Full-screen hero helper */
.hero-full { min-height: calc(100vh - 4rem); display: flex; align-items: center; }
@supports (height: 100svh) {
  .hero-full { min-height: calc(100svh - 4rem); }
}
/* Brand-tinted overlay utility for hero images */
.hero-overlay-brand {
  background: linear-gradient(135deg,
    rgba(37,80,150,0.70),
    rgba(31,63,122,0.62),
    rgba(15,42,92,0.60));
}

/* Quote mark style for testimonials */
.quote-mark { position: relative; padding-left: 2rem; }
.quote-mark::before { content: '“'; position: absolute; left: 0; top: -0.75rem; font-size: 3rem; line-height: 1; color: rgba(37,80,150,0.2); }

/* Header behavior on scroll */
#site-header { transition: background-color 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
#site-header.scrolled { background: rgba(255,255,255,0.9); box-shadow: 0 10px 10px -10px rgba(0,0,0,.2); backdrop-filter: blur(8px); border-color: #e5e7eb; }

/* Animated mobile menu */
#mobile-menu.open { animation: menuSlide 200ms ease; }
@keyframes menuSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* Call-to-action block */
.cta { position: relative; overflow: hidden; border-radius: 0.75rem; color: #ffffff; }
.cta.bg-gradient-primary { box-shadow: 0 24px 40px -20px rgba(37,80,150,0.6); }
.cta::before { content: ''; position: absolute; inset: -20% -10% auto; height: 220px; background: radial-gradient(closest-side, rgba(255,255,255,.25), transparent 70%); }

/* ---------------- Global polish additions (2025-08) ---------------- */
/* Typography and smoothing */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { line-height: 1.6; }

/* Gradient text utility */
.text-gradient {
  background: linear-gradient(135deg, #f8fafc, #ecf1f5, #d1d5db);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Header compact behavior */
#site-header nav { transition: height 200ms ease; }
#site-header.scrolled nav { height: 70px !important; }
#site-header img { transition: transform 200ms ease, filter 200ms ease; }
#site-header.scrolled img { transform: scale(0.92); filter: saturate(110%); }

@media (max-width: 768px) {
    #site-header.scrolled #mobile-menu { height: 200px !important; }
}

/* Mobile menu overlay and body scroll lock */
body.menu-open { overflow: hidden; }
.modal-open { overflow: hidden; }
.menu-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 200ms ease; z-index: 40; /* below header (z-50) */
}
.menu-overlay.show { opacity: 1; }

/* Card gradient border on hover */
.card { position: relative; }
.card::before {
  content: ''; position: absolute; inset: -1px; border-radius: 0.85rem;
  background: linear-gradient(135deg, rgba(37,80,150,.0), rgba(37,80,150,.22), rgba(31,63,122,.0));
  z-index: 0; opacity: 0; transition: opacity 200ms ease;
}
.card > * { position: relative; z-index: 1; }
.card:hover::before { opacity: 1; }

.card:hover h3 { color: var(--color-primary); }

.image-framed {
  display: block; border-radius: 0.75rem; border: 1px solid #e5e7eb;
  box-shadow: 0 12px 20px -8px rgba(37,80,150,0.15), 0 6px 10px -6px rgba(0,0,0,0.08);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.image-framed:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -12px rgba(37,80,150,0.25), 0 8px 14px -8px rgba(0,0,0,0.12); }

#clients img {
  background: #ffffff; padding: 8px 16px; border-radius: 0.75rem; border: 1px solid #eef2f7;
  box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}
#clients img:hover { transform: translateY(-3px); box-shadow: 0 12px 20px -8px rgba(37,80,150,0.18), 0 6px 10px -6px rgba(0,0,0,0.08); }

/* Responsive spacing for Clients & Testimonials */
@media (max-width: 768px) {
  #clients .grid { gap: 1.25rem; }
}
@media (max-width: 640px) {
  #clients .grid { gap: 0.5rem; }
  #clients img { padding: 10px 12px; }
  .testimonial-card { padding: 1.25rem !important; }
}

.testimonial-card {
  border-radius: 1rem; background: #ffffff;
  box-shadow: 0 10px 24px -12px rgba(37,80,150,0.20), 0 6px 10px -6px rgba(0,0,0,0.08);
  border: 1px solid #eef2f7; position: relative;
}
/* .testimonial-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, #255096, #1f3f7a);
  border-top-left-radius: 1rem; border-top-right-radius: 1rem;
} */

/* Scroll-to-top button */
.scroll-top {
  position: fixed; right: 20px; bottom: 90px; z-index: 50; /* above WhatsApp */
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 9999px; color: #ffffff;
  background-image: linear-gradient(135deg, #255096, #1f3f7a);
  box-shadow: 0 12px 20px -8px rgba(37,80,150,0.35), 0 6px 10px -6px rgba(0,0,0,0.2);
  transform: translateY(8px); opacity: 0; pointer-events: none; transition: all 220ms ease;
}
.scroll-top.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
@media (max-width: 640px) { .scroll-top { right: 14px; bottom: 80px; } }

/* Footer top gradient bar */
footer::before {
  content: ''; display: block; height: 3px;
  background: linear-gradient(90deg, #255096, #1f3f7a);
}

/* Footer social icons */
.footer-social { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9999px;
  background: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb;
  transition: all 180ms ease;
}
.footer-social a:hover { color: var(--color-primary); background: #ffffff; border-color: #dbe3f4; box-shadow: 0 8px 16px -10px rgba(37,80,150,.22); transform: translateY(-1px); }
.footer-social a:focus-visible { outline: 3px solid rgba(37,80,150,0.35); outline-offset: 2px; }
.footer-social svg { width: 18px; height: 18px; display: block; }

/* Focus-visible improvements */
.btn-primary:focus-visible, .btn-outline:focus-visible, .btn-ghost:focus-visible, .btn-services:focus-visible,
.input-field:focus-visible, .textarea-field:focus-visible, a:focus-visible {
  outline: 3px solid rgba(37,80,150,0.35); outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Lightbox modal */
.lightbox { position: fixed; inset: 0; z-index: 70; display: none; }
.lightbox.show { display: block; }
.lightbox .backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.8); }
.lightbox .dialog { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; }
.lightbox .panel { position: relative; width: min(92vw, 1000px); background: #0f172a; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6); }
.lightbox .media { background: #000; }
.lightbox .media img { width: 100%; height: auto; display: block; }
.lightbox .info { padding: 16px 20px; color: #e5e7eb; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)); }
.lightbox .info .title { font-weight: 600; color: #fff; }
.lightbox .info .desc { font-size: 0.9rem; color: #cbd5e1; margin-top: 4px; }
.lightbox .ctrl { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 9999px; background: rgba(255,255,255,0.1); backdrop-filter: blur(6px); color: #fff; border: 1px solid rgba(255,255,255,0.2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lightbox .ctrl:hover { background: rgba(255,255,255,0.18); }
.lightbox .prev { left: 12px; }
.lightbox .next { right: 12px; }
.lightbox .close { position: absolute; top: 10px; right: 10px; width: 42px; height: 42px; border-radius: 9999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.lightbox .close:hover { background: rgba(255,255,255,0.2); }
@media (max-width: 640px) {
  .lightbox .ctrl { width: 40px; height: 40px; }
  .lightbox .panel { width: 94vw; }
  .lightbox .info { padding: 12px 14px; }
}
/* ---------------- Page-specific enhancements: About & Services (2025-08) ---------------- */
/* Eyebrow label */
.eyebrow {
  display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-primary);
  background: rgba(37,80,150,0.08); border: 1px solid rgba(37,80,150,0.15);
  padding: .375rem .625rem; border-radius: 9999px;
}

/* Stat/KPI card */
.stat-card {
  display: inline-flex; align-items: center; gap: 12px; padding: 0.875rem 1rem;
  background: #ffffff; border-radius: 0.75rem; border: 1px solid #eef2f7;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.stat-card .value { font-weight: 700; font-size: 1.75rem; line-height: 1; color: var(--color-primary); }
.stat-card .label { color: #64748b; font-size: .875rem; }

/* Service card tweaks */
.service-card p { color: #4b5563; }
.service-card .learn {
  display: inline-flex; align-items: center; gap: .375rem; margin-top: .75rem;
  color: var(--color-primary); font-weight: 500; transition: color 180ms ease;
}
.service-card .learn:hover { color: #1f3f7a; }
.service-card .learn svg { width: 16px; height: 16px; display: block; transition: transform 180ms ease; }
.service-card .learn:hover svg { transform: translateX(3px); }