@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;600;700;800;900&display=swap');

/* === Custom Properties === */
:root {
  --primary: hsl(200, 42%, 70%);
  --primary-fg: hsl(200, 50%, 18%);
  --secondary: hsl(45, 93%, 53%);
  --secondary-fg: hsl(200, 50%, 18%);
  --muted: hsl(210, 40%, 96%);
  --muted-fg: hsl(215, 16%, 47%);
  --border: hsl(214, 32%, 91%);
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;
  --wa-green: #25D366;
  --fb-blue: #1877F2;
  --font-body: 'Inter', sans-serif;
  --font-display: 'Outfit', sans-serif;
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: #fff; color: var(--slate-700); -webkit-font-smoothing: antialiased; line-height: 1.6; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; color: var(--slate-900); line-height: 1.2; }
::selection { background: var(--secondary); color: var(--secondary-fg); }

/* === Icons === */
.icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: inline-block; flex-shrink: 0; }
.icon-solid { fill: currentColor; stroke: none; display: inline-block; flex-shrink: 0; }

/* === Layout === */
.container { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }
.section { padding: 4rem 0; }
@media (min-width: 768px) { .section { padding: 6rem 0; } }

/* === Animations === */
.anim { opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; }
.anim-up { transform: translateY(24px); }
.anim-left { transform: translateX(-40px); }
.anim-right { transform: translateX(40px); }
.anim-scale { transform: scale(0.92); }
.anim.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* === Navigation === */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
  padding: 1.25rem 0;
}
.nav.scrolled {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 8px rgba(0,0,0,0.08);
  padding: 0.75rem 0;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; align-items: center; gap: 0.75rem; }
.nav-logo-img { height: 3rem; width: auto; object-fit: contain; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border: 1px solid var(--slate-100); }
.nav-logo-text { display: none; }
@media (min-width: 640px) { .nav-logo-text { display: block; } }
.nav-logo-title { display: block; font-size: 1.125rem; font-family: var(--font-display); font-weight: 700; line-height: 1; color: white; transition: color 0.3s; }
.nav-logo-sub { font-size: 0.75rem; font-weight: 500; opacity: 0.9; color: white; transition: color 0.3s; }
.nav.scrolled .nav-logo-title, .nav.scrolled .nav-logo-sub { color: var(--slate-800); }

.nav-links { display: none; align-items: center; gap: 2rem; list-style: none; }
@media (min-width: 768px) { .nav-links { display: flex; } }
.nav-links a { font-size: 0.875rem; font-weight: 600; color: rgba(241,245,249,0.92); transition: color 0.2s; text-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.nav-links a:hover { color: var(--secondary); }
.nav.scrolled .nav-links a { color: var(--slate-600); text-shadow: none; }
.nav.scrolled .nav-links a:hover { color: var(--secondary); }

.nav-actions { display: none; align-items: center; gap: 0.625rem; }
@media (min-width: 768px) { .nav-actions { display: flex; } }

.btn-call {
  display: inline-flex; align-items: center; gap: 0.375rem;
  background: var(--secondary); color: var(--secondary-fg);
  padding: 0.5rem 1.125rem; border-radius: 9999px;
  font-weight: 700; font-size: 0.875rem;
  box-shadow: 0 4px 12px rgba(245,192,15,0.3);
  transition: all 0.3s;
}
.btn-call:hover { box-shadow: 0 6px 18px rgba(245,192,15,0.4); transform: translateY(-1px); }

.btn-wa {
  display: inline-flex; align-items: center; gap: 0.375rem;
  background: var(--wa-green); color: white;
  padding: 0.5rem 1rem; border-radius: 9999px;
  font-weight: 700; font-size: 0.875rem;
  box-shadow: 0 4px 12px rgba(37,211,102,0.3);
  transition: all 0.3s;
}
.btn-wa:hover { box-shadow: 0 6px 18px rgba(37,211,102,0.4); transform: translateY(-1px); }

.nav-toggle {
  display: flex; align-items: center; justify-content: center;
  padding: 0.5rem; border-radius: 0.5rem;
  color: white; background: rgba(0,0,0,0.2); backdrop-filter: blur(4px);
  transition: background 0.2s, color 0.2s;
}
@media (min-width: 768px) { .nav-toggle { display: none; } }
.nav.scrolled .nav-toggle { color: var(--slate-700); background: var(--slate-100); }

/* Mobile Menu */
.mobile-menu { display: none; background: white; border-bottom: 1px solid var(--slate-100); box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.mobile-menu.open { display: block; }
.mobile-menu-inner { padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 0; }
@media (min-width: 640px) { .mobile-menu-inner { padding: 1.5rem 1.5rem; } }
.mobile-menu-inner .menu-link {
  font-size: 1.125rem; font-weight: 500; color: var(--slate-700);
  padding: 0.625rem 0; border-bottom: 1px solid var(--slate-50); display: block;
}
.mobile-menu-inner .menu-link:last-of-type { border-bottom: none; margin-bottom: 1rem; }
.mobile-btn-call {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--primary); color: var(--primary-fg);
  padding: 0.75rem; border-radius: 0.75rem; font-weight: 700; margin-bottom: 0.5rem;
}
.mobile-btn-wa {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--wa-green); color: white;
  padding: 0.75rem; border-radius: 0.75rem; font-weight: 700;
}

