/* === MAIN CSS — Loaded async, below-the-fold styles === */

/* Problems Section */
.problems-grid{display:grid;gap:1.5rem;margin-top:2rem}
.problem-card{background:#fff;border:1px solid var(--color-border);border-radius:12px;padding:1.5rem;transition:box-shadow .2s}
.problem-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.problem-icon{width:48px;height:48px;background:rgba(249,115,22,.1);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.problem-icon svg{width:24px;height:24px;color:var(--color-accent)}
.problem-card h3{font-size:var(--text-lg);margin-bottom:.5rem;color:var(--color-primary)}
.problem-card p{color:var(--color-text-light);font-size:var(--text-base);line-height:1.6}
.problem-card .solution{color:var(--color-text);font-weight:500;margin-top:.5rem}

/* Services Cards */
.services-grid{display:grid;gap:1.5rem}
.service-card{background:#fff;border:1px solid var(--color-border);border-radius:12px;padding:1.75rem;transition:all .2s;display:flex;flex-direction:column}
.service-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
.service-icon{width:56px;height:56px;background:linear-gradient(135deg,#1B3A5C,#2E75B6);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.service-icon svg{width:28px;height:28px;color:#fff}
.service-card h3{font-size:var(--text-xl);margin-bottom:.5rem}
.service-card p{color:var(--color-text-light);line-height:1.6;flex:1}
.service-card .service-link{display:inline-flex;align-items:center;gap:.35rem;color:var(--color-secondary);font-weight:600;margin-top:1rem;font-size:var(--text-sm);transition:gap .2s}
.service-card .service-link:hover{gap:.6rem}
.service-card .service-link svg{width:16px;height:16px}

/* Service Detail (leaf pages) */
.service-detail{margin-top:2rem}
.service-detail h3{font-size:var(--text-2xl);margin-bottom:.75rem;color:var(--color-primary)}
.service-detail p{margin-bottom:1rem;color:var(--color-text);line-height:1.7}
.service-detail ul{margin:1rem 0 1.5rem 1.25rem;list-style:disc}
.service-detail ul li{margin-bottom:.5rem;color:var(--color-text);line-height:1.6}
.detail-grid{display:grid;gap:1.5rem;margin-top:2rem}
.detail-card{background:var(--color-bg-alt);border-radius:12px;padding:1.5rem}
.detail-card h4{font-size:var(--text-lg);color:var(--color-primary);margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}
.detail-card h4 svg{width:20px;height:20px;color:var(--color-accent);flex-shrink:0}
.detail-card p{color:var(--color-text-light);line-height:1.6}

/* Why Us Section */
.why-grid{display:grid;gap:1.5rem}
.why-item{display:flex;gap:1rem;align-items:flex-start}
.why-icon{width:48px;height:48px;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.why-icon svg{width:24px;height:24px;color:#fff}
.why-item h3{font-size:var(--text-lg);margin-bottom:.25rem}
.why-item p{color:var(--color-text-light);font-size:var(--text-base);line-height:1.6}

/* Reviews Section */
.reviews-header{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:2rem}
.google-badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--color-bg-alt);padding:.5rem 1rem;border-radius:24px}
.google-badge img{height:20px;width:auto}
.google-badge .stars{color:var(--color-stars);font-size:var(--text-lg)}
.google-badge span{font-size:var(--text-sm);color:var(--color-text-light)}
.reviews-grid{display:grid;gap:1.5rem}
.review-card{background:#fff;border:1px solid var(--color-border);border-radius:12px;padding:1.5rem}
.review-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}
.review-avatar{width:44px;height:44px;background:var(--color-secondary);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:var(--text-lg);flex-shrink:0}
.review-meta{flex:1}
.review-name{font-weight:600;color:var(--color-primary)}
.review-date{font-size:var(--text-xs);color:var(--color-text-light)}
.review-stars{color:var(--color-stars);font-size:var(--text-sm);letter-spacing:1px;margin-bottom:.5rem}
.review-text{color:var(--color-text);line-height:1.6;font-size:var(--text-sm)}
.reviews-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:1.5rem;font-weight:600;color:var(--color-secondary)}

/* CTA Section with Form */
.cta-section{background:var(--color-primary);color:#fff;padding:3rem 0}
.cta-section h2{color:#fff;font-size:var(--text-3xl);margin-bottom:.5rem}
.cta-section .section-subtitle{color:rgba(255,255,255,.8)}
.cta-form-wrapper{max-width:560px;margin:0 auto;background:rgba(255,255,255,.08);backdrop-filter:blur(4px);border-radius:12px;padding:1.5rem;border:1px solid rgba(255,255,255,.12)}
.cta-form-wrapper .form-group input{background:rgba(255,255,255,.95)}
.cta-form-wrapper .form-privacy{color:rgba(255,255,255,.7)}
.cta-form-wrapper .form-privacy a{color:rgba(255,255,255,.9)}
.cta-form-wrapper .form-note{color:rgba(255,255,255,.6)}
.cta-form-wrapper .form-success h3{color:#fff}
.cta-form-wrapper .form-success p{color:rgba(255,255,255,.7)}

/* FAQ Section */
.faq-list{max-width:800px;margin:0 auto}
.faq-item{border:1px solid var(--color-border);border-radius:10px;margin-bottom:.75rem;overflow:hidden}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;cursor:pointer;font-weight:600;color:var(--color-primary);font-size:var(--text-base);list-style:none;transition:background .2s}
.faq-item summary:hover{background:var(--color-bg-alt)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'';width:20px;height:20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748B'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;flex-shrink:0;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-item .faq-answer{padding:0 1.25rem 1rem;color:var(--color-text-light);line-height:1.6}

/* Partners Bar */
.partners-bar{padding:2.5rem 0;background:var(--color-bg-alt)}
.partners-grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2rem}
.partners-grid img{height:36px;width:auto;opacity:.7;filter:grayscale(30%);transition:all .2s}
.partners-grid img:hover{opacity:1;filter:grayscale(0)}

/* Footer */
.site-footer{background:var(--color-bg-dark);color:rgba(255,255,255,.7);padding:3rem 0 0}
.footer-grid{display:grid;gap:2rem;margin-bottom:2.5rem}
.footer-brand img{height:36px;width:auto;margin-bottom:.75rem;filter:brightness(0) invert(1)}
.footer-brand p{font-size:var(--text-sm);line-height:1.6;max-width:300px}
.footer-col h4{color:#fff;font-size:var(--text-base);font-weight:600;margin-bottom:.75rem}
.footer-col a{display:block;color:rgba(255,255,255,.6);font-size:var(--text-sm);padding:.25rem 0;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-contact{display:flex;flex-direction:column;gap:.5rem}
.footer-contact a,.footer-contact p{display:flex;align-items:flex-start;gap:.5rem;font-size:var(--text-sm)}
.footer-contact svg{width:16px;height:16px;flex-shrink:0;margin-top:.15rem;color:var(--color-accent)}
.footer-contact p{color:rgba(255,255,255,.6)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:1.25rem 0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;font-size:var(--text-xs)}
.footer-bottom a{color:rgba(255,255,255,.5);transition:color .2s}
.footer-bottom a:hover{color:#fff}
.footer-legal{color:rgba(255,255,255,.4)}

/* WhatsApp Widget */
.whatsapp-widget{position:fixed;bottom:1.5rem;right:1.5rem;z-index:900;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.2);transition:transform .2s}
.whatsapp-widget:hover{transform:scale(1.08)}
.whatsapp-widget svg{width:30px;height:30px;color:#fff}
.whatsapp-tooltip{position:absolute;right:68px;top:50%;transform:translateY(-50%);background:var(--color-bg-dark);color:#fff;font-size:var(--text-sm);padding:.5rem .75rem;border-radius:8px;white-space:nowrap;opacity:0;visibility:hidden;transition:all .2s;pointer-events:none}
.whatsapp-widget:hover .whatsapp-tooltip{opacity:1;visibility:visible}

/* Breadcrumb */
.breadcrumb{padding:.75rem 0;font-size:var(--text-sm);color:var(--color-text-light)}
.breadcrumb a{color:var(--color-secondary)}
.breadcrumb span{margin:0 .35rem}

/* Privacy Policy */
.privacy-content{max-width:800px;margin:0 auto;padding:2rem 0}
.privacy-content h1{font-size:var(--text-4xl);margin-bottom:1.5rem}
.privacy-content h2{font-size:var(--text-2xl);margin:2rem 0 .75rem}
.privacy-content h3{font-size:var(--text-xl);margin:1.5rem 0 .5rem}
.privacy-content p{margin-bottom:1rem;line-height:1.7;color:var(--color-text)}
.privacy-content ul{margin:1rem 0 1rem 1.25rem;list-style:disc}
.privacy-content ul li{margin-bottom:.5rem;line-height:1.6;color:var(--color-text)}
.privacy-content a{color:var(--color-secondary);text-decoration:underline}

/* Responsive: sm */
@media(min-width:640px){
  .problems-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
  .detail-grid{grid-template-columns:repeat(2,1fr)}
}

/* Responsive: md */
@media(min-width:768px){
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
}

/* Responsive: lg */
@media(min-width:1024px){
  .problems-grid{grid-template-columns:repeat(3,1fr)}
  .services-grid{grid-template-columns:repeat(3,1fr)}
  .reviews-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1.2fr 1fr 1fr 1.2fr}
  .cta-section{padding:4rem 0}
}

/* Section with Image (2-col on desktop, stacked on mobile) */
.content-with-image{display:grid;gap:2rem;align-items:start;margin-top:2rem}
.content-with-image__visual img{width:100%;height:auto;border-radius:12px}
@media(min-width:768px){.content-with-image{grid-template-columns:1fr 1fr;align-items:center}}

/* Services grid 4 cols for /google hub */
.services-grid-4{grid-template-columns:1fr}
@media(min-width:640px){.services-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.services-grid-4{grid-template-columns:repeat(4,1fr)}}