@font-face { font-family: 'RedHat'; src: url('fonts/Red_Hat_Display/woff/RedHatDisplay-VariableFont_wght.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; } * { box-sizing: border-box; margin: 0; padding: 0; } :focus { outline: none; } :focus-visible { outline: 2px solid #1d4ed8; outline-offset: 3px; border-radius: 4px; } a { cursor: pointer; transition: color 0.15s ease, text-decoration-color 0.15s ease; } html, body { width: 100%; max-width: 100%; overflow-x: hidden; } html { font-family: 'RedHat'; font-size: 19px; background-color: #fff; color: #111; -webkit-font-smoothing: antialiased; } body { min-height: 100vh; display: flex; flex-direction: column; background-color: #fff; width: 100%; } body>div:first-child { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 10px 56px; background-color: #f8fafc; border-bottom: 1px solid #e2e8f0; font-size: 14px; gap: 12px; width: 100%; position: relative; } body>div:first-child p { text-align: left; color: #334155; margin: 0; padding-left: 0; } body>div:first-child nav { margin-left: auto; margin-right: 0; display: flex; align-items: center; gap: 8px; } html[dir="rtl"] body>div:first-child p { text-align: right; } html[dir="rtl"] body>div:first-child nav { margin-right: auto; margin-left: 0; } html[dir="rtl"] body>div:first-child button { left: 20px; right: auto; } body>div:first-child nav u { color: #1d4ed8; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } body>div:first-child nav a { color: #1d4ed8; text-decoration: none; cursor: pointer; } body>div:first-child button { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: transparent; border: none; font-size: 20px; font-weight: 400; color: #64748b; cursor: pointer; padding: 4px; border-radius: 4px; transition: background-color 0.2s ease, color 0.2s ease; line-height: 1; } header { position: sticky; top: 0; z-index: 1000; background-color: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid #e2e8f0; display: flex; flex-wrap: wrap; align-items: center; padding: 16px 56px; gap: 16px; width: 100%; transition: box-shadow 0.25s ease, background-color 0.25s ease; } header.scrolled { box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.08); background-color: rgba(255, 255, 255, 0.98); } header>a { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; cursor: pointer; } header img { width: 55px; height: auto; object-fit: contain; margin-left: 0; } header h1 { font-size: 22px; font-weight: 700; color: #0f172a; margin: 0; } header button { display: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #cbd5e1; background-color: #fff; color: #0f172a; font-size: 20px; font-weight: 300; align-items: center; justify-content: center; cursor: pointer; margin-left: auto; margin-right: 0; line-height: 1; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease; } header button.open { transform: rotate(45deg); } header menu { margin-left: auto; margin-right: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; } html[dir="rtl"] header menu { margin-left: 0; margin-right: auto; } header menu a { text-decoration: underline; text-underline-offset: 5px; color: #333; font-weight: 500; transition: color 0.2s ease; } header>a[href*="wa.me"], header>a:last-of-type { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; background-color: #dc2626; color: #ffffff; font-size: 14px; font-weight: 600; border-radius: 6px; line-height: 1.2; white-space: nowrap; margin-left: 8px; transition: background-color 0.2s ease; } header>a[href*="wa.me"]:hover, header>a:last-of-type:hover { background-color: #b91c1c; color: #ffffff; } main { flex: 1; width: 100%; padding: 40px 56px; background-color: #FAF8F5; box-sizing: border-box; } main.page-not-found { max-width: 800px; margin: 60px auto; background-color: transparent; text-align: center; } main.page-not-found > p { font-size: 1.1rem; line-height: 1.6; margin: 20px 0; } main.page-not-found > nav { margin-top: 30px; justify-content: center; } main:has(> section) { padding: 0; } main>nav { margin-bottom: 24px; font-size: 14px; font-weight: 500; color: #64748b; display: flex; align-items: center; gap: 8px; } main>nav a { color: #1d4ed8; text-decoration: underline; text-underline-offset: 3px; transition: color 0.15s ease, text-decoration-color 0.15s ease; } main>nav a:hover { color: #1e40af; } main h2 { font-size: 32px; font-weight: 700; color: #1c1917; margin-bottom: 16px; line-height: 1.3; letter-spacing: -0.3px; } main h3 { font-size: 24px; font-weight: 600; color: #1c1917; margin-top: 28px; margin-bottom: 12px; letter-spacing: -0.2px; } main article { background-color: #fff; padding: 32px; border-radius: 8px; border: 1px solid #e7e5e4; margin-bottom: 32px; box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.03); } main article>p { font-size: 19px; line-height: 1.6; color: #334155; margin-bottom: 16px; } main article>p:last-child { margin-bottom: 0; } main article figure { margin: 28px 0; text-align: center; } main article figure img { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid #e7e5e4; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); } main article figcaption { margin-top: 10px; font-size: 15px; color: #64748b; font-style: italic; text-align: center; } main article ul { margin: 16px 0 24px 28px; color: #334155; font-size: 17px; line-height: 1.6; } main article ul li { margin-bottom: 8px; } main article button, main article p button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #cbd5e1; background-color: #fff; color: #1e293b; font-size: 16px; font-weight: 300; cursor: pointer; margin-left: 8px; vertical-align: middle; line-height: 1; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, border-color 0.2s ease; } main article button.open, main article p button.open { transform: rotate(45deg); } main article>div { display: none; flex-direction: column; gap: 16px; margin-top: 24px; padding-top: 24px; border-top: 1px solid #e7e5e4; } main article>div.open { display: flex; animation: articleFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes articleFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } main article>div p { font-size: 18px; line-height: 1.6; color: #44403c; margin-bottom: 16px; } main article>div p:last-child { margin-bottom: 0; } main article>div a { color: #1d4ed8; text-decoration: underline; text-underline-offset: 4px; } main article section { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 32px; padding-top: 24px; border-top: 1px solid #e7e5e4; } main article section>p { color: #334155; font-size: 16px; line-height: 1.5; margin: 0; } [hidden] { display: none !important; } .contacts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; width: 100%; } .contacts a { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; font-size: 14px; font-weight: 600; border-radius: 6px; text-decoration: none; line-height: 1.3; white-space: nowrap; border: 1px solid #cbd5e1; background-color: #ffffff; color: #334155; } .contacts a[href*="wa.me"] { background-color: #dc2626; color: #ffffff; border-color: #dc2626; } .contacts a[href*="t.me"] { background-color: #dc2626; color: #ffffff; border-color: #dc2626; } main details p { padding: 8px 0 20px 0; font-size: 16px; line-height: 1.6; color: #44403c; margin: 0; } main>p { font-size: 18px; line-height: 1.6; color: #334155; margin-bottom: 24px; } main>p a { color: #1d4ed8; text-decoration: underline; text-underline-offset: 4px; } main>section { min-height: 280px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; padding: 96px 56px; background-color: #FAF8F5; box-sizing: border-box; position: relative; z-index: 2; box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.035); overflow: hidden; } main>section strong, main>section>div { position: relative; z-index: 1; } main>section strong { font-size: 26px; font-weight: 400; line-height: 1.6; color: #1c1917; max-width: 860px; margin: 0 auto; letter-spacing: -0.2px; } main>section button, main>section strong button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #cbd5e1; background-color: #fff; color: #1e293b; font-size: 18px; font-weight: 300; cursor: pointer; margin-left: 8px; vertical-align: middle; line-height: 1; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, border-color 0.2s ease; } main>section button.open, main>section strong button.open { transform: rotate(45deg); } main>section>div { display: none; flex-direction: column; align-items: center; gap: 24px; max-width: 800px; margin-top: 40px; padding-top: 32px; border-top: 1px solid #e7e5e4; font-size: 18px; line-height: 1.6; color: #44403c; text-align: center; } main>section>div.open { display: flex; animation: heroFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes heroFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } main>section>div a { display: inline-flex; align-items: center; justify-content: center; margin-top: 12px; padding: 8px 20px; background-color: #fff7ed; color: #333333; border: 1px solid #fed7aa; text-decoration: none; border-radius: 6px; font-size: 14px; font-weight: 600; line-height: 1.2; transition: background-color 0.2s ease, border-color 0.2s ease; } details { background-color: #fff; border-top: 1px solid #E7E5E4; width: 100%; box-sizing: border-box; } details:last-of-type { border-bottom: 1px solid #E7E5E4; } summary { display: flex; justify-content: space-between; align-items: center; padding: 20px 56px; cursor: pointer; list-style: none; user-select: none; -webkit-user-select: none; font-size: 26px; font-weight: 500; color: #1c1917; } summary::-webkit-details-marker, summary::marker { display: none; } summary::after { content: '+'; font-size: 26px; font-weight: 300; color: #57534e; line-height: 1; display: inline-block; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; margin-left: 16px; } details[open]>summary::after { transform: rotate(45deg); } details details { border-top: 1px solid #E7E5E4; border-bottom: none; background-color: #fff; } details details summary { font-size: 22px; font-weight: 500; padding: 14px 56px; color: #44403c; } details details summary::after { font-size: 22px; } details details[open]>summary { padding-bottom: 6px; } details>summary+* { animation: accordionFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes accordionFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } details ul, details details ul { list-style: none; padding: 6px 56px 16px 56px; margin: 0; display: flex; flex-direction: column; gap: 10px; } main>section:not(:has(> strong)) { background-color: #ffffff; border: 1px solid #e7e5e4; border-radius: 8px; padding: 32px; margin-bottom: 32px; width: 100%; } main>section:not(:has(> strong)) h2 { font-size: 28px; font-weight: 700; color: #1c1917; margin-bottom: 16px; letter-spacing: -0.3px; border-bottom: 1px solid #f5f5f4; padding-bottom: 10px; } main>section:not(:has(> strong)) ul { list-style: none; padding: 0; margin: 16px 0 0 0; display: flex; flex-direction: column; gap: 12px; } main>section:not(:has(> strong)) ul li a, details ul li a { color: #1d4ed8; text-decoration: underline; text-underline-offset: 4px; font-size: 19px; line-height: 1.5; } footer { background-color: #000; color: #fff; padding: 40px 56px; margin-top: auto; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 32px; } footer a { color: #38bdf8; text-decoration: none; } footer a[href^="mailto"] { color: #fff; text-decoration: none; } footer address { font-style: normal; color: #94a3b8; font-size: 14px; line-height: 1.6; word-break: break-word; } footer address a { color: #e2e8f0; } footer address button { display: inline-flex; align-items: center; justify-content: center; padding: 3px 10px; margin-left: 6px; color: #fff; font-size: 12px; border-radius: 4px; border: none; cursor: pointer; vertical-align: middle; line-height: 1.4; transition: opacity 0.2s ease; } footer address button:nth-of-type(1), footer address button:nth-of-type(2) { background-color: #dc2626; } footer>div:first-child { display: flex; flex-direction: column; gap: 20px; width: 100%; } footer>div:last-child { width: 100%; } footer h4 { font-size: 14px; color: #94a3b8; margin-bottom: 6px; font-weight: 600; text-transform: none; letter-spacing: 0.5px; } footer h4 button { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #475569; background-color: transparent; color: #f8fafc; font-size: 15px; font-weight: 300; cursor: pointer; margin-left: 8px; vertical-align: middle; line-height: 1; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, border-color 0.2s ease; } footer h4 button.open { transform: rotate(45deg); } footer div ul { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 0; width: 100%; } footer div ul li { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 89px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease; pointer-events: none; } footer div ul li.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } footer div ul li .galaxy-icon, footer div ul li img { width: 89px; height: 89px; display: block; border-radius: 6px; background-image: url('s/footer/galaxy-sprite.webp'); background-image: -webkit-image-set(url('s/footer/galaxy-sprite.webp') 1x, url('s/footer/galaxy-sprite-2x.webp') 2x); background-image: image-set(url('s/footer/galaxy-sprite.webp') 1x, url('s/footer/galaxy-sprite-2x.webp') 2x); background-size: 712px 89px; background-repeat: no-repeat; background-color: #000; cursor: default; } footer div ul li .galaxy-icon.earth, footer div ul li img[src*="Earth"] { background-position: 0 0; cursor: pointer; } footer div ul li .galaxy-icon.solar-system, footer div ul li img[src*="Solar"] { background-position: -89px 0; } footer div ul li .galaxy-icon.milky-way, footer div ul li img[src*="Milky"] { background-position: -178px 0; } footer div ul li .galaxy-icon.local-group, footer div ul li img[src*="Local"] { background-position: -267px 0; } footer div ul li .galaxy-icon.virgo-supercluster, footer div ul li img[src*="Virgo"] { background-position: -356px 0; } footer div ul li .galaxy-icon.laniakea-supercluster, footer div ul li img[src*="Laniakea"] { background-position: -445px 0; } footer div ul li .galaxy-icon.cosmic-web, footer div ul li img[src*="Cosmic"] { background-position: -534px 0; } footer div ul li .galaxy-icon.observable-universe, footer div ul li img[src*="Observable"] { background-position: -623px 0; } footer div ul li span { font-size: 11px; color: #94a3b8; text-align: center; line-height: 1.2; word-break: break-word; width: 100%; } #image-modal { position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: #030307; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; } #image-modal.open { opacity: 1; visibility: visible; pointer-events: auto; } #image-modal img { max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: 0; box-shadow: none; transform: scale(0.95); transition: transform 0.3s ease; } #image-modal.open img { transform: scale(1); } #image-modal div { display: none; margin-top: 14px; color: #fff; font-size: 16px; text-align: center; font-weight: 500; } #image-modal span { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 36px; font-weight: bold; cursor: pointer; } article h4 { font-size: 18px; font-weight: 700; color: #1c1917; margin-top: 28px; margin-bottom: 12px; } .slide { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; overflow-x: auto; padding: 8px 0 16px 0; margin: 8px 0 24px 0; width: 100%; scrollbar-width: thin; scrollbar-color: #dc2626 #fef2f2; margin-top: 34px; padding-top: 34px; } .slide::-webkit-scrollbar { height: 6px; } .slide::-webkit-scrollbar-track { background: #fef2f2; border-radius: 3px; } .slide::-webkit-scrollbar-thumb { background: #dc2626; border-radius: 3px; } .slide::-webkit-scrollbar-thumb:hover { background: #b91c1c; } .slide img { flex: 0 0 auto; width: auto; height: 150px; object-fit: contain; background-color: #fafafa; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; padding: 4px; box-sizing: border-box; } article::after { content: ""; display: table; clear: both; } .spiral-container { display: block; position: relative; float: none; margin: 16px 0 28px 0; padding-left: 35px; background-color: #fff; border-radius: 5px 15px 15px 5px; box-shadow: 6px 10px 20px rgba(0, 0, 0, 0.12); max-width: 240px; box-sizing: border-box; } .spiral-container::before { content: ""; position: absolute; top: 16px; bottom: 16px; left: 10px; width: 14px; background: radial-gradient(circle, #efefe3 6px, transparent 6.5px); background-size: 14px 28px; } .spiral-container::after { content: ""; position: absolute; top: 16px; bottom: 16px; left: -12px; width: 31px; background: linear-gradient(to bottom, transparent 11px, #333 11px, #333 17px, transparent 17px); background-size: 100% 28px; -webkit-mask-image: radial-gradient(circle at 3px 14px, black 3px, transparent 3.5px), radial-gradient(circle at 28px 14px, black 3px, transparent 3.5px), linear-gradient(to right, transparent 3px, black 3px, black 28px, transparent 28px); -webkit-mask-size: 31px 28px; -webkit-mask-repeat: repeat-y; mask-image: radial-gradient(circle at 3px 14px, black 3px, transparent 3.5px), radial-gradient(circle at 28px 14px, black 3px, transparent 3.5px), linear-gradient(to right, transparent 3px, black 3px, black 28px, transparent 28px); mask-size: 31px 28px; mask-repeat: repeat-y; } .spiral-container img { display: block; width: 100%; height: auto; max-width: 210px; border-radius: 0 12px 12px 0; } .spiral-container h2 { display: flex; align-items: center; justify-content: center; width: 200px; height: 280px; background-color: #ea9736; color: #ffffff; margin: 0; border-radius: 0 12px 12px 0; box-sizing: border-box; font-size: 22px; font-weight: 700; text-align: center; padding: 20px; line-height: 1.3; } @media (max-width: 768px) { body>div:first-child { flex-direction: column; align-items: flex-start; padding: 10px 48px 10px 16px; } body>div:first-child p { padding-left: 0; text-align: left; } body>div:first-child nav { margin-left: 0; margin-right: 0; margin-top: 4px; } body>div:first-child button { right: 16px; top: 12px; transform: none; } header { padding: 12px 16px; } header>a:first-child { flex: 1; min-width: 0; gap: 10px; order: 1; } header>a[href*="wa.me"], header>a:last-of-type { flex: initial; margin-left: auto; padding: 6px 12px; font-size: 12px; order: 2; } header img { width: 42px; flex-shrink: 0; } header h1 { font-size: 18px; line-height: 1.2; } header button { display: inline-flex; margin-left: 8px; margin-right: 0; flex-shrink: 0; order: 3; } header menu { display: none; width: 100%; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin-left: 0; margin-right: 0; padding-top: 16px; padding-left: 0; border-top: 1px solid #e2e8f0; margin-top: 12px; order: 4; } header menu.open { display: flex; } main { padding: 24px 16px; } main:has(> section) { padding: 0; } main>section { padding: 48px 20px; min-height: auto; } main>section strong { font-size: 20px; } main article { padding: 20px 16px; } .contacts { flex-direction: column; align-items: stretch; width: 100%; } .cta { flex-direction: column; align-items: flex-start; gap: 16px; padding-left: 18px; } .contacts a, .cta a { width: 100%; } summary { padding: 16px 20px; font-size: 20px; } summary::after { font-size: 20px; } details details summary { padding: 14px 20px; font-size: 17px; } details ul, details details ul { padding: 10px 20px 20px 20px; } details ul li a { font-size: 16px; } footer { flex-direction: column; padding: 24px 16px; gap: 20px; width: 100%; } footer div ul { justify-content: flex-start; gap: 8px; } footer div ul li img { width: 89px; height: 89px; } } .sec-hdr { display: flex; justify-content: space-between; align-items: center; margin-top: 56px; margin-bottom: 24px; } .sec-hdr h3 { margin: 0; } .sec-hdr a { font-size: 14px; font-weight: 600; color: #1d4ed8; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 64px; } .grid>a { background-color: #ffffff; border: 1px solid #e7e5e4; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; } .grid>a>header { padding: 20px 20px; min-height: 115px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; } .grid>a>header>span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; padding: 3px 8px; border-radius: 4px; line-height: 1; } .articles>a>header { background-color: #fff7ed; border-bottom: 1px solid #fed7aa; } .articles>a>header>span { background-color: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; } .videos>a>header { background-color: #fef2f2; border-bottom: 1px solid #fca5a5; } .videos>a>header>span { background-color: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; } .grid h4 { font-size: 17px; font-weight: 700; color: #333333; margin: 0; line-height: 1.4; letter-spacing: -0.2px; } .grid>a>div { padding: 18px 20px; display: flex; flex-direction: column; flex: 1; background-color: #ffffff; } .grid p { font-size: 14px; color: #57534e; line-height: 1.5; margin-bottom: 16px; flex: 1; } .grid footer { font-size: 13px; color: #78716c; font-weight: 500; display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: auto; background-color: transparent; padding: 0; width: 100%; gap: 12px; } .grid footer span:last-child { display: inline-flex; align-items: center; justify-content: center; padding: 6px 16px; font-size: 13px; font-weight: 600; border-radius: 6px; border: 1px solid transparent; cursor: pointer; line-height: 1.2; margin-left: auto; } .articles footer span:last-child { background-color: #fff7ed; color: #333333; border-color: #fed7aa; } .videos footer span:last-child { background-color: #fef2f2; color: #333333; border-color: #fca5a5; } .cta { border-top: none; border-left: 4px solid #dc2626; padding: 6px 0 6px 24px; margin-top: 56px; margin-bottom: 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .cta>div { flex: 1; } .cta h3 { font-size: 22px; font-weight: 700; color: #1c1917; margin-top: 0; margin-bottom: 6px; letter-spacing: -0.2px; } .cta p { font-size: 16px; line-height: 1.5; color: #475569; margin: 0; } .cta a { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; background-color: #dc2626; color: #ffffff; font-size: 14px; font-weight: 600; border-radius: 6px; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background-color 0.2s ease; } .cta a:hover { background-color: #b91c1c; } @media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid { grid-template-columns: 1fr; } .sec-hdr { flex-direction: row; align-items: center; } } .faq { background-color: #fff; padding: 32px; border-radius: 8px; border: 1px solid #e7e5e4; margin-bottom: 32px; box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.03); } .faq h3 { margin-top: 0; margin-bottom: 20px; font-size: 24px; font-weight: 600; color: #1c1917; } .faq>button, .faq h3 button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #cbd5e1; background-color: #fff; color: #1e293b; font-size: 17px; font-weight: 300; cursor: pointer; margin-top: 16px; line-height: 1; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease, border-color 0.2s ease; } .faq>button.open, .faq h3 button.open { transform: rotate(45deg); } .faq details { border-top: 1px solid #e7e5e4; border-bottom: none; background-color: transparent; } .faq details:last-child { border-bottom: 1px solid #e7e5e4; } .faq summary { font-size: 18px; font-weight: 600; padding: 16px 0; color: #1c1917; user-select: none; -webkit-user-select: none; } .faq summary::after { content: '+'; font-size: 20px; font-weight: 300; color: #57534e; line-height: 1; display: inline-block; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .faq details[open]>summary::after { transform: rotate(45deg); } .faq details p { padding: 8px 0 20px 0; font-size: 16px; line-height: 1.6; color: #44403c; margin: 0; } .how-we-work { background-color: #fff; padding: 36px 32px; border-radius: 8px; border: 1px solid #e7e5e4; margin-top: 48px; margin-bottom: 0; box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.03); } .how-we-work h3 { margin-top: 0; margin-bottom: 32px; font-size: 24px; font-weight: 600; color: #1c1917; } .how-we-work ol { list-style: none; margin: 0; padding: 0; position: relative; padding-left: 20px; display: flex; flex-direction: column; gap: 28px; } .how-we-work ol li:not(:last-child)::before { content: ''; position: absolute; left: -13px; top: 12px; height: calc(100% + 28px); width: 2px; background-color: #334155; z-index: 0; } .how-we-work ol li { position: relative; display: flex; align-items: flex-start; } .how-we-work ol li span { position: absolute; left: -17px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background-color: #334155; border: none; box-sizing: border-box; z-index: 1; } .how-we-work ol li div { padding-left: 12px; } .how-we-work ol li h4 { font-size: 17px; font-weight: 600; color: #1c1917; margin: 0 0 6px 0; line-height: 1.3; } .how-we-work ol li p { font-size: 15px; line-height: 1.55; color: #57534e; margin: 0; } @media (max-width: 768px) { .how-we-work { padding: 24px 20px; } } .banner { background-color: #ffffff; border: 1px solid #e7e5e4; border-bottom: none; border-radius: 12px 12px 0 0; padding: 32px 40px 24px 40px; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 32px; box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.04); } .banner h3 { font-size: 24px; font-weight: 700; color: #1c1917; margin: 0 0 16px 0; letter-spacing: -0.2px; } .banner ul { list-style: none; padding: 0; margin: 0 0 12px 0; display: flex; flex-wrap: wrap; gap: 20px; } .banner ul li { font-size: 16px; font-weight: 600; color: #1c1917; display: flex; align-items: center; gap: 8px; } .banner p { font-size: 16px; line-height: 1.5; color: #57534e; margin: 0; } .banner>a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; background-color: #dc2626; color: #ffffff; font-size: 15px; font-weight: 600; border-radius: 8px; text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease; flex-shrink: 0; } .stats { background-color: #faf7f2; border: 1px solid #e7e5e4; border-radius: 0 0 12px 12px; padding: 28px 40px; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 32px; box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.04); } .stats>div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 8px 16px; position: relative; } .stats>div:not(:last-child)::after { content: ''; position: absolute; right: -16px; top: 10%; height: 80%; width: 1px; background-color: #e4ddd1; } .stats>div>span { font-size: 22px; color: #dc2626; width: 48px; height: 48px; border-radius: 12px; background-color: #fef2f2; border: 1px solid #fecaca; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; font-family: inherit; filter: grayscale(100%); transition: filter 0.2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); } .stats>div:last-child>span { font-size: 14px; font-family: monospace; letter-spacing: -0.5px; } .stats>div>strong { font-size: 26px; font-weight: 700; color: #1c1917; line-height: 1.1; } .stats>div>p { font-size: 15px; font-weight: 600; color: #475569; line-height: 1.35; margin: 0; } @media (max-width: 768px) { .banner { flex-direction: column; align-items: flex-start; padding: 24px 20px 20px 20px; gap: 20px; } .banner ul { flex-direction: column; gap: 10px; } .banner>a { width: 100%; } .stats { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; } .stats>div:not(:last-child)::after { display: none; } } .is-hidden { display: none !important; } div.search { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; background: transparent; border: none; padding: 0; } div.search>div { flex: 1; min-width: 280px; } div.search>div h2 { font-size: 32px; font-weight: 700; color: #1c1917; margin-bottom: 12px; line-height: 1.3; letter-spacing: -0.3px; } div.search>div p { font-size: 18px; line-height: 1.6; color: #334155; margin-bottom: 0; } div.search form { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 320px; margin: 0; } div.search label { position: relative; display: flex; align-items: center; width: 100%; max-width: 420px; margin: 0; } div.search svg { position: absolute; left: 14px; color: #94a3b8; pointer-events: none; transition: color 0.2s ease; } div.search input { width: 100%; padding: 10px 38px 10px 42px; font-family: inherit; font-size: 15px; color: #1e293b; background-color: #ffffff; border: 1.5px solid #cbd5e1; border-radius: 8px; outline: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02); transition: border-color 0.2s ease, box-shadow 0.2s ease; } div.search input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); } div.search input:focus~svg, div.search input:not(:placeholder-shown)~svg { color: #2563eb; } div.search button { position: absolute; right: 10px; background: transparent; border: none; font-size: 20px; color: #94a3b8; cursor: pointer; padding: 2px 6px; border-radius: 4px; line-height: 1; transition: color 0.2s ease, background-color 0.2s ease; } div.search button:hover { color: #0f172a; background-color: #f1f5f9; } div.search output { font-size: 13px; color: #64748b; font-weight: 500; } #no-search-results { padding: 48px 24px; text-align: center; background: #ffffff; border: 1px dashed #cbd5e1; border-radius: 12px; margin-bottom: 32px; } #no-search-results h3 { font-size: 20px; color: #1e293b; margin-top: 0; margin-bottom: 8px; } #no-search-results p { font-size: 15px; color: #64748b; margin-bottom: 16px; } #no-search-results button { padding: 8px 16px; background-color: #dc2626; color: #ffffff; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease; } #no-search-results button:hover { background-color: #b91c1c; } @media (max-width: 768px) { div.search { flex-direction: column; align-items: stretch; gap: 16px; } div.search form { align-items: stretch; min-width: 100%; } div.search label { max-width: 100%; } } p.price { font-size: 20px; font-weight: 700; color: #dc2626; margin-top: -4px; margin-bottom: 24px; }