/* === Hero === */
.hero {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(15,23,42,0.90), rgba(15,23,42,0.40));
  backdrop-filter: blur(1px);
}
.hero-content { position: relative; z-index: 10; padding-top: 5rem; width: 100%; }
.hero-inner { max-width: 48rem; margin-bottom: 4rem; }

.hero-badge {
  display: inline-block; padding: 0.5rem 1rem; border-radius: 0.5rem;
  background: var(--secondary); color: var(--secondary-fg);
  font-weight: 700; font-size: 0.875rem; letter-spacing: 0.1em;
  margin-bottom: 1.5rem; box-shadow: 0 4px 12px rgba(245,192,15,0.25);
}
.hero-title {
  font-size: clamp(2.25rem, 7vw, 4.5rem); font-weight: 800; color: white;
  line-height: 1.1; margin-bottom: 1.5rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}
.hero-title span { color: var(--secondary); }
.hero-sub {
  font-size: 1.25rem; color: rgba(226,232,240,0.92); margin-bottom: 2.5rem;
  max-width: 40rem; line-height: 1.7; font-weight: 500;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}
.hero-btns { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .hero-btns { flex-direction: row; } }

.btn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--secondary); color: var(--secondary-fg);
  padding: 1rem 2rem; border-radius: 0.75rem; font-weight: 700; font-size: 1.125rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2); transition: all 0.3s;
}
.btn-cta:hover { background: white; color: var(--primary-fg); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: rgba(255,255,255,0.1); backdrop-filter: blur(12px); color: white;
  border: 1px solid rgba(255,255,255,0.2); padding: 1rem 2rem;
  border-radius: 0.75rem; font-weight: 700; font-size: 1.125rem; transition: background 0.3s;
}
.btn-ghost:hover { background: rgba(255,255,255,0.2); }

.scroll-indicator {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.5); animation: bounce 2s ease infinite 1s;
}
.scroll-mouse {
  width: 1.5rem; height: 2.5rem; border: 2px solid currentColor;
  border-radius: 9999px; display: flex; justify-content: center; padding: 0.25rem;
}
.scroll-dot { width: 0.25rem; height: 0.5rem; background: currentColor; border-radius: 9999px; }
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}

/* === Trust Bar === */
.trust-bar { background: var(--primary); padding: 2rem 0; border-bottom: 1px solid rgba(124,192,208,0.2); }
.trust-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 3rem; align-items: center; }
@media (min-width: 768px) { .trust-items { gap: 2rem 4rem; } }
.trust-item { display: flex; align-items: center; gap: 0.5rem; color: var(--primary-fg); font-weight: 500; font-size: 0.875rem; }
@media (min-width: 768px) { .trust-item { font-size: 1rem; } }
.trust-icon { color: var(--secondary); }

/* === About === */
.about-section { background: var(--slate-50); }
.about-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .about-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.section-label { display: block; color: var(--sky-500); font-weight: 700; letter-spacing: 0.08em; font-size: 0.875rem; text-transform: uppercase; margin-bottom: 0.5rem; }
.section-heading { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 1.5rem; }
.section-heading-xl { font-size: clamp(1.875rem, 5vw, 3rem); margin-bottom: 1rem; }

.about-desc { color: var(--slate-600); margin-bottom: 1.5rem; line-height: 1.75; }
.about-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.about-list li { display: flex; align-items: flex-start; gap: 0.75rem; }
.check-icon { color: var(--secondary); flex-shrink: 0; margin-top: 0.1rem; }
.about-list span { color: var(--slate-700); font-weight: 500; }

.brands-card { background: white; padding: 1.5rem; border-radius: 1rem; box-shadow: 0 1px 4px rgba(0,0,0,0.05); border: 1px solid var(--slate-100); }
.brands-card-title { font-weight: 700; color: var(--slate-900); margin-bottom: 1rem; }
.brands-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.5rem; }
.brand-logo { object-fit: contain; height: 2rem; transition: opacity 0.3s; }
.brand-logo:hover { opacity: 0.75; }
.brand-logo.tall { height: 5rem; }
.brand-logo.med { height: 3rem; }

