@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');:root{ --primary-color:#f9e44e;--secondary-color:#f9e44e;--text-color:#2C3E50;--background-color:#fff;--transition-speed:0.3s;--border-radius:12px;--box-shadow:0 4px 20px rgba(0,0,0,0.08);--gradient:linear-gradient(135deg,var(--primary-color),var(--secondary-color));--content-width:90%;--section-spacing:8rem;--h1-size-desktop:3.5rem;--h1-size-tablet:2.8rem;--h1-size-mobile:2rem;--h2-size-desktop:2.5rem;--h2-size-tablet:2rem;--h2-size-mobile:1.8rem;--body-size-desktop:1.1rem;--body-size-tablet:1rem;--body-size-mobile:0.95rem;--nav-base-height:70px;--nav-mobile-height:55px;--nav-shrink-height:60px;--nav-top-offset-desktop:1rem;--nav-top-offset-mobile:0.5rem;--nav-horizontal-offset-desktop:1rem;--nav-horizontal-offset-mobile:0.5rem;--content-top-buffer:2rem;}
*{ margin:0;padding:0;box-sizing:border-box;}
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth;}
}
body{ font-family:'Roboto',system-ui,-apple-system,sans-serif;line-height:1.6;color:var(--text-color);background-color:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;padding-top:0;}
nav{ position:fixed;top:var(--nav-top-offset-desktop);left:var(--nav-horizontal-offset-desktop);right:var(--nav-horizontal-offset-desktop);width:auto;background:linear-gradient(to right,rgba(44,44,44,0.8),rgba(44,44,44,0.6));backdrop-filter:blur(20px) saturate(120%);-webkit-backdrop-filter:blur(20px) saturate(120%);border-left:1px solid rgba(255,255,255,0.15);border-top:1px solid rgba(255,255,255,0.15);border-bottom:1px solid rgba(255,255,255,0.1);border-right:none;padding:0.8rem 2rem 0.8rem 0.5rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 8px 32px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.2);z-index:1000;transition:all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);height:var(--nav-base-height);border-radius:var(--border-radius);box-sizing:border-box;will-change:transform,opacity;}
nav:hover{ background:linear-gradient(to right,rgba(44,44,44,0.85),rgba(44,44,44,0.65));border-left:1px solid rgba(255,255,255,0.25);border-top:1px solid rgba(255,255,255,0.25);border-bottom:1px solid rgba(255,255,255,0.25);border-right:none;box-shadow:0 12px 40px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.3);}
.nav-logo{ display:flex;align-items:center;padding:0;z-index:10;}
.nav-logo img{ height:40px;width:auto;object-fit:contain;filter:none;}
.nav-links{ margin-left:auto;display:flex;gap:clamp(1.5rem,4vw,2.5rem);align-items:center;}
nav a{ text-decoration:none;color:#ffffff;font-weight:500;transition:all var(--transition-speed) ease;padding:0.8rem 1.5rem;border-radius:var(--border-radius);position:relative;opacity:1;}
.hero{ height:100vh;height:100dvh;min-height:100vh;min-height:100dvh;margin-top:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:linear-gradient(135deg,rgba(70,70,70,0.95) 0%,rgba(90,90,90,0.95) 100%);position:relative;overflow:hidden;padding:2rem;padding-top:calc(70px + 1rem + 2rem);transform:translateZ(0);z-index:1;}
.hero::before{ content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('../images/header.webp');background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0.5;z-index:-1;}
.hero::after{ display:none;}
@keyframes codeDrift{ 0%{ background-position:0 0;}
 100%{ background-position:250px 250px;}
}
.logo{ display:flex;flex-direction:column;align-items:center;margin-bottom:2rem;position:relative;z-index:1;margin-top:-2rem;}
.hero-content{ max-width:800px;margin-top:-2rem;animation:fadeInUp 1.2s ease-out,float 6s ease-in-out infinite;position:relative;z-index:2;}
@keyframes float{ 0%,100%{ transform:translateY(0);}
 50%{ transform:translateY(-10px);}
}
.hero-title{ font-size:clamp(var(--h1-size-mobile),5vw,var(--h1-size-desktop));color:#ffffff;margin-bottom:1.5rem;font-weight:700;letter-spacing:-0.5px;line-height:1.2;text-shadow:0 2px 4px rgba(0,0,0,0.3);position:relative;}
.hero-title::after{ content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:100px;height:3px;background:var(--gradient);border-radius:2px;animation:shimmer 2s infinite;}
.hero-text{ font-size:clamp(var(--body-size-mobile),2vw,var(--body-size-desktop));color:#e0e0e0;line-height:1.6;margin-bottom:2.5rem;max-width:700px;margin-left:auto;margin-right:auto;text-shadow:0 1px 2px rgba(0,0,0,0.2);position:relative;z-index:2;}
@keyframes shimmer{ 0%{ opacity:0.5;transform:translateX(-50%) scaleX(0.8);}
 50%{ opacity:1;transform:translateX(-50%) scaleX(1.05);}
 100%{ opacity:0.5;transform:translateX(-50%) scaleX(0.8);}
}
.nav-logo img{ height:40px;width:auto;object-fit:contain;filter:none;}
.cta-button{ display:inline-block;padding:0.9rem 2.2rem;border-radius:var(--border-radius);font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:0.5px;text-decoration:none;transition:all 0.3s ease,transform 0.2s ease,box-shadow 0.2s ease;position:relative;overflow:hidden;cursor:pointer;border-width:2px;border-style:solid;border-color:transparent;margin:0.5rem;text-align:center;}
.cta-button:not(.secondary-cta){ background:rgba(249,228,78,0.85);border-color:#f9e44e;color:var(--text-color);box-shadow:0 4px 15px rgba(0,0,0,0.1);}
.cta-button:not(.secondary-cta):hover{ background:#f9e44e;border-color:#f9e44e;color:var(--text-color);box-shadow:0 6px 20px rgba(0,0,0,0.15);transform:translateY(-2px);}
.cta-button.secondary-cta{ background:rgba(225,46,74,0.85);border-color:#e12e4a;color:#fff;box-shadow:none;}
.cta-button.secondary-cta:hover{ background:#e12e4a;border-color:#e12e4a;color:#fff;box-shadow:0 4px 15px rgba(225,46,74,0.3);transform:translateY(-2px);}
.cta-button::before{ content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.3),transparent);transform:translateX(-100%);transition:transform 0.6s ease;}
.cta-button:hover::before{ transform:translateX(100%);}
@keyframes fadeInUp{ from{ opacity:0;transform:translateY(20px);}
 to{ opacity:1;transform:translateY(0);}
}
@media (max-width:480px){ .hero .cta-button{ width:90%;margin:0.5rem auto;display:block;}
 }
.services{ max-width:var(--content-width);margin:0 auto;padding:8rem 0;}
.services h2{ text-align:center;font-size:clamp(var(--h2-size-mobile),4vw,var(--h2-size-desktop));margin-bottom:5rem;position:relative;}
.services h2::after{ content:'';position:absolute;bottom:-1rem;left:50%;transform:translateX(-50%);width:80px;height:4px;background:var(--gradient);border-radius:2px;}
.service-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(1rem,3vw,3rem);width:100%;padding:0;margin-inline:auto;}
.service-card{ background:linear-gradient(145deg,#ffffff,#f5f5f5);border-radius:var(--border-radius);box-shadow:0 8px 30px rgba(0,0,0,0.06);padding:3rem 2.5rem;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0;transform:translateX(-50px);position:relative;overflow:hidden;border:1px solid rgba(0,0,0,0.05);}
.service-card:hover{ transform:translateY(-8px);box-shadow:0 12px 40px rgba(0,0,0,0.1);}
.service-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient);transform:scaleX(0);transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);transform-origin:left;}
.service-card:hover::before{ transform:scaleX(1);}
.service-card.visible{ opacity:1;transform:translateX(0);}
.service-icon{ width:90px;height:90px;margin-bottom:2rem;padding:1.2rem;border-radius:50%;background:var(--gradient);display:flex;align-items:center;justify-content:center;transition:transform 0.3s ease;}
.service-icon img{ width:45px;height:45px;filter:brightness(0) invert(1);transition:transform 0.3s ease;}
.service-card:hover .service-icon{ transform:scale(1.1) rotate(5deg);}
.service-icon svg{ width:45px;height:45px;fill:white;}
.service-card h3{ font-size:1.6rem;margin-bottom:1.2rem;color:var(--text-color);}
.service-card p{ color:#444;line-height:1.7;margin:0;font-size:clamp(var(--body-size-mobile),2vw,var(--body-size-desktop));}
.team{ max-width:var(--content-width);margin:8rem auto;padding:4rem 0;background:#fff;}
.team h2{ text-align:center;font-size:clamp(var(--h2-size-mobile),4vw,var(--h2-size-desktop));margin-bottom:4rem;position:relative;}
.team h2::after{ content:'';position:absolute;bottom:-1rem;left:50%;transform:translateX(-50%);width:80px;height:4px;background:var(--gradient);border-radius:2px;}
.team-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:3rem;width:100%;padding:0;margin-inline:auto;max-width:100%;}
.team-member{ background:white;padding:2rem 1rem;border-radius:var(--border-radius);box-shadow:var(--box-shadow);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);text-align:center;opacity:0;transform:translateY(20px);position:relative;overflow:hidden;border:1px solid rgba(0,0,0,0.05);}
.team-member:hover{ transform:translateY(-5px);box-shadow:0 12px 40px rgba(0,0,0,0.1);}
.team-member.visible{ opacity:1;transform:translateY(0);}
.member-image{ width:200px;height:200px;margin:0 auto 2rem;border-radius:50%;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,0.1);border:3px solid white;transition:all 0.4s ease;position:relative;background:var(--gradient);padding:3px;}
.member-image::after{ content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;box-shadow:inset 0 0 20px rgba(0,0,0,0.2);opacity:0;transition:opacity 0.3s ease;}
.member-image:hover::after{ opacity:1;}
.member-image img{ width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease;border-radius:50%;}
.team-member:hover .member-image{ transform:scale(1.05);}
.team-member:hover .member-image img{ transform:scale(1.05);}
.team-member h3{ font-size:1.8rem;margin-bottom:0.5rem;color:var(--text-color);}
.team-member .role{ font-size:1.2rem;color:#666;margin-bottom:1rem;font-weight:500;}
.member-skills{ display:flex;gap:0.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.5rem;}
.member-skills span{ background:var(--gradient);color:var(--text-color);font-weight:500;font-size:0.85rem;padding:0.3rem 0.8rem;border-radius:20px;display:inline-block;box-shadow:0 2px 5px rgba(0,0,0,0.1);}
.team-member .bio{ color:#444;line-height:1.6;margin-top:1rem;text-align:left;}
@media (max-width:768px){ .team-grid{ grid-template-columns:1fr;margin:0 auto;}
 .member-image{ width:180px;height:180px;}
 .team-member h3{ font-size:1.5rem;}
 .team-member .role{ font-size:1.1rem;}
 .team-member .bio{ font-size:0.95rem;}
}
@media (max-width:768px){ .burger-menu{ display:flex;margin-right:0;}
 .nav-links{ position:fixed;top:calc(var(--nav-top-offset-mobile) + var(--nav-mobile-height));left:0;width:100%;height:calc(100dvh - (var(--nav-top-offset-mobile) + var(--nav-mobile-height)));background:rgba(40,40,40,0.95);backdrop-filter:blur(15px) saturate(120%);-webkit-backdrop-filter:blur(15px) saturate(120%);border:1px solid rgba(255,255,255,0.2);display:none;flex-direction:column;align-items:center;justify-content:flex-start;padding:1.5rem 0;gap:1rem;transform:translateY(0);opacity:1;transition:opacity 0.4s cubic-bezier(0.4,0,0.2,1),transform 0.4s cubic-bezier(0.4,0,0.2,1),top 0.2s ease,height 0.2s ease;z-index:999;overflow-y:auto;border-top:1px solid rgba(255,255,255,0.25);}
 .nav-links.active{ display:flex;transform:translateY(0);opacity:1;}
 .nav-links a{ font-size:1rem;width:80%;text-align:center;padding:0.6rem;border-radius:6px;transition:all 0.3s ease;background-color:rgba(255,255,255,0.1);color:#fff;font-weight:500;letter-spacing:0.5px;border:1px solid rgba(255,255,255,0.2);margin-bottom:0.5rem;}
 .nav-links a:hover,.nav-links a:focus{ background:rgba(255,215,0,0.2);color:var(--primary-color);border-color:rgba(255,215,0,0.4);}
 .nav-links .phone-link{ width:80%;position:relative;margin:0;bottom:auto;right:auto;display:flex;justify-content:center;background:var(--primary-color);border-radius:var(--border-radius);padding:0.6rem !important;}
 .nav-links .phone-link img{ filter:brightness(0) invert(0);}
 .nav-links .phone-link:hover{ background:var(--primary-color);transform:none;}
 .nav-links .phone-link::after{ display:none;}
 .dropdown-toggle{ width:100%;justify-content:center;padding:0.6rem;border-radius:6px;background-color:rgba(255,255,255,0.1);color:#fff;font-weight:500;letter-spacing:0.5px;border:1px solid rgba(255,255,255,0.2);}
 .dropdown-menu a{ text-align:center;padding:0.6rem;margin:0.3rem 0;background-color:rgba(255,255,255,0.05);border-radius:6px;border:1px solid rgba(255,255,255,0.15);}
 .dropdown-menu a:hover{ background:rgba(255,215,0,0.15);color:var(--primary-color);border-color:rgba(255,215,0,0.3);}
}
@media (max-width:768px){ nav{ padding:0.8rem 1.5rem 0.8rem 0.5rem;top:var(--nav-top-offset-mobile);left:var(--nav-horizontal-offset-mobile);right:var(--nav-horizontal-offset-mobile);height:var(--nav-mobile-height);background:linear-gradient(to right,rgba(44,44,44,0.8),rgba(44,44,44,0.6));backdrop-filter:blur(20px) saturate(120%);-webkit-backdrop-filter:blur(20px) saturate(120%);border-left:1px solid rgba(255,255,255,0.15);border-top:1px solid rgba(255,255,255,0.15);border-bottom:1px solid rgba(255,255,255,0.15);border-right:none;}
 nav:hover{ background:linear-gradient(to right,rgba(44,44,44,0.8),rgba(44,44,44,0.6));border-left:1px solid rgba(255,255,255,0.15);border-top:1px solid rgba(255,255,255,0.15);border-bottom:1px solid rgba(255,255,255,0.15);border-right:none;box-shadow:0 8px 32px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.2);}
 .nav-logo img{ height:35px;}
 .burger-menu{ width:25px;height:20px;}
 .burger-menu span{ width:25px;height:2px;}
 .burger-menu.active span:first-child,.burger-menu.active span:nth-child(3){ width:23px;}
 nav.nav-hidden{ transform:translateY(calc(-100% - var(--nav-top-offset-mobile)));}
 .nav-links{ top:calc(var(--nav-top-offset-mobile) + var(--nav-mobile-height));height:calc(100dvh - (var(--nav-top-offset-mobile) + var(--nav-mobile-height)));}
}
@media (max-width:768px){ nav{ left:var(--nav-horizontal-offset-mobile) !important;right:var(--nav-horizontal-offset-mobile) !important;width:auto !important;padding-left:var(--nav-horizontal-offset-mobile) !important;padding-right:var(--nav-horizontal-offset-mobile) !important;box-sizing:border-box;}
}
.contact-container{ background:linear-gradient(145deg,#ffffff,#f5f5f5);border-radius:var(--border-radius);box-shadow:0 10px 30px rgba(0,0,0,0.08);padding:3rem;border:1px solid rgba(0,0,0,0.05);position:relative;overflow:hidden;max-width:var(--content-width);margin-left:auto;margin-right:auto;}
.contact-container::before{ content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient);}
.contact-form{ display:grid;gap:1.5rem;}
.form-grid{ display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.form-group{ display:flex;flex-direction:column;gap:0.5rem;position:relative;}
.form-group label{ font-weight:500;color:#333;display:flex;align-items:center;gap:0.3rem;}
.required{ color:#e74c3c;font-weight:bold;}
.form-group input,.form-group textarea,.form-group select{ background:#fff;border:1px solid rgba(0,0,0,0.15);box-shadow:inset 0 2px 4px rgba(0,0,0,0.03);padding:1rem;border-radius:var(--border-radius);font-family:inherit;font-size:1rem;transition:all var(--transition-speed) cubic-bezier(0.4,0,0.2,1);color:#333;width:100%;}
.form-group input::placeholder,.form-group textarea::placeholder,.form-group select::placeholder{ color:#999;opacity:0.8;}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{ outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(249,228,78,0.2);background:#fff;}
.form-group.error input,.form-group.error textarea,.form-group.error select{ border-color:#e74c3c;box-shadow:0 0 0 3px rgba(231,76,60,0.1);}
.field-error{ color:#e74c3c;font-size:0.85rem;margin-top:0.3rem;min-height:1.2rem;opacity:0;transform:translateY(-5px);transition:opacity 0.3s ease,transform 0.3s ease;}
.form-group.error .field-error{ opacity:1;transform:translateY(0);}
.contact-options{ display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:2.5rem;justify-content:center;}
.contact-option{ flex:1;min-width:200px;max-width:300px;}
.contact-option a{ display:flex;align-items:center;justify-content:center;gap:0.8rem;background:white;padding:1.2rem;border-radius:var(--border-radius);text-decoration:none;color:var(--text-color);font-weight:500;transition:all 0.3s ease;border:1px solid rgba(0,0,0,0.1);box-shadow:0 4px 15px rgba(0,0,0,0.05);}
.contact-option.whatsapp a:hover{ background:#25d366;color:white;transform:translateY(-3px);box-shadow:0 8px 25px rgba(37,211,102,0.3);}
.contact-option.phone a:hover{ background:var(--gradient);color:var(--text-color);transform:translateY(-3px);box-shadow:0 8px 25px rgba(249,228,78,0.3);}
.contact-option img{ width:24px;height:24px;transition:all 0.3s ease;}
.contact-option.whatsapp a:hover img{ filter:invert(56%) sepia(83%) saturate(638%) hue-rotate(91deg) brightness(70%) contrast(86%);}
.form-privacy{ display:flex;align-items:flex-start;gap:0.8rem;margin-top:0.5rem;position:relative;}
.form-privacy input[type="checkbox"]{ width:20px;height:20px;margin-top:3px;accent-color:var(--secondary-color);cursor:pointer;}
.form-privacy label{ font-size:0.95rem;color:#444;line-height:1.5;}
.form-privacy a{ color:var(--secondary-color);text-decoration:underline;transition:color 0.2s ease;}
.form-privacy a:hover{ color:var(--primary-color);}
.form-info{ margin-top:-0.5rem;font-size:0.9rem;color:#777;font-style:italic;}
@media (max-width:768px){ .contact-container{ padding:2rem 1.5rem;}
 .form-grid{ grid-template-columns:1fr;gap:1rem;}
 .contact-options{ flex-direction:column;align-items:center;}
 .contact-option{ width:100%;}
 .submit-btn{ width:100%;}
}
@media (max-width:480px){ .contact-container{ padding:1.5rem 1rem;}
 .form-group input,.form-group textarea,.form-group select{ padding:0.8rem;font-size:0.95rem;}
 .submit-btn{ padding:1rem 2rem;font-size:1rem;}
}
.submit-btn{ background:rgba(249,228,78,0.85);border-width:2px;border-style:solid;border-color:#f9e44e;color:var(--text-color);box-shadow:0 4px 15px rgba(0,0,0,0.1);font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:0.5px;padding:0.9rem 2.2rem;border-radius:var(--border-radius);cursor:pointer;transition:all 0.3s ease,transform 0.2s ease,box-shadow 0.2s ease;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;width:100%;max-width:300px;margin-left:auto;margin-right:auto;margin-top:1rem;}
.submit-btn::before{ content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.3),transparent);transform:translateX(-100%);transition:transform 0.6s ease;}
.submit-btn:hover{ background:#f9e44e;box-shadow:0 6px 20px rgba(0,0,0,0.15);transform:translateY(-2px);}
.submit-btn:hover::before{ transform:translateX(100%);}
.submit-btn:disabled{ opacity:0.7;cursor:not-allowed;transform:none;}
.submit-btn:disabled::before{ display:none;}
.btn-loader{ display:none;width:24px;height:24px;margin-left:10px;}
.submit-btn.loading .btn-text{ opacity:0.7;}
.submit-btn.loading .btn-loader{ display:inline-block;}
@media (max-width:768px){ .contact{ padding-left:0;padding-right:0;}
 .contact-container{ padding:2rem 1.5rem;}
 .form-grid{ grid-template-columns:1fr;gap:1rem;}
 .contact-options{ flex-direction:column;align-items:center;}
 .contact-option{ width:100%;}
 .submit-btn{ width:100%;}
}
.contact h2{ text-align:center;font-size:clamp(var(--h2-size-mobile),4vw,var(--h2-size-desktop));margin-bottom:3rem;position:relative;color:var(--text-color);}
.contact h2::after{ content:'';position:absolute;bottom:-1rem;left:50%;transform:translateX(-50%);width:80px;height:4px;background:var(--gradient);border-radius:2px;}
footer{ position:relative;background:linear-gradient(135deg,rgba(50,50,50,0.95) 0%,rgba(70,70,70,0.95) 100%);padding:2rem 1rem;color:#ffffff;overflow:hidden;margin-top:6rem;}
footer::before{ display:none;}
.footer-content{ position:relative;z-index:1;max-width:var(--content-width);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;}
.footer-section{ padding:1rem;}
.footer-section h3{ color:var(--primary-color);font-size:1.2rem;margin-bottom:1rem;position:relative;}
.footer-section h3::after{ content:'';position:absolute;bottom:0;left:0;width:40px;height:2px;background:var(--gradient);border-radius:1px;transition:left 0.3s ease;}
@media (max-width:768px){ .footer-section h3{ text-align:center;}
 .footer-section h3::after{ left:50%;transform:translateX(-50%);}
}
.footer-section p{ color:#e0e0e0;line-height:1.6;margin-bottom:1rem;}
.social-icons{ display:flex;gap:1rem;margin-top:1rem;}
.social-icon{ width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;position:relative;overflow:hidden;margin:0 8px;opacity:0.8;}
.social-icon:hover{ transform:translateY(-5px);}
.social-icon img{ width:100%;height:100%;object-fit:contain;transition:transform 0.3s ease;filter:brightness(0) invert(1);}
.social-icon[title="WhatsApp"]:hover img{ filter:invert(56%) sepia(83%) saturate(638%) hue-rotate(91deg) brightness(97%) contrast(86%);}
.social-icon[title="Facebook"]:hover img{ filter:invert(31%) sepia(98%) saturate(1066%) hue-rotate(206deg) brightness(96%) contrast(98%);}
.social-icon[title="Instagram"]:hover img{ filter:invert(28%) sepia(32%) saturate(3231%) hue-rotate(300deg) brightness(97%) contrast(92%);}
.social-icon[title="LinkedIn"]:hover img{ filter:invert(31%) sepia(98%) saturate(1066%) hue-rotate(206deg) brightness(96%) contrast(98%);}
.social-icon[title="Pinterest"]:hover img{ filter:invert(8%) sepia(89%) saturate(7462%) hue-rotate(346deg) brightness(99%) contrast(90%);}
.footer-bottom{ margin-top:2rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,0.1);text-align:center;color:#888;font-size:0.9rem;}
.footer-bottom a{ position:relative;color:#B8860B;text-decoration:none;transition:all 0.3s ease;padding:2px 4px;display:inline-block;}
.footer-bottom a::before{ content:'';position:absolute;width:100%;height:100%;background:rgba(255,215,0,0.1);left:0;top:0;transform-origin:left;transform:scaleX(0);transition:transform 0.3s ease;z-index:-1;border-radius:4px;}
.footer-bottom a:hover{ color:#8B6914;}
.footer-bottom a:hover::before{ transform:scaleX(1);}
.footer-content a{ position:relative;color:#B8860B;text-decoration:none;transition:all 0.3s ease;padding:2px 4px;display:inline-block;}
.footer-content a::after{ display:none;}
.footer-content a:hover{ color:var(--primary-color);transform:translateY(-2px);}
.footer-section *{ transition:all 0.3s ease;}
.footer-content a:focus,.social-icon:focus{ outline:2px solid var(--primary-color);outline-offset:2px;}
@media (max-width:768px){ .social-icons{ justify-content:center;gap:1rem;}
 .footer-content a,.footer-bottom a{ padding:4px 8px;}
 .phone-link:hover{ background-color:#fff;transform:scale(1.05);}
 .phone-link:active{ transform:scale(0.95);}
}
@media (prefers-reduced-motion:reduce){ .footer-content a,.footer-bottom a,.social-icon,.social-icon img{ transition:none;animation:none;}
}
.pricing{ padding:var(--section-spacing) 0;background:#fff;}
.pricing h2{ text-align:center;font-size:clamp(var(--h2-size-mobile),4vw,var(--h2-size-desktop));margin-bottom:3rem;position:relative;}
.pricing h2::after{ content:'';position:absolute;bottom:-1rem;left:50%;transform:translateX(-50%);width:80px;height:4px;background:var(--gradient);border-radius:2px;}
.pricing-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:var(--content-width);margin:0 auto;padding:0;}
.pricing-card{ background:white;border-radius:var(--border-radius);padding:2.5rem;display:flex;flex-direction:column;gap:1.5rem;box-shadow:var(--box-shadow);transition:transform 0.3s ease;position:relative;border:1px solid rgba(0,0,0,0.05);cursor:pointer;}
.pricing-card:hover{ transform:translateY(-5px);box-shadow:0 8px 30px rgba(0,0,0,0.1);}
.pricing-card h3{ font-size:1.8rem;margin-bottom:1rem;color:var(--text-color);}
.price{ font-size:2rem;font-weight:700;color:var(--text-color);margin-bottom:1.5rem;}
.description{ font-size:1rem;color:#444;line-height:1.6;margin-bottom:2rem;}
.features{ flex-grow:1;}
.features h3{ font-size:1.1rem;margin-top:1rem;margin-bottom:0.5rem;color:var(--text-color);}
.features ul{ list-style:none;margin:1rem 0;padding-left:1.5rem;}
.features li{ position:relative;padding-left:1.5rem;margin-bottom:0.8rem;line-height:1.4;}
.features li::before{ content:'✓';position:absolute;left:-1rem;color:var(--primary-color);font-weight:bold;}
.features li{ color:#444;}
.pricing-cta{ display:none;}
.premium-badge{ position:absolute;top:-1rem;right:1.5rem;background:var(--gradient);color:var(--text-color);padding:0.5rem 1.5rem;border-radius:var(--border-radius);font-weight:600;box-shadow:0 4px 15px rgba(255,215,0,0.3);}
.premium{ border:2px solid var(--primary-color);transform:scale(1.02);}
.premium:hover{ transform:scale(1.02) translateY(-5px);}
.pricing-card.maintenance{ margin-top:0 !important;max-width:none !important;margin-left:0 !important;margin-right:0 !important;grid-column:auto !important;}
@media (max-width:1200px){ .pricing-grid{ grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){ .pricing-grid{ grid-template-columns:1fr;gap:1.5rem;padding:0;}
}
@media (max-width:480px){ .pricing-card{ padding:1.5rem;}
 .pricing-card h3{ font-size:1.4rem;}
 .price{ font-size:1.6rem;}
 .features li{ font-size:0.9rem;}
 .premium-badge{ font-size:0.8rem;padding:0.3rem 1rem;}
}
@media (max-width:768px){ .pricing-card{ opacity:0;transform:translateY(20px);transition:all 0.5s ease;}
 .pricing-card.visible{ opacity:1;transform:translateY(0);}
 .pricing-card.premium.visible{ transform:scale(1);}
}
@media (hover:none){ .pricing-card{ cursor:pointer;-webkit-tap-highlight-color:transparent;}
 .pricing-card:active{ background:rgba(0,0,0,0.02);}
}
.pagespeed{ padding:var(--section-spacing) 0;background:linear-gradient(135deg,#ffffff 0%,#f5f5f5 100%);overflow:hidden;}
.pagespeed h2{ text-align:center;font-size:clamp(var(--h2-size-mobile),4vw,var(--h2-size-desktop));margin-bottom:3rem;position:relative;}
.pagespeed h2::after{ content:'';position:absolute;bottom:-1rem;left:50%;transform:translateX(-50%);width:80px;height:4px;background:var(--gradient);border-radius:2px;}
.pagespeed-container{ max-width:var(--content-width);margin:0 auto;padding:0 2rem;}
.pagespeed-content{ display:flex;flex-direction:column;gap:3rem;margin-bottom:3rem;}
.pagespeed-text{ text-align:center;}
.pagespeed-text h3{ font-size:1.8rem;margin-bottom:1rem;color:var(--text-color);}
.pagespeed-text p{ color:#444;line-height:1.6;margin:0;font-size:1.1rem;max-width:800px;margin:0 auto;}
.pagespeed-scores{ display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;justify-content:center;}
.score-card{ background:white;padding:2rem;border-radius:var(--border-radius);box-shadow:var(--box-shadow);text-align:center;transition:transform 0.3s ease;border:1px solid rgba(0,0,0,0.05);}
.score-card:hover{ transform:translateY(-5px);}
.score{ font-size:3rem;font-weight:700;color:var(--primary-color);margin-bottom:0.5rem;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.score-label{ font-size:1.1rem;color:#444;font-weight:500;}
.pagespeed-image{ width:100%;max-width:800px;margin:0 auto;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--box-shadow);border:1px solid rgba(0,0,0,0.05);}
.pagespeed-image img{ width:100%;height:auto;display:block;transition:transform 0.3s ease;}
.pagespeed-image:hover img{ transform:scale(1.02);}
.seotester-section{ margin-top:4rem;padding-top:3rem;border-top:1px solid rgba(0,0,0,0.1);}
.seotester-section .pagespeed-text{ margin-bottom:2rem;}
.seotester-section .pagespeed-text h3{ color:var(--text-color);font-size:1.8rem;margin-bottom:1rem;}
.seotester-section .pagespeed-text p{ color:#666;font-size:1.1rem;line-height:1.6;max-width:800px;margin:0 auto;}
.seotester-section .pagespeed-image{ box-shadow:var(--box-shadow);border-radius:var(--border-radius);overflow:hidden;border:1px solid rgba(0,0,0,0.05);transition:transform 0.3s ease;}
.seotester-section .pagespeed-image:hover{ transform:translateY(-5px);}
@media (max-width:768px){ .pagespeed-container{ padding:0 1rem;}
 .pagespeed-scores{ grid-template-columns:repeat(2,1fr);gap:1rem;}
 .score-card{ padding:1.5rem;}
 .score{ font-size:2.5rem;}
 .score-label{ font-size:1rem;}
}
@media (max-width:480px){ .pagespeed-scores{ grid-template-columns:1fr;}
 .pagespeed-text h3{ font-size:1.5rem;}
 .pagespeed-text p{ font-size:1rem;}
}
.speed-comparison{ padding:var(--section-spacing) 0;background:linear-gradient(135deg,rgba(50,50,50,0.95) 0%,rgba(70,70,70,0.95) 100%);color:white;position:relative;overflow:hidden;}
.speed-comparison::before{ content:'';position:absolute;top:0;left:0;width:100%;height:100px;background:#fff;/* mirror the bottom wave effect at the top */
  /* Use the same shape as the bottom wave without flipping. Adjust position slightly to avoid visible seams. */
  clip-path:polygon(0 0,100% 0,100% 70%,0 100%);
  /* Cover 1px above to prevent a dark line between sections */
  top:-1px;
  height:101px;
  z-index:1;
}
.speed-comparison::after{ content:'';position:absolute;bottom:-1px;left:0;width:100%;height:101px;background:#fff;clip-path:polygon(0 100%,100% 100%,100% 0,0 30%);z-index:1;}
.speed-comparison h2{ text-align:center;font-size:clamp(var(--h2-size-mobile),4vw,var(--h2-size-desktop));margin-bottom:4rem;color:white;position:relative;}
.speed-comparison h2::after{ content:'';position:absolute;bottom:-1rem;left:50%;transform:translateX(-50%);width:80px;height:4px;background:var(--gradient);border-radius:2px;}
.comparison-container{ max-width:var(--content-width);margin:0 auto;padding:0 2rem;position:relative;z-index:1;}
.website-comparison{ display:flex;justify-content:center;align-items:center;gap:3rem;margin-bottom:4rem;flex-wrap:wrap;}
.website{ background:rgba(240,240,240,0.1);padding:2rem;border-radius:var(--border-radius);flex:1;min-width:280px;max-width:400px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);transform:translateY(0);transition:transform 0.3s ease;}
.website:hover{ transform:translateY(-5px);}
.website h3{ text-align:center;margin-bottom:2rem;font-size:1.5rem;color:white;}
.loading-bar{ height:8px;background:rgba(255,255,255,0.1);border-radius:4px;overflow:hidden;margin-bottom:1rem;position:relative;}
.progress{ height:100%;border-radius:4px;width:0;position:absolute;top:0;left:0;}
.progress.slow{ background:#ff4444;animation:loadSlow 3.1s ease-out forwards;}
.progress.fast{ background:#00ff00;animation:loadFast 1.2s ease-out forwards;}
@keyframes loadSlow{ 0%{ width:0;}
 100%{ width:100%;}
}
@keyframes loadFast{ 0%{ width:0;}
 100%{ width:100%;}
}
@keyframes pulseBadge{ 0%{ transform:scale(1);}
 50%{ transform:scale(1.1);}
 100%{ transform:scale(1);}
}
.loading-time{ text-align:center;font-size:1.2rem;margin-bottom:2rem;color:#e0e0e0;}
.vs-badge{ background:var(--gradient);width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:1.2rem;color:var(--text-color);box-shadow:0 0 20px rgba(255,215,0,0.3);animation:pulseBadge 2s infinite;}
.performance-metrics{ display:grid;gap:1rem;}
.metric{ display:flex;justify-content:space-between;align-items:center;padding:0.5rem;background:rgba(240,240,240,0.05);border-radius:4px;}
.metric-label{ color:#e0e0e0;}
.metric-value{ font-weight:bold;padding:0.3rem 0.8rem;border-radius:4px;}
.metric-value.poor{ background:rgba(255,68,68,0.2);color:#ff4444;}
.metric-value.excellent{ background:rgba(0,255,0,0.2);color:#00ff00;}
.comparison-features{ display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-top:4rem;}
.feature{ text-align:center;padding:2rem;background:rgba(240,240,240,0.05);border-radius:var(--border-radius);border:1px solid rgba(255,255,255,0.1);transition:transform 0.3s ease;}
.feature:hover{ transform:translateY(-5px);}
.feature-icon{ width:48px;height:48px;filter:invert(82%) sepia(43%) saturate(600%) hue-rotate(1deg) brightness(115%) contrast(101%);transition:transform 0.3s ease;}
.feature:hover .feature-icon{ transform:scale(1.1);}
.feature h4{ color:white;margin-bottom:1rem;font-size:1.2rem;}
.feature p{ color:#e0e0e0;font-size:1rem;line-height:1.6;}
@media (max-width:768px){ .website-comparison{ gap:2rem;}
 .vs-badge{ width:40px;height:40px;font-size:1rem;}
 .website{ padding:1.5rem;}
 .feature{ padding:1.5rem;}
}
@media (max-width:480px){ .website-comparison{ flex-direction:column;}
 .vs-badge{ margin:1rem 0;}
 .website{ min-width:100%;}
}
.burger-menu{ display:none;flex-direction:column;justify-content:space-around;width:30px;height:25px;background:transparent;border:none;cursor:pointer;padding:0;z-index:1100;margin-right:1rem;transition:transform 0.3s ease;}
.burger-menu span{ width:30px;height:3px;background:#ffffff;border-radius:10px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;transform-origin:1px;}
.burger-menu.active{ transform:rotate(90deg);}
.burger-menu.active span:first-child{ transform:rotate(45deg);width:28px;}
.burger-menu.active span:nth-child(2){ opacity:0;transform:translateX(20px);}
.burger-menu.active span:nth-child(3){ transform:rotate(-45deg);width:28px;}
.burger-menu:hover span{ background:var(--primary-color);}
@media (max-width:768px){ .burger-menu{ display:flex;margin-right:0;}
 .nav-links{ position:fixed;top:calc(var(--nav-top-offset-mobile) + var(--nav-mobile-height));left:0;width:100%;height:calc(100dvh - (var(--nav-top-offset-mobile) + var(--nav-mobile-height)));background:rgba(40,40,40,0.95);backdrop-filter:blur(15px) saturate(120%);-webkit-backdrop-filter:blur(15px) saturate(120%);border:1px solid rgba(255,255,255,0.2);display:none;flex-direction:column;align-items:center;justify-content:flex-start;padding:1.5rem 0;gap:1rem;transform:translateY(0);opacity:1;transition:opacity 0.4s cubic-bezier(0.4,0,0.2,1),transform 0.4s cubic-bezier(0.4,0,0.2,1),top 0.2s ease,height 0.2s ease;z-index:999;overflow-y:auto;border-top:1px solid rgba(255,255,255,0.25);}
 .nav-links.active{ display:flex;transform:translateY(0);opacity:1;}
 .nav-links a{ font-size:1rem;width:80%;text-align:center;padding:0.6rem;border-radius:6px;transition:all 0.3s ease;background-color:rgba(255,255,255,0.1);color:#fff;font-weight:500;letter-spacing:0.5px;border:1px solid rgba(255,255,255,0.2);margin-bottom:0.5rem;}
 .nav-links a:hover,.nav-links a:focus{ background:rgba(255,215,0,0.2);color:var(--primary-color);border-color:rgba(255,215,0,0.4);}
 .nav-links .phone-link{ width:80%;position:relative;margin:0;bottom:auto;right:auto;display:flex;justify-content:center;background:var(--primary-color);border-radius:var(--border-radius);padding:0.6rem !important;}
 .nav-links .phone-link img{ filter:brightness(0) invert(0);}
 .nav-links .phone-link:hover{ background:var(--primary-color);transform:none;}
 .nav-links .phone-link::after{ display:none;}
 .dropdown-toggle{ width:100%;justify-content:center;padding:0.6rem;border-radius:6px;background-color:rgba(255,255,255,0.1);color:#fff;font-weight:500;letter-spacing:0.5px;border:1px solid rgba(255,255,255,0.2);}
 .dropdown-menu a{ text-align:center;padding:0.6rem;margin:0.3rem 0;background-color:rgba(255,255,255,0.05);border-radius:6px;border:1px solid rgba(255,255,255,0.15);}
 .dropdown-menu a:hover{ background:rgba(255,215,0,0.15);color:var(--primary-color);border-color:rgba(255,215,0,0.3);}
}
.dropdown{ position:relative;display:inline-block;}
.dropdown-toggle{ cursor:pointer;display:flex;align-items:center;}
.dropdown-toggle::after{ content:'▾';display:inline-block;margin-left:0.5rem;font-size:0.8rem;}
.dropdown:hover .dropdown-toggle::after{ color:var(--primary-color);}
.dropdown-menu{ position:absolute;top:100%;left:0;background:rgba(40,40,40,0.85);backdrop-filter:blur(15px) saturate(110%);-webkit-backdrop-filter:blur(15px) saturate(110%);border:1px solid rgba(255,255,255,0.2);min-width:220px;border-radius:var(--border-radius);padding:0.8rem;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease,transform 0.3s ease;z-index:10;box-shadow:0 10px 35px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.1);transform:translateY(10px);}
.dropdown:hover .dropdown-menu{ opacity:1;visibility:visible;transform:translateY(0);}
.dropdown-menu a{ display:block;padding:0.8rem 1.2rem;white-space:nowrap;transition:color 0.2s ease,background-color 0.2s ease;width:100%;text-align:left;border-radius:calc(var(--border-radius) - 4px);color:#f0f0f0;}
.dropdown-menu a:hover{ color:var(--primary-color);background-color:rgba(255,255,255,0.1);}
@media (max-width:768px){ .dropdown{ width:80%;}
 .dropdown-toggle{ width:100%;justify-content:center;padding:0.6rem;border-radius:6px;background-color:rgba(255,255,255,0.1);color:#fff;font-weight:500;letter-spacing:0.5px;border:1px solid rgba(255,255,255,0.2);}
 .dropdown-menu{ position:static;opacity:1;visibility:visible;background:transparent;box-shadow:none;min-width:100%;max-height:0;overflow:hidden;padding:0;transition:max-height 0.3s ease;}
 .dropdown-menu a{ text-align:center;padding:0.6rem;margin:0.3rem 0;background-color:rgba(255,255,255,0.05);border-radius:6px;border:1px solid rgba(255,255,255,0.15);}
 .dropdown-menu a:hover{ background:rgba(255,215,0,0.15);color:var(--primary-color);border-color:rgba(255,215,0,0.3);}
}
.dropdown.active .dropdown-menu{ max-height:300px;}

/* Remove borders around blog dropdown in mobile menu */
@media (max-width:768px){
  .dropdown-toggle,
  .dropdown-menu,
  .dropdown-menu a{
    border:none !important;
  }
}
.process{ padding:var(--section-spacing) 0;background:#fff;}
.process h2{ text-align:center;font-size:clamp(var(--h2-size-mobile),4vw,var(--h2-size-desktop));margin-bottom:4rem;position:relative;}
.process h2::after{ content:'';position:absolute;bottom:-1rem;left:50%;transform:translateX(-50%);width:80px;height:4px;background:var(--gradient);border-radius:2px;}
.timeline{ max-width:var(--content-width);margin:0 auto;position:relative;padding:2rem 0;}
.timeline::before{ content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:4px;height:100%;background:linear-gradient(to bottom,transparent,var(--primary-color),transparent);}
.timeline-item{ display:flex;justify-content:center;align-items:center;margin:2rem 0;opacity:0;transform:translateY(20px);transition:all 0.5s ease;}
.timeline-item.visible{ opacity:1;transform:translateY(0);}
.timeline-content{ width:45%;background:white;padding:2rem;border-radius:var(--border-radius);box-shadow:var(--box-shadow);position:relative;border:1px solid rgba(0,0,0,0.05);}
.timeline-item:nth-child(odd) .timeline-content{ margin-right:55%;}
.timeline-item:nth-child(even) .timeline-content{ margin-left:55%;}
.timeline-content::before{ content:'';position:absolute;top:50%;width:20px;height:20px;background:var(--gradient);border-radius:50%;}
.timeline-item:nth-child(odd) .timeline-content::before{ right:-60px;transform:translateY(-50%);}
.timeline-item:nth-child(even) .timeline-content::before{ left:-60px;transform:translateY(-50%);}
.timeline-icon{ width:48px;height:48px;margin-bottom:1rem;fill:var(--primary-color);}
.timeline-content h3{ font-size:1.4rem;margin-bottom:1rem;color:var(--text-color);}
.timeline-content p{ color:#666;line-height:1.6;}
@media (max-width:768px){ .timeline::before{ left:20px;transform:none;}
 .timeline-item{ justify-content:flex-start;margin:3rem 0;}
 .timeline-content{ width:calc(100% - 40px);margin-left:40px !important;margin-right:0 !important;}
 .timeline-item:nth-child(odd) .timeline-content::before,.timeline-item:nth-child(even) .timeline-content::before{ left:-30px;right:auto;width:15px;height:15px;}
 .timeline-icon{ width:32px;height:32px;margin-bottom:0.8rem;}
 .timeline-content h3{ font-size:1.2rem;margin-bottom:0.6rem;}
 .timeline-content p{ font-size:0.95rem;line-height:1.5;}
}
@media (max-width:480px){ .timeline-content{ width:calc(100% - 50px);margin-left:50px !important;padding:1.2rem;}
 .timeline::before{ left:25px;}
 .timeline-item:nth-child(odd) .timeline-content::before,.timeline-item:nth-child(even) .timeline-content::before{ left:-35px;width:15px;height:15px;}
 .timeline-icon{ width:28px;height:28px;}
 .timeline-content h3{ font-size:1.1rem;}
 .timeline-content p{ font-size:0.9rem;}
}
.references{ padding:var(--section-spacing) 0;background:#f5f5f5;color:var(--text-color);overflow:hidden;}
.references h2{ text-align:center;font-size:clamp(var(--h2-size-mobile),4vw,var(--h2-size-desktop));margin-bottom:3rem;color:var(--text-color);position:relative;}
.references h2::after{ content:'';position:absolute;bottom:-1rem;left:50%;transform:translateX(-50%);width:80px;height:4px;background:var(--gradient);border-radius:2px;}
.references-container{ max-width:var(--content-width);margin:0 auto;padding:0 2rem;}
.references-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;width:100%;}
.reference-card{ background:white;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--box-shadow);transition:all 0.3s ease;height:100%;position:relative;top:0;}
.reference-card:hover{ transform:translateY(-8px);box-shadow:0 12px 30px rgba(0,0,0,0.15);}
.reference-link{ text-decoration:none;color:var(--text-color);display:block;height:100%;}
.reference-image{ width:100%;height:0;padding-bottom:56.25%;position:relative;overflow:hidden;background:#f0f0f0;}
.reference-image img{ position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;}
.reference-card:hover .reference-image img{ transform:scale(1.08);}
.reference-content{ padding:1.8rem;background:white;}
.reference-content h3{ font-size:1.4rem;margin-bottom:1rem;color:var(--text-color);position:relative;padding-bottom:0.8rem;}
.reference-content h3::after{ content:'';position:absolute;bottom:0;left:0;width:40px;height:3px;background:var(--gradient);border-radius:1px;transition:width 0.3s ease;}
.reference-card:hover .reference-content h3::after{ width:60px;}
.reference-content p{ color:#555;line-height:1.7;margin:0;font-size:0.95rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
@media (max-width:992px){ .references-grid{ grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){ .references-container{ padding:0 1rem;}
 .reference-content{ padding:1.5rem;}
 .reference-content h3{ font-size:1.3rem;margin-bottom:0.8rem;}
}
@media (max-width:600px){ .references-grid{ grid-template-columns:1fr;max-width:400px;margin:0 auto;}
 .reference-card{ max-width:100%;}
}
.references-page,.impressum-page,.datenschutz-page,.thank-you-page,.preview-page,.blog-page,.prices-page{ padding-top:100px;min-height:calc(100vh - 100px);}
@media (max-width:768px){ .references-page,.impressum-page,.datenschutz-page,.thank-you-page,.preview-page,.blog-page,.prices-page{ padding-top:80px;min-height:calc(100vh - 80px);}
}
.thank-you-page{ display:flex;flex-direction:column;align-items:center;justify-content:center;}
.tools-section{ padding:var(--section-spacing) 0;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);text-align:center;}
.tools-section h2{ text-align:center;font-size:clamp(var(--h2-size-mobile),4vw,var(--h2-size-desktop));margin-bottom:3rem;position:relative;}
.tools-section h2::after{ content:'';position:absolute;bottom:-1rem;left:50%;transform:translateX(-50%);width:80px;height:4px;background:var(--gradient);border-radius:2px;}
.tools-container{ max-width:var(--content-width);margin:0 auto;padding:0 2rem;}
.tools-content{ text-align:center;}
.tools-content p{ margin-bottom:2rem;max-width:800px;margin-left:auto;margin-right:auto;color:var(--text-color);line-height:1.6;}
.tools-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin:3rem 0;}
.tool-card{ background:white;padding:1.5rem;border-radius:var(--border-radius);box-shadow:var(--box-shadow);transition:transform 0.3s ease;/* allow cards to grow based on content height */
  height:auto;
}
.tool-card:hover{ transform:translateY(-5px);}
.tool-icon{ width:120px;height:auto;margin-bottom:1rem;transition:transform 0.3s ease;}
.tool-card:hover .tool-icon{ transform:scale(1.05);}
.tool-card p{ color:#555;font-size:0.95rem;margin:0;word-break:break-word;overflow-wrap:break-word;}
.tools-conclusion{ margin-top:2rem;font-weight:500;}
.tools-slider{ display:flex;gap:2rem;margin:3rem 0;overflow:hidden;width:100%;}
.tools-slider img{ height:50px;object-fit:contain;flex-shrink:0;animation:slideTools 30s linear infinite;}
@keyframes slideTools{ 0%{ transform:translateX(0);}
 100%{ transform:translateX(-100%);}
}
@media (max-width:768px){ .tools-grid{ grid-template-columns:repeat(2,1fr);gap:1.5rem;}
 .tool-icon{ width:70px;}
 .tools-section{ padding:4rem 0;}
 .tools-section h2{ font-size:1.6rem;margin-bottom:2.5rem;}
 .tools-content > p{ font-size:0.9rem;}
 .tool-card p{ font-size:0.9rem;word-break:break-word;overflow-wrap:break-word;}
}
@media (max-width:480px){ .tools-grid{ grid-template-columns:1fr;gap:1rem;}
 .tools-section{ padding:3rem 0;}
 .tools-section h2{ font-size:1.4rem;margin-bottom:2rem;}
 .tools-content > p{ font-size:0.85rem;}
 .tool-icon{ width:60px;}
 .tool-card{ padding:1.2rem;}
 .tool-card p{ font-size:0.85rem;word-break:break-word;overflow-wrap:break-word;}
}
.preview-page{ padding-top:100px;min-height:calc(100vh - 100px);background:#f8f9fa;display:flex;flex-direction:column;align-items:center;}
.preview-container{ width:90%;max-width:800px;margin:2rem auto 4rem;padding:2.5rem;background:#fff;border-radius:var(--border-radius);box-shadow:var(--box-shadow);border:1px solid rgba(0,0,0,0.05);position:relative;overflow:hidden;}
.preview-container::before{ content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient);}
.preview-container h1{ font-size:clamp(1.8rem,4vw,2.2rem);margin-bottom:1.5rem;color:var(--text-color);position:relative;padding-bottom:1rem;text-align:center;}
.preview-container h1::after{ content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:70px;height:3px;background:var(--gradient);border-radius:2px;}
.preview-intro{ font-size:1.05rem;color:#555;line-height:1.7;margin-bottom:2.5rem;text-align:center;}
.preview-container .contact-form{ }
@media (max-width:768px){ .preview-page{ padding-top:80px;}
 .preview-container{ width:95%;padding:2rem 1.5rem;}
 .preview-container h1{ font-size:1.6rem;}
 .preview-intro{ font-size:1rem;}
}
@media (max-width:480px){ .hero .cta-button{ width:90%;margin-left:auto;margin-right:auto;display:block;}
 .hero .cta-button + .cta-button{ margin-top:1rem;}
}
.impressum-container a{ color:var(--secondary-color);text-decoration:none;border-bottom:1px solid rgba(255,165,0,0.3);transition:all 0.3s ease;padding:0 2px;position:relative;}
.impressum-container a:hover{ color:var(--primary-color);border-bottom-color:var(--primary-color);background-color:rgba(255,215,0,0.05);}
.impressum-container a.external-link{ padding-right:20px;}
.impressum-container a.external-link::after{ content:'';background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14'%3E%3Cpath fill='%23FFA500' d='M5 3v16h16v-16h-16zm14 14h-12v-12h12v12zm-3-10l-5 5.5 1 1 5.5-5 1 1v-4h-4l1 1.5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;width:14px;height:14px;display:inline-block;position:absolute;right:0;top:50%;transform:translateY(-50%);}
.impressum-container a:focus{ outline:2px solid var(--primary-color);outline-offset:2px;}
.contact-info a{ display:inline-flex;align-items:center;}
.phone-link{ display:flex;align-items:center;justify-content:center;background:var(--primary-color);border-radius:var(--border-radius);padding:0.6rem !important;margin-left:0.5rem;transition:all 0.3s ease;}
.phone-link img{ filter:brightness(0) invert(0);width:18px;height:18px;}
.phone-link:hover{ background:var(--primary-color);transform:none;}
.phone-link::after{ display:none;}
@media (max-width:768px){ .phone-link{ position:fixed;bottom:20px;right:20px;z-index:1001;background:var(--primary-color);border-radius:var(--border-radius);width:50px;height:50px;box-shadow:0 4px 15px rgba(0,0,0,0.2);margin:0;}
 .phone-link img{ width:24px;height:24px;}
}
.nav-links .phone-link:hover{ background:var(--primary-color);transform:none;}
@media (max-width:768px){ .phone-link:hover{ background:var(--primary-color);transform:none;}
}
.references-page,.impressum-page,.privacy-page{ padding-top:calc(var(--nav-mobile-height) + var(--nav-top-offset-mobile) + 1rem);min-height:calc(100vh - (var(--nav-mobile-height) + var(--nav-top-offset-mobile) + 1rem));}
@media (max-width:768px){ .social-icons{ justify-content:center;gap:1rem;}
 .footer-content a,.footer-bottom a{ padding:4px 8px;}
 .phone-link:hover{ background-color:#fff;transform:scale(1.05);}
 .phone-link:active{ transform:scale(0.95);}
}
@media (prefers-reduced-motion:reduce){ .footer-content a,.footer-bottom a,.social-icon,.social-icon img{ transition:none;animation:none;}
}
nav .nav-logo a{ transition:opacity var(--transition-speed) ease;}
nav .nav-logo a:hover{ opacity:0.8;}
nav .nav-links > a:not(.phone-link):hover,nav .nav-links > .dropdown > .dropdown-toggle:hover{ color:var(--primary-color);transform:translateY(-2px);}
@media (min-width:769px){ nav .nav-links .phone-link:hover{ background-color:var(--secondary-color);transform:translateY(-2px) scale(1.05);}
}
#services-title{ opacity:0;transform:translateY(20px);transition:opacity 0.6s ease-out,transform 0.6s ease-out;}
#services-title.visible{ opacity:1;transform:translateY(0);}
.google-reviews-slider{ padding:2rem 0;background:linear-gradient(135deg,#232526 0%,#414345 100%);color:#f0f0f0;margin-bottom:2rem;}
.google-reviews-slider .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.reviews-container-wrapper{ max-width:var(--content-width);margin:0 auto;padding:0 1rem;display:flex;flex-direction:column;align-items:center;gap:3rem;}
@media (min-width:992px){ .reviews-container-wrapper{ flex-direction:row;align-items:flex-start;}
}

/* Improve responsiveness for customer reviews section */
@media (max-width:992px){
  /* Stack summary and carousel vertically and use full width */
  .reviews-container-wrapper{
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
  }
  .reviews-summary{
    width: 100%;
    max-width: none;
    position: static;
    top: auto;
  }
  .reviews-carousel{
    width: 100%;
    max-width: none;
  }
}

@media (max-width:768px){
  /* Reduce padding for small devices */
  .reviews-summary{
    padding: 1.5rem;
  }
  .review-card{
    padding: 1.2rem;
  }
}

@media (max-width:480px){
  /* Stack reviewer info vertically on very small screens */
  .review-header{
    flex-direction: column;
    align-items: flex-start;
  }
  .review-header .reviewer-info{
    margin-top: 0.5rem;
  }
}
.reviews-summary{ text-align:center;padding:2rem;background:rgba(255,255,255,0.05);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--border-radius);border:1px solid rgba(255,255,255,0.1);box-shadow:0 8px 32px rgba(0,0,0,0.2);flex-shrink:0;width:100%;max-width:300px;}
@media (min-width:992px){ .reviews-summary{ width:auto;min-width:280px;position:sticky;top:calc(var(--nav-base-height) + var(--nav-top-offset-desktop) + 2rem);}
}
.google-logo-review{ width:80px;height:auto;margin-bottom:1rem;}
.summary-stars,.review-stars{ display:flex;justify-content:center;gap:0.3rem;margin-bottom:0.5rem;}
.summary-stars .star-icon,.review-stars .star-icon{ width:22px;height:22px;}
.rating-text-bold{ font-size:1.4rem;font-weight:700;color:#f9e44e;margin-bottom:0.5rem;}
.rating-info{ font-size:0.9rem;color:#b0b0b0;}
.reviews-carousel{ position:relative;overflow:hidden;width:100%;max-width:800px;}
@media (min-width:992px){ .reviews-carousel{ flex-grow:1;}
}
.reviews-wrapper{ display:flex;transition:transform 0.5s ease-in-out;}
.review-card{ width:100%;flex-shrink:0;box-sizing:border-box;padding:1.5rem;margin:0;background:rgba(255,255,255,0.07);backdrop-filter:blur(15px) saturate(150%);-webkit-backdrop-filter:blur(15px) saturate(150%);border-radius:var(--border-radius);border:1px solid rgba(255,255,255,0.15);box-shadow:0 4px 20px rgba(0,0,0,0.15);display:flex;flex-direction:column;gap:1rem;color:#e0e0e0;}
.review-header{ display:flex;align-items:center;gap:1rem;}
.reviewer-avatar{ width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.2);}
.reviewer-info .reviewer-name{ font-weight:600;color:#ffffff;margin-bottom:0.2rem;}
.review-stars .star-icon{ width:16px;height:16px;}
.review-body .review-text-content{ font-size:0.95rem;line-height:1.6;margin-bottom:0.8rem;max-height:4.8em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;transition:max-height 0.3s ease-in-out;}
.review-body .review-text-content.expanded{ max-height:none;-webkit-line-clamp:unset;}
.read-more-less{ color:var(--primary-color);font-weight:500;text-decoration:none;font-size:0.9rem;cursor:pointer;transition:color 0.2s ease;}
.read-more-less:hover{ color:#fff;}
.carousel-nav{ position:absolute;top:50%;transform:translateY(-50%);background-color:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff;border-radius:50%;width:40px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color 0.3s ease;z-index:10;backdrop-filter:blur(5px);}
.carousel-nav svg{ fill:currentColor;width:24px;height:24px;}
.carousel-nav:hover{ background-color:rgba(255,255,255,0.2);}
.carousel-nav.prev{ left:-15px;}
.carousel-nav.next{ right:-15px;}
@media (max-width:768px){ .reviews-container-wrapper{ padding:0 0.5rem;}
 .reviews-summary{ max-width:none;margin-bottom:2rem;}
 .reviews-carousel{ max-width:100%;}
 .review-card{ padding:1.2rem;margin:0;}
 .carousel-nav.prev{ left:5px;}
 .carousel-nav.next{ right:5px;}
}
.reviews-summary,.reviews-carousel{ align-self:stretch;overflow:hidden;}
#google-reviews-title{ font-size:clamp(var(--h2-size-mobile),4vw,var(--h2-size-desktop));margin-bottom:2rem;text-align:center;color:#ffffff;position:relative;}
#google-reviews-title::after{ content:'';position:absolute;bottom:-0.5rem;left:50%;transform:translateX(-50%);width:80px;height:3px;background:var(--gradient);border-radius:2px;}
.pagespeed.scroll-section{ opacity:0;transform:translateX(-50px);transition:opacity 0.8s ease-out,transform 0.8s ease-out;}
.pagespeed.scroll-section.visible{ opacity:1;transform:translateX(0);}


/* Moved inline styles from pagespeed-text section to external CSS */
.speed-comparison .pagespeed-text {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem auto;
}
.speed-comparison .pagespeed-text p {
  color: #e0e0e0;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.speed-comparison .pagespeed-text ul {
  color: #e0e0e0;
  text-align: left;
  list-style: none;
  margin-bottom: 2rem;
}
.speed-comparison .pagespeed-text li {
  margin-bottom: 1rem;
  padding-left: 2rem;
  position: relative;
}
.speed-comparison .pagespeed-text li span {
  color: var(--primary-color);
  position: absolute;
  left: 0;
}


/* Fade-in from right effect for security section */
.fade-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Mirror of pagespeed fade-in, but from RIGHT, for #security-test */
#security-test.security-section{ 
  opacity:0;
  transform:translateX(50px);
  transition:opacity 0.8s ease-out, transform 0.8s ease-out;
}
#security-test.security-section.visible{ 
  opacity:1;
  transform:translateX(0);
}