:root { --neutral-dark: #120F1C; --neutral-light: #FAF9FC; --neutral-body: #4A4656; --primary: #8B5CF6; --primary-hover: #7C3AED; --primary-light: #F3EEFC; --accent: #DF49A6; --white: #FFFFFF; --border: #E4E1EA; --font-main: 'Inter', system-ui, -apple-system, sans-serif; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04); --shadow-md: 0 8px 24px rgba(18, 15, 28, 0.08); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-main); color: var(--neutral-body); background-color: var(--neutral-light); line-height: 1.6; -webkit-font-smoothing: antialiased; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2rem; } h1, h2, h3, h4 { color: var(--neutral-dark); font-weight: 700; line-height: 1.25; margin-bottom: 1rem; } h1 { font-size: 3.5rem; letter-spacing: -0.02em; } h2 { font-size: 2.25rem; letter-spacing: -0.01em; } h3 { font-size: 1.5rem; } p { margin-bottom: 1.5rem; } a { color: var(--primary); text-decoration: none; transition: var(--transition); } a:hover { color: var(--primary-hover); } img { max-width: 100%; height: auto; display: block; border-radius: 12px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .cta-button { display: inline-flex; align-items: center; justify-content: center; background-color: var(--primary); color: var(--white); font-weight: 600; padding: 1rem 2.5rem; border-radius: 8px; border: none; cursor: pointer; transition: var(--transition); text-transform: uppercase; font-size: 0.875rem; letter-spacing: 0.05em; } .cta-button:hover { background-color: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2); } .site-header { background-color: var(--white); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; padding: 1rem 0; box-shadow: var(--shadow-sm); } .header-container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .logo-link { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; font-size: 1.25rem; color: var(--neutral-dark); } .desktop-nav { display: flex; align-items: center; gap: 2rem; } .desktop-nav a { color: var(--neutral-body); font-weight: 500; font-size: 0.9375rem; } .desktop-nav a:hover { color: var(--primary); } .header-contacts-right { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; } .header-contact-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--neutral-body); font-size: 0.875rem; font-weight: 500; } .header-contact-link svg { stroke: var(--primary); } .burger-btn { display: none; background: none; border: none; cursor: pointer; width: 24px; height: 24px; position: relative; } .burger-btn span { display: block; width: 100%; height: 2px; background-color: var(--neutral-dark); transition: var(--transition); position: absolute; left: 0; } .burger-btn span:nth-child(1) { top: 4px; } .burger-btn span:nth-child(2) { top: 11px; } .burger-btn span:nth-child(3) { top: 18px; } .burger-btn.active span:nth-child(1) { transform: rotate(45deg); top: 11px; } .burger-btn.active span:nth-child(2) { opacity: 0; } .burger-btn.active span:nth-child(3) { transform: rotate(-45deg); top: 11px; } .mobile-menu { display: none; position: fixed; top: 72px; left: 0; width: 100%; background-color: var(--white); border-bottom: 1px solid var(--border); padding: 2rem; z-index: 99; box-shadow: var(--shadow-md); } .mobile-menu.active { display: block; } .mobile-nav { display: flex; flex-direction: column; gap: 1.5rem; } .mobile-nav a { display: block; color: var(--neutral-dark); font-weight: 600; font-size: 1.125rem; } .mob-nav-link { color: var(--primary) !important; font-size: 0.95em !important; font-weight: 500 !important; } .hero-section { padding: 5rem 0; overflow: hidden; background: linear-gradient(135deg, #FAF9FC 0%, #F5F1FD 100%); } .hero-container-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: center; } .hero-text-content h1 .highlight { color: var(--accent); position: relative; z-index: 1; } .hero-text-content p { font-size: 1.125rem; line-height: 1.7; margin-bottom: 2rem; } .hero-image-wrapper img { width: 100%; height: auto; object-fit: cover; box-shadow: var(--shadow-md); border-radius: 20px; border: 8px solid var(--white); } .benefits-section { padding: 6rem 0; background-color: var(--white); border-bottom: 1px solid var(--border); } .section-header { text-align: center; max-width: 800px; margin: 0 auto 4rem auto; } .section-header h2 { margin-bottom: 1.5rem; } .section-header p { font-size: 1.125rem; line-height: 1.6; color: var(--neutral-body); } .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .benefit-card { padding: 3rem 2rem; border-radius: 16px; background-color: var(--neutral-light); border: 1px solid var(--border); transition: var(--transition); } .benefit-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--primary-light); } .benefit-icon-wrapper { margin-bottom: 1.5rem; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; background-color: var(--primary-light); color: var(--primary); font-weight: 700; font-size: 1.25rem; } .benefit-icon-square { display: block; width: 14px; height: 14px; background-color: var(--primary); border-radius: 2px; } .benefit-card h3 { margin-bottom: 1rem; color: var(--neutral-dark); } .benefit-card p { font-size: 0.9375rem; line-height: 1.6; color: var(--neutral-body); margin-bottom: 0; } .about-section { padding: 6rem 0; background-color: var(--neutral-light); } .about-container-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 5rem; align-items: center; } .about-text-content h2 { margin-bottom: 1.5rem; } .about-text-content p { margin-bottom: 1.25rem; font-size: 1rem; color: var(--neutral-body); } .about-image-wrapper img { border-radius: 20px; box-shadow: var(--shadow-md); } .numbers-section { padding: 4rem 0; background: linear-gradient(135deg, var(--neutral-dark) 0%, #1e1930 100%); color: var(--white); } .numbers-section h2 { color: var(--white); } .numbers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; text-align: center; } .number-card { padding: 1.5rem; } .number-value { font-size: 4rem; font-weight: 700; color: var(--primary-light); margin-bottom: 0.5rem; line-height: 1; } .number-label { font-size: 1rem; color: #BBB7C3; font-weight: 500; } .services-section { padding: 6rem 0; background-color: var(--white); } .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } .service-card { padding: 3rem; background-color: var(--neutral-light); border: 1px solid var(--border); border-radius: 16px; transition: var(--transition); } .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary); } .service-card h3 { margin-bottom: 1.25rem; color: var(--neutral-dark); } .service-card p { font-size: 1rem; color: var(--neutral-body); margin-bottom: 0; line-height: 1.65; } .testimonials-section { padding: 6rem 0; background-color: var(--neutral-light); border-top: 1px solid var(--border); } .testimonial-container { max-width: 900px; margin: 0 auto; background-color: var(--white); padding: 4rem; border-radius: 24px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 3rem; } .testimonial-image-box { flex-shrink: 0; } .testimonial-avatar { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 4px solid var(--primary-light); } .testimonial-content-box h3 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); margin-bottom: 1rem; } .testimonial-quote { font-size: 1.25rem; font-weight: 400; line-height: 1.6; color: var(--neutral-dark); margin-bottom: 1.5rem; position: relative; font-style: italic; } .testimonial-author { font-size: 0.9375rem; font-weight: 600; color: var(--neutral-body); font-style: normal; } .faq-section { padding: 6rem 0; background-color: var(--white); border-bottom: 1px solid var(--border); } .faq-list { max-width: 800px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--border); padding: 1.5rem 0; } .faq-item:first-of-type { border-top: 1px solid var(--border); } .faq-trigger { display: flex; width: 100%; justify-content: space-between; align-items: center; background: none; border: none; cursor: pointer; text-align: left; padding: 0.5rem 0; } .faq-trigger h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0; color: var(--neutral-dark); transition: var(--transition); } .faq-trigger:hover h3 { color: var(--primary); } .faq-icon { font-size: 1.5rem; color: var(--primary); font-weight: 400; transition: var(--transition); } .faq-panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } .faq-panel p { padding: 1rem 0 0.5rem 0; font-size: 0.9375rem; color: var(--neutral-body); margin-bottom: 0; } .faq-item.active .faq-panel { max-height: 200px; } .faq-item.active .faq-icon { transform: rotate(45deg); } .contacts-section { padding: 6rem 0; background-color: var(--neutral-light); } .contacts-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 5rem; } .contact-info-block h2 { margin-bottom: 1.5rem; } .contact-info-block p { font-size: 1.125rem; margin-bottom: 2.5rem; } .nap-info { margin-bottom: 2.5rem; } .nap-item { font-size: 1rem !important; margin-bottom: 1rem !important; } .nap-item strong { color: var(--neutral-dark); } .map-wrapper { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .contact-form-block { background-color: var(--white); padding: 3rem; border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-md); } .contact-form h3 { margin-bottom: 2rem; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--neutral-dark); margin-bottom: 0.5rem; } .form-group input, .form-group textarea { width: 100%; padding: 0.875rem 1rem; border-radius: 8px; border: 1px solid var(--border); background-color: var(--neutral-light); font-family: var(--font-main); font-size: 0.9375rem; color: var(--neutral-dark); transition: var(--transition); } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); background-color: var(--white); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1); } .form-consent { margin-bottom: 2rem; } .consent-checkbox-label { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.8125rem; color: var(--neutral-body); cursor: pointer; } .consent-checkbox-label input { margin-top: 0.15rem; } .consent-checkbox-label a { text-decoration: underline; } .submit-btn { width: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--primary); color: var(--white); font-weight: 700; padding: 1.125rem 2rem; border-radius: 8px; border: none; cursor: pointer; transition: var(--transition); text-transform: uppercase; font-size: 0.875rem; letter-spacing: 0.05em; } .submit-btn:hover { background-color: var(--primary-hover); } .site-footer { background-color: var(--white); border-top: 1px solid var(--border); padding: 4rem 0; color: var(--neutral-body); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4rem; border-bottom: 1px solid var(--border); padding-bottom: 3rem; margin-bottom: 2rem; } .footer-logo { display: inline-flex; align-items: center; gap: 0.75rem; font-weight: 700; font-size: 1.25rem; color: var(--neutral-dark); margin-bottom: 1.5rem; } .business-hours { font-size: 0.875rem; line-height: 1.6; } .business-hours strong { color: var(--neutral-dark); } .footer-links-section h4 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.5rem; color: var(--neutral-dark); } .footer-links-list { list-style: none; } .footer-links-list li { margin-bottom: 0.75rem; } .footer-links-list a { font-size: 0.875rem; color: var(--neutral-body); } .footer-links-list a:hover { color: var(--primary); } .cookie-settings-trigger { background: none; border: none; font-family: var(--font-main); font-size: 0.875rem; color: var(--neutral-body); cursor: pointer; transition: var(--transition); padding: 0; text-align: left; text-decoration: underline; } .cookie-settings-trigger:hover { color: var(--primary); } .footer-copyright-section { font-size: 0.8125rem; color: #8F8B99; } .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background-color: var(--white); border-top: 2px solid var(--primary); z-index: 1000; box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12); padding: 2rem 0; display: none; } .cookie-banner.active { display: block; } .cookie-banner-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .cookie-intro h3 { font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--neutral-dark); } .cookie-intro p { font-size: 0.875rem; margin-bottom: 1.5rem; line-height: 1.5; } .cookie-options-drawer { display: none; margin-bottom: 1.5rem; background-color: var(--neutral-light); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border); grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .cookie-options-drawer.active { display: grid; } .cookie-checkbox-input { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--neutral-dark); cursor: pointer; } .cookie-banner-actions { display: flex; gap: 1rem; flex-wrap: wrap; } .cookie-btn { background-color: var(--neutral-light); border: 1px solid var(--border); color: var(--neutral-dark); padding: 0.75rem 1.75rem; border-radius: 6px; font-weight: 600; font-size: 0.8125rem; cursor: pointer; transition: var(--transition); text-transform: uppercase; letter-spacing: 0.05em; } .cookie-btn:hover { background-color: var(--white); border-color: var(--primary); } .cookies-primary-btn { background-color: var(--primary); color: var(--white); border-color: var(--primary); } .cookies-primary-btn:hover { background-color: var(--primary-hover); border-color: var(--primary-hover); } .legal-page-main { padding: 5rem 0; background-color: var(--white); min-height: 70vh; } .legal-container { max-width: 850px; } .legal-container h1 { font-size: 2.75rem; margin-bottom: 0.5rem; } .last-updated { font-size: 0.875rem; color: #8F8B99; margin-bottom: 3rem; } .legal-section { margin-bottom: 3rem; } .legal-section h2 { font-size: 1.5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; } .legal-section p { font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.25rem; } .table-responsive { width: 100%; overflow-x: auto; margin-bottom: 1.5rem; border: 1px solid var(--border); border-radius: 8px; } .legal-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.875rem; } .legal-table th, .legal-table td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); } .legal-table th { background-color: var(--neutral-light); font-weight: 600; color: var(--neutral-dark); } .legal-table tr:last-child td { border-bottom: none; } .thank-you-main { padding: 8rem 0; background: linear-gradient(135deg, #FAF9FC 0%, #F5F1FD 100%); display: flex; align-items: center; justify-content: center; min-height: 70vh; } .thank-you-container { display: flex; justify-content: center; } .thank-you-card { background-color: var(--white); padding: 4rem; border-radius: 20px; box-shadow: var(--shadow-md); border: 1px solid var(--border); text-align: center; max-width: 600px; } .success-icon { width: 72px; height: 72px; border-radius: 50%; background-color: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 2.25rem; font-weight: 700; margin: 0 auto 2rem auto; } .thank-you-card h1 { font-size: 2.25rem; margin-bottom: 1rem; } .thank-you-card p { font-size: 1.0625rem; color: var(--neutral-body); margin-bottom: 2.5rem; line-height: 1.6; } @media (max-width: 1024px) { h1 { font-size: 2.75rem; } .hero-container-grid { gap: 2.5rem; } .about-container-grid { gap: 3rem; } .contacts-grid { gap: 3.5rem; } } @media (max-width: 768px) { .desktop-nav, .header-contacts-right { display: none; } .burger-btn { display: block; margin-left: auto; } .hero-container-grid { grid-template-columns: 1fr; text-align: center; gap: 3rem; } .hero-cta-wrapper { display: flex; justify-content: center; } .hero-image-wrapper { order: -1; max-width: 500px; margin: 0 auto; } .benefits-grid { grid-template-columns: 1fr; gap: 1.5rem; } .about-container-grid { grid-template-columns: 1fr; gap: 3rem; text-align: center; } .about-image-wrapper { max-width: 500px; margin: 0 auto; } .numbers-grid { grid-template-columns: 1fr; gap: 2rem; } .services-grid { grid-template-columns: 1fr; gap: 1.5rem; } .testimonial-container { flex-direction: column; text-align: center; padding: 2.5rem; gap: 2rem; } .contacts-grid { grid-template-columns: 1fr; gap: 3rem; } .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; } .cookie-options-drawer { grid-template-columns: 1fr; } }