.about-img-wrap { position: relative; padding-bottom: 2rem; padding-left: 2rem; }
.about-img-box { aspect-ratio: 4/3; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
.about-img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.about-img-box:hover img { transform: scale(1.05); }
.about-overlay-card {
  position: absolute; bottom: 0; left: 0;
  background: var(--secondary); padding: 1.5rem 2rem; border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(245,192,15,0.3); max-width: 14rem;
}
.about-overlay-card h4 { color: var(--slate-900); font-weight: 700; font-size: 1.125rem; margin-bottom: 0.25rem; }
.about-overlay-card p { color: var(--slate-800); font-size: 0.875rem; }
.about-overlay-divider { margin-top: 1rem; width: 3rem; height: 0.25rem; background: var(--slate-900); border-radius: 9999px; }

/* === Services === */
.services-section { background: white; }
.services-header { text-align: center; max-width: 48rem; margin: 0 auto 4rem; }
.services-desc { color: var(--slate-600); font-size: 1.125rem; line-height: 1.7; }

.services-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; }
.service-wrap { width: 100%; }
@media (min-width: 768px) { .service-wrap { width: calc(50% - 1rem); } }
@media (min-width: 1024px) { .service-wrap { width: calc(33.333% - 1.4rem); } }

.service-card {
  position: relative; background: white; border-radius: 1rem; padding: 2rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05); border: 1px solid var(--slate-100);
  transition: all 0.3s; height: 100%; overflow: hidden;
}
.service-card:hover { box-shadow: 0 20px 40px rgba(124,192,208,0.12); border-color: rgba(124,192,208,0.3); transform: translateY(-3px); }
.service-deco {
  position: absolute; top: -1rem; right: -1rem;
  width: 6rem; height: 6rem;
  background: rgba(245,192,15,0.1); border-radius: 0 0 0 100%;
  transition: transform 0.3s;
}
.service-card:hover .service-deco { transform: scale(1.1); }
.service-icon {
  position: relative; z-index: 1;
  width: 3.5rem; height: 3.5rem; border-radius: 0.75rem;
  background: rgba(124,192,208,0.15); color: var(--primary-fg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem; transition: all 0.3s;
}
.service-card:hover .service-icon { background: var(--primary); }
.service-card h3 { position: relative; z-index: 1; font-size: 1.25rem; color: var(--sky-600); margin-bottom: 0.75rem; transition: color 0.3s; }
.service-card:hover h3 { color: var(--slate-900); }
.service-card p { position: relative; z-index: 1; color: var(--slate-600); font-size: 0.875rem; line-height: 1.7; }

.services-note {
  margin-top: 3rem; background: var(--slate-50); border: 1px solid var(--slate-200);
  border-radius: 1rem; padding: 2rem; text-align: center;
  max-width: 56rem; margin-left: auto; margin-right: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
@media (min-width: 768px) { .services-note { padding: 3rem; margin-top: 3rem; } }
.services-note h3 { font-size: clamp(1.5rem, 3vw, 1.875rem); margin-bottom: 1rem; }
.services-note p { color: var(--slate-600); font-size: 1.125rem; max-width: 40rem; margin: 0 auto; line-height: 1.7; }

/* === Reviews === */
.reviews-section { background: var(--slate-50); border-top: 1px solid var(--slate-100); }
.reviews-header { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 3rem; align-items: flex-start; }
@media (min-width: 768px) { .reviews-header { flex-direction: row; justify-content: space-between; align-items: flex-end; } }
.reviews-header h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.avatar-group { display: flex; align-items: center; gap: 0.5rem; }
.avatars { display: flex; }
.avatar {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--slate-200); border: 2px solid white;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 700; color: var(--slate-500);
  margin-left: -0.5rem;
}
.avatar:first-child { margin-left: 0; }
.stars-block { display: flex; flex-direction: column; gap: 0.125rem; }
.stars-row { display: flex; gap: 0.125rem; }
.star-label { font-size: 0.75rem; color: var(--slate-500); font-weight: 500; }

.reviews-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .reviews-grid { grid-template-columns: 1fr 1fr 1fr; } }

