* {margin:0;padding:0;box-sizing:border-box} :root {--primary-color:#2563eb;--primary-dark:#1d4ed8;--secondary-color:#06b6d4;--accent-color:#f59e0b;--text-primary:#1f2937;--text-secondary:#6b7280;--text-light:#9ca3af;--bg-primary:#ffffff;--bg-secondary:#f9fafb;--bg-accent:#f3f4f6;--border-color:#e5e7eb;--success-color:#10b981;--error-color:#ef4444;--font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-size-5xl:3rem;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--spacing-3xl:4rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);--shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1),0 8px 10px -6px rgb(0 0 0 / 0.1);--transition-fast:0.15s ease-in-out;--transition-normal:0.3s ease-in-out;--transition-slow:0.5s ease-in-out} body {font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;color:var(--text-primary);background-color:var(--bg-primary);overflow-x:hidden} h1,h2,h3,h4,h5,h6 {font-weight:600;line-height:1.2;margin-bottom:var(--spacing-md)} h1 {font-size:var(--font-size-4xl)} h2 {font-size:var(--font-size-3xl)} h3 {font-size:var(--font-size-2xl)} h4 {font-size:var(--font-size-xl)} h5 {font-size:var(--font-size-lg)} h6 {font-size:var(--font-size-base)} p {margin-bottom:var(--spacing-md);color:var(--text-secondary)} a {color:var(--primary-color);text-decoration:none;transition:color var(--transition-fast)} a:hover {color:var(--primary-dark)} .container {max-width:1200px;margin:0 auto;padding:0 var(--spacing-lg)} .btn-primary,.btn-secondary {display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-md) var(--spacing-xl);border:none;border-radius:var(--radius-lg);font-size:var(--font-size-base);font-weight:500;text-decoration:none;cursor:pointer;transition:all var(--transition-normal);min-height:48px;color:inherit;gap:var(--spacing-sm)} .btn-primary {background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));color:white;box-shadow:var(--shadow-md)} .btn-primary:hover {transform:translateY(-2px);box-shadow:var(--shadow-lg)} .btn-primary:active {transform:scale(0.95)} .btn-secondary {background:transparent;color:var(--primary-color);border:2px solid var(--primary-color)} .btn-secondary:hover {background:var(--primary-color);color:white;transform:translateY(-2px)} .btn-secondary:active {transform:scale(0.95)} .cta-btn {background:linear-gradient(135deg,var(--accent-color),#f97316);color:white;border:none;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);font-weight:500;cursor:pointer;transition:all var(--transition-normal);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs)} .cta-btn:hover {transform:translateY(-1px);box-shadow:var(--shadow-md)} .cta-btn:active {transform:scale(0.95)} .btn-primary i,.btn-secondary i,.cta-btn i {font-size:0.9em;opacity:0.9;flex-shrink:0;display:flex;align-items:center;justify-content:center} .service-icon {display:flex;align-items:center;justify-content:center} .service-icon i {display:flex;align-items:center;justify-content:center} .feature i {display:flex;align-items:center;justify-content:center} .contact-item i {display:flex;align-items:center;justify-content:center} .social-link i {display:flex;align-items:center;justify-content:center} .header {position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-color);z-index:1000;transition:all var(--transition-normal)} .navbar {padding:var(--spacing-md) 0} .nav-container {max-width:1200px;margin:0 auto;padding:0 var(--spacing-lg);display:flex;align-items:center;justify-content:space-between} .nav-logo h2 {background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:var(--font-size-2xl);font-weight:700;margin:0} .nav-menu {display:flex;gap:var(--spacing-xl)} .nav-link {color:var(--text-primary);font-weight:500;position:relative;transition:color var(--transition-fast)} .nav-link:hover {color:var(--primary-color)} .nav-link::after {content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--primary-color);transition:width var(--transition-normal)} .nav-link:hover::after {width:100%} .nav-actions {display:flex;align-items:center;gap:var(--spacing-lg)} .language-switcher {display:flex;background:var(--bg-accent);border-radius:var(--radius-md);padding:var(--spacing-xs)} .lang-btn {background:transparent;border:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast);color:var(--text-secondary)} .lang-btn.active,.lang-btn:hover {background:white;color:var(--primary-color);box-shadow:var(--shadow-sm)} .hamburger {display:none;flex-direction:column;cursor:pointer;gap:4px} .hamburger span {width:25px;height:3px;background:var(--text-primary);border-radius:2px;transition:all var(--transition-normal);display:block} .hero {padding:120px 0 var(--spacing-3xl);background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);position:relative;overflow:hidden} .hero::before {content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23e2e8f0" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');opacity:0.3} .hero-container {max-width:1200px;margin:0 auto;padding:0 var(--spacing-lg);display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-3xl);align-items:center;position:relative;z-index:1} .hero-content {animation:fadeInUp 0.8s ease-out} .hero-title {font-size:var(--font-size-5xl);font-weight:700;background:linear-gradient(135deg,var(--text-primary),var(--primary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--spacing-lg);line-height:1.1} .hero-subtitle {font-size:var(--font-size-lg);color:var(--text-secondary);margin-bottom:var(--spacing-2xl);line-height:1.6} .hero-buttons {display:flex;gap:var(--spacing-lg);margin-bottom:var(--spacing-2xl)} .hero-stats {display:flex;gap:var(--spacing-2xl)} .stat {text-align:center} .stat-number {display:block;font-size:var(--font-size-2xl);font-weight:700;color:var(--primary-color)} .stat-label {font-size:var(--font-size-sm);color:var(--text-secondary)} .hero-image {display:flex;justify-content:center;align-items:center;animation:fadeInRight 0.8s ease-out 0.2s both} .hero-card {background:white;padding:var(--spacing-3xl);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);text-align:center;transform:rotate(5deg);transition:transform var(--transition-slow)} .hero-card:hover {transform:rotate(0deg) scale(1.05)} .hero-card i {font-size:4rem;color:var(--primary-color);margin-bottom:var(--spacing-lg);display:flex;align-items:center;justify-content:center} .hero-card h3 {color:var(--text-primary);margin:0} .services {padding:var(--spacing-3xl) 0;background:var(--bg-primary)} .reviews {padding:var(--spacing-3xl) 0;background:var(--bg-secondary)} .reviews-container {margin-bottom:var(--spacing-2xl)} .reviews-loading {text-align:center;padding:var(--spacing-3xl) 0} .loading-spinner {width:40px;height:40px;border:4px solid var(--border-color);border-top:4px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto var(--spacing-lg)} @keyframes spin {0% {transform:rotate(0deg)} 100% {transform:rotate(360deg)} } .reviews-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:var(--spacing-xl);margin-bottom:var(--spacing-2xl)} .review-card {background:white;padding:var(--spacing-xl);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);border:1px solid var(--border-color);transition:all var(--transition-normal)} .review-card:hover {transform:translateY(-4px);box-shadow:var(--shadow-lg)} .review-header {display:flex;align-items:center;margin-bottom:var(--spacing-md)} .review-avatar {width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));display:flex;align-items:center;justify-content:center;color:white;font-weight:600;font-size:var(--font-size-lg);margin-right:var(--spacing-md);flex-shrink:0} .review-avatar img {width:100%;height:100%;border-radius:50%;object-fit:cover} .review-info {flex:1} .review-name {font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xs)} .review-date {font-size:var(--font-size-sm);color:var(--text-light)} .review-rating {display:flex;gap:var(--spacing-xs);margin-bottom:var(--spacing-md)} .star {color:var(--accent-color);font-size:var(--font-size-sm);display:inline-flex;align-items:center;justify-content:center} .star.empty {color:var(--border-color)} .review-text {color:var(--text-secondary);line-height:1.6;margin-bottom:var(--spacing-md)} .review-source {display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-sm);color:var(--text-light)} .review-source i {color:var(--primary-color);display:flex;align-items:center;justify-content:center} .reviews-error {text-align:center;padding:var(--spacing-3xl) 0;color:var(--error-color)} .reviews-error i {font-size:3rem;margin-bottom:var(--spacing-lg);display:flex;align-items:center;justify-content:center} .reviews-footer {text-align:center} .reviews-footer .btn-secondary i {display:flex;align-items:center;justify-content:center} .section-header {text-align:center;margin-bottom:var(--spacing-3xl)} .section-title {font-size:var(--font-size-4xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-md)} .section-subtitle {font-size:var(--font-size-lg);color:var(--text-secondary);max-width:600px;margin:0 auto} .services-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-xl)} .service-card {background:white;padding:var(--spacing-2xl);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);text-align:center;transition:all var(--transition-normal);border:1px solid var(--border-color)} .service-card:hover {transform:translateY(-8px);box-shadow:var(--shadow-xl);border-color:var(--primary-color)} .service-icon {width:80px;height:80px;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto var(--spacing-lg)} .service-icon i {font-size:2rem;color:white} .service-card h3 {color:var(--text-primary);margin-bottom:var(--spacing-md)} .service-card p {color:var(--text-secondary);margin:0} .about {padding:var(--spacing-3xl) 0;background:var(--bg-secondary)} .about-content {display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-3xl);align-items:center} .about-text h2 {font-size:var(--font-size-4xl);font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-2xl)} .features {display:flex;flex-direction:column;gap:var(--spacing-xl)} .feature {display:flex;gap:var(--spacing-lg);align-items:flex-start} .feature i {width:50px;height:50px;background:linear-gradient(135deg,var(--accent-color),#f97316);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:1.25rem;flex-shrink:0} .feature h4 {color:var(--text-primary);margin-bottom:var(--spacing-sm)} .feature p {color:var(--text-secondary);margin:0} .about-image {display:flex;justify-content:center;align-items:center} .image-placeholder {background:white;padding:var(--spacing-3xl);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);text-align:center;width:100%;max-width:400px} .image-placeholder i {font-size:4rem;color:var(--primary-color);margin-bottom:var(--spacing-lg);display:flex;align-items:center;justify-content:center} .image-placeholder p {color:var(--text-secondary);margin:0} .contact {padding:var(--spacing-3xl) 0;background:var(--bg-primary)} .contact-content {display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-3xl)} .contact-info {display:flex;flex-direction:column;gap:var(--spacing-xl)} .contact-item {display:flex;gap:var(--spacing-lg);align-items:flex-start} .contact-item i {width:50px;height:50px;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:1.25rem;flex-shrink:0} .contact-item h4 {color:var(--text-primary);margin-bottom:var(--spacing-sm)} .contact-item p {color:var(--text-secondary);margin:0} .contact-form {background:white;padding:var(--spacing-2xl);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)} .form-group {position:relative;margin-bottom:var(--spacing-lg)} .form-group input,.form-group select,.form-group textarea {width:100%;padding:var(--spacing-md);border:2px solid var(--border-color);border-radius:var(--radius-md);font-size:var(--font-size-base);font-family:var(--font-family);transition:all var(--transition-fast);background:var(--bg-primary)} .form-group input:focus,.form-group select:focus,.form-group textarea:focus {outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(37,99,235,0.1)} .form-group label {position:absolute;top:var(--spacing-md);left:var(--spacing-md);color:var(--text-light);font-size:var(--font-size-base);transition:all var(--transition-fast);pointer-events:none;background:var(--bg-primary);padding:0 var(--spacing-xs)} .form-group input:focus + label,.form-group input:not(:placeholder-shown) + label,.form-group textarea:focus + label,.form-group textarea:not(:placeholder-shown) + label {top:-8px;left:var(--spacing-sm);font-size:var(--font-size-sm);color:var(--primary-color)} .form-group select {cursor:pointer} .form-group select option {padding:var(--spacing-md)} .footer {background:var(--text-primary);color:white;padding:var(--spacing-3xl) 0 var(--spacing-lg)} .footer-content {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-2xl);margin-bottom:var(--spacing-2xl)} .footer-section h3,.footer-section h4 {color:white;margin-bottom:var(--spacing-lg)} .footer-section p {color:#d1d5db;margin-bottom:var(--spacing-md)} .footer-section ul {list-style:none} .footer-section ul li {margin-bottom:var(--spacing-sm)} .footer-section ul li a {color:#d1d5db;transition:color var(--transition-fast)} .footer-section ul li a:hover {color:white} .social-links {display:flex;gap:var(--spacing-md);margin-top:var(--spacing-lg)} .social-link {width:40px;height:40px;background:rgba(255,255,255,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;transition:all var(--transition-normal)} .social-link i {display:flex;align-items:center;justify-content:center} .social-link:hover {background:var(--primary-color);transform:translateY(-2px)} .footer-bottom {border-top:1px solid #374151;padding-top:var(--spacing-lg);text-align:center} .footer-bottom p {color:#9ca3af;margin:0} @keyframes fadeInUp {from {opacity:0;transform:translateY(30px)} to {opacity:1;transform:translateY(0)} } @keyframes fadeInRight {from {opacity:0;transform:translateX(30px)} to {opacity:1;transform:translateX(0)} } @keyframes pulse {0%,100% {transform:scale(1)} 50% {transform:scale(1.05)} } html {scroll-behavior:smooth} .loading {opacity:0.6;pointer-events:none} .success {border-color:var(--success-color) !important;box-shadow:0 0 0 3px rgba(16,185,129,0.1) !important} .error {border-color:var(--error-color) !important;box-shadow:0 0 0 3px rgba(239,68,68,0.1) !important} .text-center {text-align:center} .text-left {text-align:left} .text-right {text-align:right} .mb-0 {margin-bottom:0} .mb-1 {margin-bottom:var(--spacing-xs)} .mb-2 {margin-bottom:var(--spacing-sm)} .mb-3 {margin-bottom:var(--spacing-md)} .mb-4 {margin-bottom:var(--spacing-lg)} .mb-5 {margin-bottom:var(--spacing-xl)} .mt-0 {margin-top:0} .mt-1 {margin-top:var(--spacing-xs)} .mt-2 {margin-top:var(--spacing-sm)} .mt-3 {margin-top:var(--spacing-md)} .mt-4 {margin-top:var(--spacing-lg)} .mt-5 {margin-top:var(--spacing-xl)} .hidden {display:none} .visible {display:block} button:focus,input:focus,select:focus,textarea:focus,a:focus {outline:2px solid var(--primary-color);outline-offset:2px} @media print {.header,.footer,.hero-buttons,.contact-form {display:none} body {font-size:12pt;line-height:1.4} .hero-title {font-size:24pt} .section-title {font-size:18pt} }