.review-card {
  background: white; border-radius: 1rem; padding: 2rem;
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--slate-100); box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.review-quote { position: absolute; top: 1.5rem; right: 1.5rem; color: #e2e8f0; }
.review-quote svg { fill: #e2e8f0; stroke: none; }
.review-stars { display: flex; gap: 0.25rem; margin-bottom: 1rem; }
.review-stars svg { fill: var(--secondary); stroke: none; }
.review-text { color: var(--slate-700); font-style: italic; margin-bottom: 1.5rem; flex-grow: 1; line-height: 1.75; }
.review-footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(226,232,240,0.7); }
.review-author { font-weight: 700; color: var(--slate-900); }
.review-verified { font-size: 0.75rem; color: var(--slate-500); font-weight: 500; }

/* === Service Area === */
.area-section { background: var(--slate-50); }
.area-header { max-width: 48rem; margin: 0 auto 3rem; text-align: center; }
.coverage-pill {
  display: inline-block; padding: 0.375rem 1rem; border-radius: 9999px;
  background: rgba(14,165,233,0.1); color: var(--sky-500);
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 1rem;
}
.area-header p { color: var(--slate-600); font-size: 1.125rem; line-height: 1.75; }
.map-wrap { max-width: 64rem; margin: 0 auto; }
.map-wrap img { width: 100%; border-radius: 1rem; box-shadow: 0 4px 24px rgba(0,0,0,0.08); border: 1px solid var(--slate-200); }

/* === Contact === */
.contact-section { background: var(--primary); position: relative; overflow: hidden; }
.contact-deco { position: absolute; inset: 0; opacity: 0.1; pointer-events: none; overflow: hidden; }
.deco-blob1 { position: absolute; top: 0; right: 0; width: 24rem; height: 24rem; background: #bae6fd; border-radius: 50%; filter: blur(100px); transform: translate(50%,-50%); }
.deco-blob2 { position: absolute; bottom: 0; left: 0; width: 20rem; height: 20rem; background: var(--secondary); border-radius: 50%; filter: blur(80px); transform: translate(-33%,33%); }
.contact-inner { position: relative; z-index: 10; }
.contact-header { max-width: 48rem; margin: 0 auto 4rem; text-align: center; }
.contact-badge {
  display: inline-block; padding: 0.375rem 1rem; border-radius: 9999px;
  background: rgba(255,255,255,0.2); color: var(--primary-fg);
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 1rem;
}
.contact-title { font-size: clamp(1.875rem, 5vw, 3rem); color: var(--primary-fg); margin-bottom: 1.5rem; }
.contact-sub { font-size: 1.125rem; color: rgba(21,43,56,0.7); line-height: 1.75; }

.contact-cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 56rem; margin: 0 auto 2rem; }
@media (min-width: 768px) { .contact-cards { grid-template-columns: 1fr 1fr; } }

.contact-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2.5rem; border-radius: 1.5rem; border: 1px solid rgba(255,255,255,0.3);
  transition: all 0.3s;
}
.contact-card-email { background: rgba(255,255,255,0.2); backdrop-filter: blur(8px); }
.contact-card-email:hover { background: rgba(255,255,255,0.3); border-color: rgba(245,192,15,0.5); }
.contact-card-phone { background: var(--secondary); border-color: var(--secondary); box-shadow: 0 10px 30px rgba(245,192,15,0.25); }
.contact-card-phone:hover { filter: brightness(1.05); }

.card-icon {
  width: 4rem; height: 4rem; border-radius: 1rem;
  background: rgba(255,255,255,0.3); color: var(--primary-fg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem; transition: transform 0.3s;
}
.contact-card-phone .card-icon { background: rgba(0,0,0,0.1); color: var(--slate-900); }
.contact-card:hover .card-icon { transform: scale(1.1); }
.contact-card h3 { font-size: 1.25rem; color: var(--primary-fg); margin-bottom: 0.5rem; }
.contact-card-phone h3 { color: var(--slate-900); }
.card-desc { color: rgba(21,43,56,0.6); font-weight: 500; margin-bottom: 1.5rem; text-align: center; }
.contact-card-phone .card-desc { color: rgba(30,41,59,0.8); }
.card-value { font-weight: 700; font-size: 1.125rem; color: var(--primary-fg); }
.contact-card-email:hover .card-value { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.contact-card-phone .card-value { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.025em; color: var(--slate-900); }

.contact-social { max-width: 56rem; margin: 0 auto; }
.btn-fb {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  width: 100%; padding: 1.5rem; background: var(--fb-blue); color: white;
  border-radius: 1rem; font-weight: 700; font-size: 1rem; transition: all 0.3s;
}
.btn-fb:hover { filter: brightness(1.08); box-shadow: 0 8px 20px rgba(24,119,242,0.3); }
.btn-fb-icon { fill: currentColor; stroke: none; display: inline-block; }

/* === Footer === */
.footer { background: rgba(125,211,252,0.8); color: var(--primary-fg); padding: 3rem 0; border-top: 1px solid rgba(125,211,252,0.3); }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
@media (min-width: 768px) { .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; } }
.footer-brand h3 { font-size: 1.125rem; color: var(--primary-fg); margin-bottom: 0.25rem; }
.footer-brand p { font-size: 0.875rem; }
.footer-copy { font-size: 0.875rem; }
@media (min-width: 768px) { .footer-copy { text-align: right; } }