/*! Generated by tools/build_performance_css.py.
MIT License

Copyright (c) 2020-2021 Phosphor Icons

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

*/
@font-face { font-family: "Phosphor-Fill"; src: url("../fonts/Phosphor-Fill-looply.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: block; } .ph-fill {  font-family: "Phosphor-Fill" !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1;  letter-spacing: 0; -webkit-font-feature-settings: "liga"; -moz-font-feature-settings: "liga=1"; -moz-font-feature-settings: "liga"; -ms-font-feature-settings: "liga" 1; font-feature-settings: "liga"; -webkit-font-variant-ligatures: discretionary-ligatures; font-variant-ligatures: discretionary-ligatures;  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ph-fill.ph-arrow-counter-clockwise:before { content: "\e038"; } .ph-fill.ph-bell-ringing:before { content: "\e5e8"; } .ph-fill.ph-calendar-dots:before { content: "\e7b4"; } .ph-fill.ph-caret-down:before { content: "\e136"; } .ph-fill.ph-chart-bar:before { content: "\e150"; } .ph-fill.ph-chart-pie-slice:before { content: "\e15a"; } .ph-fill.ph-chat-circle:before { content: "\e168"; } .ph-fill.ph-chat-circle-dots:before { content: "\e16c"; } .ph-fill.ph-check:before { content: "\e182"; } .ph-fill.ph-check-circle:before { content: "\e184"; } .ph-fill.ph-circle:before { content: "\e18a"; } .ph-fill.ph-clock:before { content: "\e19a"; } .ph-fill.ph-coins:before { content: "\e78e"; } .ph-fill.ph-currency-circle-dollar:before { content: "\e54c"; } .ph-fill.ph-device-mobile:before { content: "\e1e0"; } .ph-fill.ph-file-arrow-up:before { content: "\e61e"; } .ph-fill.ph-flower-lotus:before { content: "\e6cc"; } .ph-fill.ph-folder-open:before { content: "\e256"; } .ph-fill.ph-identification-card:before { content: "\e2c8"; } .ph-fill.ph-image:before { content: "\e2ca"; } .ph-fill.ph-list:before { content: "\e2f0"; } .ph-fill.ph-note-pencil:before { content: "\e34c"; } .ph-fill.ph-notepad:before { content: "\e63e"; } .ph-fill.ph-play-circle:before { content: "\e3d2"; } .ph-fill.ph-prohibit:before { content: "\e3de"; } .ph-fill.ph-rocket-launch:before { content: "\e3fe"; } .ph-fill.ph-scissors:before { content: "\eae0"; } .ph-fill.ph-sparkle:before { content: "\e6a2"; } .ph-fill.ph-star:before { content: "\e46a"; } .ph-fill.ph-user:before { content: "\e4c2"; } .ph-fill.ph-user-list:before { content: "\e73c"; } .ph-fill.ph-users-three:before { content: "\e68e"; } .ph-fill.ph-wallet:before { content: "\e68a"; } .ph-fill.ph-x:before { content: "\e4f6"; } :root { --looply-primary: #E0115F; --looply-primary-strong: #B50D4C; --looply-primary-soft: #FDE7EF; --looply-text: #1F1F1F; --looply-muted: #5C5C5C; --looply-background: #FFFFFF; --looply-background-soft: #F8F8F8; --looply-surface-alt: #FFF1F6; --looply-border: #EAEAEA; --looply-shell-width: 1120px; --looply-radius-sm: 8px; --looply-radius-md: 12px; --looply-radius-lg: 16px; --looply-button-height: 52px; --looply-button-height-mobile: 48px; --looply-button-padding-x: 24px; --looply-font: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { --looply-scroll-offset: 128px; scroll-behavior: smooth; scroll-padding-top: var(--looply-scroll-offset); overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; } body { overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; } img { max-width: 100%; display: block; } @font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }  @font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Light-latin.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Regular-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Medium-latin.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-SemiBold-latin.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Bold-latin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-024F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2122, U+2212, U+FEFF, U+FFFD; } body { font-family: var(--looply-font); font-weight: 300; color: #1f1f1f; background: #ffffff; } body, button, input, textarea, select { font-family: var(--looply-font); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, strong, b { font-weight: 600; } .btn, .header-nav a, .footer-links-column a, .faq-question { font-weight: 400; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .section-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px 6px 10px; border-radius: 999px; border: 1px solid rgba(224, 17, 95, 0.2); font-weight: 500; font-size: 13px; color: #E0115F; margin-bottom: 16px; background: transparent; } .section-badge-icon { width: 16px; height: 16px; display: block; flex-shrink: 0; } .section-badge-light { display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px 6px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); font-weight: 500; font-size: 13px; color: rgba(255, 255, 255, 0.8); margin-bottom: 16px; background: transparent; } .section-badge-light .section-badge-icon { width: 16px; height: 16px; display: block; flex-shrink: 0; }  .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 24px; padding: 14px 48px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(224, 17, 95, 0.06); } .header-logo { display: flex; align-items: center; gap: 6px; text-decoration: none; color: #E0115F; font-weight: 500; font-size: 18px; flex-shrink: 0; } .header-logo .material-symbols-outlined { font-size: 24px; color: #E0115F; } .header-right { display: contents; } .header-nav { display: flex; align-items: center; justify-content: center; gap: 32px; grid-column: 2; } .header-nav a { color: #1f1f1f; text-decoration: none; font-weight: 300; font-size: 14px; transition: color 0.2s; white-space: nowrap; } .header-nav a:hover { color: #E0115F; } .header-actions { display: flex; align-items: center; justify-self: end; } .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; color: #E0115F; flex-shrink: 0; } .menu-toggle-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 28px; line-height: 1; }  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--looply-button-height); min-height: var(--looply-button-height); padding: 0 var(--looply-button-padding-x); border-radius: 8px; font-family: var(--looply-font); font-weight: 400; font-size: 15px; text-decoration: none; border: none; cursor: pointer; position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 10px 28px rgba(31, 31, 31, 0.08); transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease; white-space: nowrap; } .btn::before { content: ''; position: absolute; inset: -120% auto -120% -40%; width: 38%; transform: translateX(-220%) skewX(-24deg); background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0)); opacity: 0.65; pointer-events: none; animation: looply-button-sheen 8.4s ease-in-out infinite; z-index: 1; } .btn:hover { transform: none; box-shadow: 0 10px 28px rgba(31, 31, 31, 0.08); } .btn .material-symbols-outlined { font-size: 18px; } .btn-primary { background: #E0115F; color: #ffffff; } .btn-primary:hover { background: #C91056; color: #ffffff; } .btn-outline-light { background: transparent; color: #ffffff; border: 1.5px solid rgba(255, 255, 255, 0.35); } .btn-outline-light:hover { background: #ffffff; border-color: #ffffff; color: #E0115F; } .btn-outline-dark { background: transparent; color: #E0115F; border: 1.5px solid #E0115F; } .btn-outline-dark:hover { background: #E0115F; color: #ffffff; border-color: #E0115F; } .btn-white { background: #ffffff; color: #E0115F; } .btn-white:hover { background: #fbfbfc; } .feature-card { list-style: none; background: rgba(255, 255, 255, 0.3); border-radius: 24px; aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; box-shadow: none; } .feature-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 999px; background: #ffffff; color: #E0115F; font-size: 30px; line-height: 1; } .feature-card-title { font-weight: 500; font-size: 1.02rem; line-height: 1.22; color: #ffffff; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; min-height: 2.44em; max-width: 14ch; } .tabs-list { display: grid; gap: 16px; width: 100%; min-width: 0; } .tab-item { display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: 20px; padding: 20px 0 20px 24px; background: transparent; border: none; border-radius: 0; text-align: left; cursor: pointer; font-family: var(--looply-font); opacity: 0.4; transition: opacity 0.3s ease; width: 100%; min-width: 0; } .tab-item.active { opacity: 1; } .tab-item .tab-line { width: 4px; height: 100%; border-radius: 0; background: transparent; transition: background 0.3s ease; } .tab-item.active .tab-line { background: #E0115F; } .tab-item .tab-content { display: grid; gap: 8px; min-width: 0; } .tab-item h3 { font-weight: 500; font-size: 1.05rem; color: #1f1f1f; line-height: 1.2; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; } .tab-title { display: block; min-width: 0; overflow-wrap: anywhere; } .tab-step { display: inline-flex; align-items: center; justify-content: center; width: 48px; min-width: 48px; height: 48px; padding: 0; border-radius: 50%; background: #E0115F; color: #ffffff; border: 1px solid rgba(224, 17, 95, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); font-weight: 600; font-size: 0.9rem; line-height: 1; flex-shrink: 0; } .tab-item p { font-weight: 300; font-size: 0.92rem; color: #5c5c5c; line-height: 1.6; max-width: 48ch; min-width: 0; } .tab-image { display: flex; align-items: flex-end; justify-content: flex-start; border-radius: 16px; background: #ffffff; color: #E0115F; overflow: hidden; aspect-ratio: 1 / 1; min-height: 0; min-width: 0; } .tab-image-track { display: flex; flex-wrap: nowrap; width: 100%; height: 100%; transform: translateX(calc(var(--active-tab, 0) * -100%)); transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .tab-image-slide { flex: 0 0 100%; min-width: 100%; max-width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } .tab-image-slide img { display: block; width: 94%; height: auto; max-width: 94%; margin: 0 auto; } .team-card { background: var(--looply-surface-alt); border-radius: 16px; overflow: hidden; text-align: left; display: flex; flex-direction: column; position: relative; } .team-card-image { width: 100%; aspect-ratio: 1 / 1; background: var(--looply-surface-alt); display: flex; align-items: center; justify-content: center; color: #E0115F; position: relative; overflow: hidden; } .team-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .team-card-image .material-symbols-outlined { font-size: 64px; } .team-card-body { padding: 20px 24px 24px; background: var(--looply-surface-alt); } .team-card-body h3 { font-weight: 500; font-size: 1.1rem; line-height: 1.2; margin-bottom: 4px; color: var(--looply-primary-strong); } .team-card-body p { font-weight: 300; font-size: 0.9rem; line-height: 1.5; color: var(--looply-primary-strong); } .plan-card { background: var(--looply-surface-alt); border-radius: 16px; padding: 32px 24px; text-align: left; display: flex; flex-direction: column; position: relative; } .plan-card.featured { background: #ffffff; border: 1px solid rgba(224, 17, 95, 0.06); } .plan-card .plan-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .plan-card .plan-header h3 { font-weight: 500; font-size: 1.3rem; color: #1f1f1f; } .plan-card .plan-badge { display: inline-block; background: #E0115F; color: #ffffff; font-weight: 500; font-size: 11px; padding: 4px 14px; border-radius: 999px; border: none; flex-shrink: 0; margin-left: 8px; } .plan-card .plan-price-wrap { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; } .plan-card .plan-price { font-weight: 500; font-size: 2rem; color: #E0115F; } .plan-card .plan-period { font-weight: 300; font-size: 0.9rem; color: #5c5c5c; } .plan-card .plan-description { font-weight: 300; font-size: 0.95rem; line-height: 1.5; color: #5c5c5c; margin-bottom: 16px; max-width: 40ch; } .plan-card .plan-divider { height: 1px; background: rgba(224, 17, 95, 0.06); margin: 0 0 16px 0; } .plan-card .plan-features { list-style: none; padding: 0; margin: 0 0 24px 0; flex: 1; } .plan-card .plan-features li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-weight: 300; font-size: 0.9rem; color: #1f1f1f; } .plan-card .plan-features .material-symbols-outlined { font-size: 18px; color: #E0115F; background: rgba(224, 17, 95, 0.08); border-radius: 50%; padding: 2px; } .plan-card .plan-cta { margin-top: auto; } .plan-card .plan-cta .btn { width: 100%; justify-content: center; } .bento-item { background: var(--looply-surface-alt); border-radius: 16px; overflow: hidden; text-align: left; display: flex; flex-direction: column; min-height: 280px; } .bento-item.wide { grid-column: span 2; } .bento-item.tall { min-height: 340px; } .bento-image { width: 100%; flex: 1; background: #ffffff; min-height: 80px; } .bento-body { padding: 20px 24px 24px; background: var(--looply-surface-alt); flex-shrink: 0; } .bento-body.text-top { padding: 24px 24px 20px; order: -1; } .bento-body h3 { font-weight: 500; font-size: 1.05rem; line-height: 1.2; margin-bottom: 8px; color: #1f1f1f; } .bento-body p { font-weight: 300; font-size: 0.9rem; line-height: 1.6; color: #5c5c5c; } .testimonial-card { flex: 0 0 380px; background: #ffffff; border-radius: 16px; padding: 24px; text-align: left; display: flex; flex-direction: column; } .testimonial-card .testimonial-header { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 12px; } .testimonial-card .testimonial-user { display: flex; align-items: center; gap: 12px; } .testimonial-card .testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--looply-surface-alt); display: flex; align-items: center; justify-content: center; color: #E0115F; flex-shrink: 0; } .testimonial-card .testimonial-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .testimonial-card .testimonial-avatar .material-symbols-outlined { font-size: 24px; } .testimonial-card .testimonial-user-info strong { font-weight: 500; font-size: 0.9rem; display: block; color: var(--looply-primary-strong); } .testimonial-card .testimonial-user-info span { font-weight: 300; font-size: 0.8rem; color: var(--looply-primary-strong); } .testimonial-card .testimonial-studio { display: none; align-items: center; gap: 8px; font-weight: 300; font-size: 0.85rem; color: var(--looply-primary-strong); } .testimonial-card .testimonial-studio .material-symbols-outlined { font-size: 18px; color: #E0115F; } .testimonial-card .testimonial-text { font-weight: 300; font-size: 0.95rem; line-height: 1.6; color: var(--looply-primary-strong); margin-bottom: 16px; flex: 1; } .testimonial-card .testimonial-footer { border-top: 1px solid rgba(224, 17, 95, 0.06); padding-top: 12px; } .testimonial-card .testimonial-stars { display: flex; gap: 2px; } .testimonial-card .testimonial-stars .material-symbols-outlined { font-size: 18px; color: #f5b301; } .faq-item { border-bottom: 1px solid rgba(224, 17, 95, 0.06); } .faq-question { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 16px 0; background: transparent; border: none; text-align: left; cursor: pointer; font-family: var(--looply-font); font-weight: 500; font-size: 1rem; color: #1f1f1f; transition: color 0.2s ease; } .faq-question:hover { color: #E0115F; } .faq-question .material-symbols-outlined { font-size: 24px; color: #E0115F; transition: transform 0.3s ease; flex-shrink: 0; } .faq-item.open .faq-question .material-symbols-outlined { transform: rotate(180deg); } .faq-answer { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-6px); transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.24s ease, transform 0.24s ease; padding: 0; font-weight: 300; font-size: 0.95rem; line-height: 1.6; color: #5c5c5c; } .faq-item.open .faq-answer { max-height: 320px; opacity: 1; transform: translateY(0); padding: 0 0 16px 0; } .banner-wrapper { max-width: 1120px; margin: 0 auto; background: #E0115F url('../images/banner_cta.webp') center / cover no-repeat; border-radius: 24px; padding: 64px 56px 0; color: #ffffff; display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 24px; overflow: hidden; } .banner-copy { display: grid; gap: 12px; padding-bottom: 64px; } .banner-wrapper h2 { font-weight: 500; font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.2; letter-spacing: -0.02em; max-width: 14ch; } .banner-wrapper p { font-weight: 300; font-size: clamp(0.95rem, 1.2vw, 1.15rem); line-height: 1.6; max-width: 48ch; color: rgba(255, 255, 255, 0.65); } .banner-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 4px; } .banner-visual { width: min(100%, 280px); justify-self: center; align-self: end; display: flex; align-items: flex-end; margin-bottom: -1px; } .banner-visual img { display: block; width: 100%; height: auto; } .banner-actions .btn { height: var(--looply-button-height); min-height: var(--looply-button-height); padding: 0 var(--looply-button-padding-x); font-size: 15px; } .footer { background: #E0115F; padding: 144px 48px 120px; color: #ffffff; } .footer-content { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 72px; } .footer-brand .footer-logo { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 20px; color: #ffffff; text-decoration: none; } .footer-brand .footer-logo .material-symbols-outlined { font-size: 28px; color: #ffffff; } .footer-brand p { font-weight: 300; font-size: 0.95rem; color: rgba(255, 255, 255, 0.72); max-width: 36ch; line-height: 1.6; } .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .footer-links-column { display: grid; align-content: start; gap: 10px; } .footer-links-column h4 { font-weight: 500; font-size: 0.95rem; color: #ffffff; margin: 0 0 2px; } .footer-links-column a, .footer-links-column button, .footer-meta { display: block; font-weight: 300; font-size: 0.9rem; color: rgba(255, 255, 255, 0.72); text-decoration: none; line-height: 1.6; transition: color 0.2s ease; margin: 0; } .footer-links-column button { padding: 0; background: transparent; border: none; text-align: left; cursor: pointer; font-family: var(--looply-font); } .footer-links-column a:hover, .footer-links-column button:hover { color: #ffffff; } .footer-legal { grid-column: 1 / -1; margin: 0; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.16); text-align: left; font-weight: 300; font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); line-height: 1.6; } .seo-modal[hidden] { display: none; } .seo-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 24px; background: rgba(18, 8, 12, 0.52); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transition: opacity 0.24s ease; } .seo-modal.is-open { opacity: 1; } .seo-modal__dialog { width: min(760px, 100%); max-height: min(80dvh, 860px); overflow: hidden; border-radius: 24px; background: #ffffff; box-shadow: 0 30px 80px rgba(31, 31, 31, 0.18); padding: 32px; color: #1f1f1f; display: grid; grid-template-rows: auto minmax(0, 1fr); transform: translateY(18px) scale(0.98); transition: transform 0.24s ease; } .seo-modal.is-open .seo-modal__dialog { transform: translateY(0) scale(1); } .seo-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; } .seo-modal__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 241, 246, 0.96); color: #E0115F; font-size: 12px; font-weight: 500; margin-bottom: 12px; } .seo-modal__title { font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.05; letter-spacing: -0.03em; margin: 0; } .seo-modal__close { padding: 0 4px; border: none; background: transparent; color: #E0115F; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-family: var(--looply-font); font-size: 3rem; line-height: 1; transition: color 0.24s ease, opacity 0.24s ease; } .seo-modal__close:hover { opacity: 0.72; } .seo-modal__content { display: grid; gap: 16px; color: #5c5c5c; line-height: 1.7; font-size: 0.98rem; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; } .seo-modal__content::-webkit-scrollbar { width: 0; height: 0; display: none; } .seo-modal__content p { margin: 0; } .cookie-banner { position: fixed; right: 24px; bottom: 24px; z-index: 1000; display: none; width: min(420px, calc(100vw - 32px)); padding: 16px; border: 1px solid rgba(224, 17, 95, 0.14); border-radius: var(--looply-radius-md); background: #ffffff; color: var(--looply-text); } .cookie-banner.is-visible { display: block; } .cookie-banner p { margin: 0 0 12px; color: var(--looply-muted); font-size: 14px; line-height: 1.45; } .cookie-actions { display: flex; gap: 8px; justify-content: flex-end; } .cookie-actions .btn { min-height: 40px; padding: 0 14px; font-size: 14px; } :where(section[id], footer[id]) { scroll-margin-top: var(--looply-scroll-offset); } .hero { display: flex; align-items: center; justify-content: center; min-height: min(100dvh, 1024px); max-height: 1024px; width: 100%; padding: 188px 48px 40px; box-sizing: border-box; background: radial-gradient(circle at center, #F2558D 0%, #E0115F 50%, #E0115F 100%); text-align: center; color: #ffffff; overflow: hidden; } .hero-content { max-width: min(var(--looply-shell-width), 100%); width: 100%; display: flex; flex-direction: column; align-items: center; margin: 0 auto; padding-top: 0; position: relative; z-index: 1; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px 6px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); font-weight: 500; font-size: 13px; color: rgba(255, 255, 255, 0.8); margin-bottom: 24px; background: transparent; } .hero-badge .material-symbols-outlined { font-size: 20px; } .hero-headline { font-weight: 500; font-size: clamp(2rem, 5.5vw, 3.6rem); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 24px; max-width: min(var(--looply-shell-width), 100%); margin-left: auto; margin-right: auto; color: #ffffff; } .hero-subtitle { font-weight: 300; font-size: clamp(0.95rem, 1.2vw, 1.15rem); line-height: 1.6; max-width: min(var(--looply-shell-width), 100%); margin: 0 auto 40px; color: rgba(255, 255, 255, 0.65); } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; } .hero-actions .btn { height: var(--looply-button-height); min-height: var(--looply-button-height); padding: 0 var(--looply-button-padding-x); font-size: 15px; } .hero-visual { width: min(100%, 460px); margin: 28px auto 0; } .hero-visual img { display: block; width: 100%; height: auto; }  .logo-carousel { padding: 40px 0; background: #ffffff; overflow: hidden; position: relative; } .logo-carousel::before, .logo-carousel::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .logo-carousel::before { left: 0; background: linear-gradient(to right, #ffffff, transparent); } .logo-carousel::after { right: 0; background: linear-gradient(to left, #ffffff, transparent); } .logo-track { display: flex; gap: 56px; animation: scrollLogos 24s linear infinite; width: max-content; } .logo-track span { display: flex; align-items: center; gap: 8px; font-weight: 300; font-size: 14px; color: #5c5c5c; white-space: nowrap; } .logo-track .material-symbols-outlined { font-size: 28px; color: #E0115F; } .logo-carousel-inner { display: flex; width: 100%; overflow: hidden; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); } .section-cards { padding: 80px 48px; background: #ffffff; text-align: center; } .section-cards-header { max-width: 600px; margin: 0 auto 48px; } .section-cards-header h2 { font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -0.02em; color: #1f1f1f; margin-bottom: 16px; } .section-cards-header p { font-weight: 300; font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.6; color: #5c5c5c; } .section-tabs { padding: 80px 48px; background: #ffffff; } .section-tabs-header { max-width: 600px; margin: 0 auto 48px; text-align: center; } .section-tabs-header h2 { font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -0.02em; color: #1f1f1f; margin-bottom: 16px; } .section-tabs-header p { font-weight: 300; font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.6; color: #5c5c5c; } .tabs-wrapper { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: 960px; margin: 0 auto; width: 100%; min-width: 0; overflow: hidden; } .section-team { padding: 80px 48px; background: #ffffff; text-align: center; } .section-team-header { max-width: 600px; margin: 0 auto 48px; } .section-team-header h2 { font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -0.02em; color: #1f1f1f; margin-bottom: 16px; } .section-team-header p { font-weight: 300; font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.6; color: #5c5c5c; } .team-grid { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 400px; margin: 0 auto; } .section-radial { padding: 80px 48px; height: 1024px; max-height: 100dvh; background: var(--looply-primary); color: #ffffff; text-align: center; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; } .section-radial-header { max-width: 600px; margin: 0 auto 48px; } .section-radial-header h2 { font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -0.02em; color: #ffffff; } .section-radial-header p { margin-top: 16px; font-weight: 300; font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.6; color: rgba(255, 255, 255, 0.82); } .feature-marquee { display: grid; grid-template-columns: 1fr; gap: 20px; width: min(1120px, 100%); margin: 0 auto; align-items: stretch; } .feature-window { position: relative; height: 340px; overflow: hidden; mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%); } .feature-track { display: grid; gap: 18px; list-style: none; width: 100%; margin: 0; padding: 0; will-change: transform; } .feature-track.up { animation: featureScrollUp 60s linear infinite; } .feature-track.down { animation: featureScrollDown 60s linear infinite; } .section-plans { padding: 80px 48px; background: #ffffff; text-align: center; } .section-plans-header { max-width: 600px; margin: 0 auto 48px; } .section-plans-header h2 { font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -0.02em; color: #1f1f1f; margin-bottom: 16px; } .section-plans-header p { font-weight: 300; font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.6; color: #5c5c5c; } .plans-grid { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 400px; margin: 0 auto; } .section-bento { padding: 80px 48px; background: #ffffff; text-align: center; } .section-bento-header { max-width: 600px; margin: 0 auto 48px; } .section-bento-header h2 { font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -0.02em; color: #1f1f1f; margin-bottom: 16px; } .section-bento-header p { font-weight: 300; font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.6; color: #5c5c5c; } .bento-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1120px; margin: 0 auto; } .section-testimonials { padding: 80px 48px; background: var(--looply-surface-alt); text-align: center; overflow: hidden; } .section-testimonials-header { max-width: 600px; margin: 0 auto 48px; } .section-testimonials-header h2 { font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--looply-primary-strong); margin-bottom: 16px; } .section-testimonials-header p { font-weight: 300; font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.6; color: var(--looply-primary-strong); } .testimonials-track-wrapper { position: relative; overflow: hidden; width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); } .testimonials-track { display: flex; gap: 24px; width: max-content; padding: 8px 0; } .testimonials-track.left { animation: scrollLeft 35s linear infinite; } .testimonials-track.right { animation: scrollRight 35s linear infinite; } .section-faq { padding: 80px 48px; background: #ffffff; } .faq-wrapper { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: 1120px; margin: 0 auto; } .faq-left { text-align: left; } .faq-left h2 { font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -0.02em; color: #1f1f1f; margin-bottom: 16px; } .faq-left p { font-weight: 300; font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.6; color: #5c5c5c; max-width: 44ch; } .faq-right { display: grid; gap: 12px; } .section-banner { padding: 80px 48px; background: #ffffff; text-align: left; }  .section-benefits .feature-card-icon { margin-bottom: 16px; } .section-benefits .section-team-header h2, .section-benefits .section-team-header p { display: block; overflow: visible; -webkit-line-clamp: unset; line-clamp: unset; } @media (min-width: 481px) { .section-benefits .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .material-symbols-outlined.ph-fill { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-family: inherit; font-size: inherit; line-height: 1; } .header-logo img, .footer-logo img { display: block; height: auto; } .header-logo, .footer-logo { line-height: 0; } .menu-toggle:hover { transform: none; } .testimonials-track-wrapper + .testimonials-track-wrapper { margin-top: 16px; } @keyframes scrollLogos { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes iconPop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes scrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes scrollRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } @keyframes featureScrollUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } @keyframes featureScrollDown { 0% { transform: translateY(-50%); } 100% { transform: translateY(0); } } .hero-content { animation: looply-hero-enter 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both; } @keyframes looply-hero-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes looply-button-sheen { 0%, 72% { transform: translateX(-220%) skewX(-24deg); } 88%, 100% { transform: translateX(420%) skewX(-24deg); } } html.motion-ready .site-reveal { opacity: 0; transform: translateY(28px); transition: opacity 560ms ease, transform 560ms cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: var(--reveal-delay, 0ms); } html.motion-ready .site-reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .feature-track, .testimonials-track { animation: none !important; } } @media (max-width: 480px) { html { --looply-scroll-offset: 96px; } .header { display: flex; align-items: center; justify-content: space-between; gap: 12px; top: 10px; width: calc(100% - 20px); min-height: 60px; padding: 10px 14px; border-radius: 20px; } .header-logo { margin-right: auto; } .menu-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 52px; min-width: 52px; height: 52px; padding: 0; border-radius: 14px; position: relative; z-index: 140; } .menu-toggle-icon { font-size: 30px; } .header-right { display: flex; position: fixed; top: 0; right: -100%; width: min(300px, calc(100vw - 12px)); height: 100dvh; flex-direction: column; align-items: stretch; gap: 0; padding: 88px 24px 24px; background: #ffffff; border-left: 1px solid rgba(224, 17, 95, 0.06); box-shadow: -20px 0 48px rgba(31, 31, 31, 0.12); transition: right 0.3s ease; z-index: 120; } .header-right.open { right: 0; } .header-nav { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 24px; } .header-nav a { padding: 8px 0; font-size: 16px; border-bottom: 1px solid rgba(224, 17, 95, 0.04); } .header-actions { margin-top: auto; } .header-actions .btn { width: 100%; justify-content: center; } .hero { min-height: auto; max-height: none; justify-content: center; padding: 188px 16px 40px; } .hero-actions .btn { height: var(--looply-button-height-mobile); min-height: var(--looply-button-height-mobile); padding: 0 18px; font-size: 14px; } .btn, .header .btn, .banner-actions .btn { height: var(--looply-button-height-mobile); min-height: var(--looply-button-height-mobile); padding: 0 18px; } .feature-marquee { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .feature-window:nth-child(-n + 2) { display: none; } .feature-window { height: 280px; } .feature-card { padding: 18px; border-radius: 18px; gap: 14px; } .feature-card-icon { width: 52px; height: 52px; border-radius: 999px; font-size: 24px; } .feature-card-title { font-size: 0.92rem; max-width: 12ch; } .tab-item { grid-template-columns: 4px minmax(0, 1fr); padding: 16px 0; gap: 14px; } .tab-item h3 { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; font-size: 0.95rem; gap: 12px; } .tab-step { width: 34px; min-width: 34px; height: 34px; font-size: 0.82rem; } .tab-item p { font-size: 0.85rem; max-width: 100%; } .tabs-wrapper, .tabs-list, .tab-item, .tab-content, .tab-item h3, .tab-item p, .tab-image, .tab-image-track, .tab-image-slide { min-width: 0; } .tab-image { order: 2; width: 100%; max-width: 100%; overflow: hidden; } .tab-image-track { width: 100%; flex-wrap: nowrap; } .tab-image-slide { flex: 0 0 100%; max-width: 100%; } .tab-image-slide img { width: 98%; max-width: 98%; } .team-card-image .material-symbols-outlined { font-size: 48px; } .logo-track { gap: 32px; } .logo-track span { font-size: 12px; } .logo-track .material-symbols-outlined { font-size: 20px; } .logo-carousel::before, .logo-carousel::after { width: 40px; } .section-radial { height: auto; max-height: none; min-height: 0; justify-content: flex-start; padding: 48px 16px; } .section-radial-header { max-width: 100%; margin-bottom: 32px; } .plans-grid { max-width: 100%; } .plan-card { padding: 24px 20px; } .bento-grid { grid-template-columns: 1fr; gap: 16px; max-width: 100%; } .bento-item.wide { grid-column: span 1; } .bento-item.tall { min-height: 240px; } .testimonial-card { flex: 0 0 280px; } .faq-wrapper { grid-template-columns: 1fr; gap: 24px; } .section-cards, .section-team, .section-plans, .section-testimonials, .section-faq, .section-banner { padding: 48px 16px; } .section-tabs, .section-bento { padding: 48px 16px; } .container { padding-left: 16px; padding-right: 16px; } .footer { padding: 40px 16px 24px; } .footer-content { grid-template-columns: 1fr; gap: 32px; } .footer-links { grid-template-columns: 1fr 1fr; gap: 24px; } .banner-wrapper { padding: 32px 24px 0; border-radius: 16px; } .banner-copy { padding-bottom: 24px; } .banner-visual { width: min(100%, 220px); } .banner-wrapper h2 { max-width: 100%; } .banner-wrapper p { max-width: 100%; } } @media (min-width: 481px) and (max-width: 1024px) { html { --looply-scroll-offset: 112px; } .header { padding: 10px 18px; } .header-nav { gap: 24px; } .header-nav a { font-size: 14px; } .hero { min-height: auto; max-height: none; justify-content: center; padding: 204px 32px 40px; } .hero-visual { width: min(100%, 380px); margin-top: 28px; } .feature-marquee { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .feature-window:nth-child(-n + 2) { display: none; } .feature-window { height: 440px; } .feature-card-icon { width: 58px; height: 58px; border-radius: 999px; font-size: 26px; } .section-radial { height: auto; max-height: none; min-height: 0; justify-content: flex-start; } .tabs-wrapper { grid-template-columns: 1fr; gap: 40px; } .tab-image { order: 2; aspect-ratio: 1 / 1; min-height: 0; } .tab-image-slide img { width: 96%; max-width: 96%; } .team-grid { grid-template-columns: repeat(2, 1fr); max-width: 640px; gap: 24px; } .plans-grid { grid-template-columns: repeat(2, 1fr); max-width: 640px; gap: 20px; } .plan-card.featured { grid-column: span 2; } .bento-grid { grid-template-columns: 1fr 1fr; max-width: 640px; gap: 20px; } .bento-item.wide { grid-column: span 2; } .bento-item.tall { min-height: 280px; } .faq-wrapper { grid-template-columns: 1fr; gap: 32px; } .footer-content { grid-template-columns: 1fr 1fr; gap: 40px; } .footer-links { grid-template-columns: 1fr 1fr; gap: 32px; } .section-cards, .section-team, .section-plans, .section-testimonials, .section-faq, .section-banner { padding: 60px 32px; } .section-tabs, .section-bento { padding: 60px 32px; } .banner-wrapper { padding: 48px 40px 0; } .banner-copy { padding-bottom: 40px; } .banner-visual { width: min(100%, 240px); margin-bottom: -1px; } } @media (min-width: 1025px) { html { --looply-scroll-offset: 128px; } .header { padding: 10px 20px; } .header-nav { gap: 40px; } .header-nav a { font-size: 16px; } .btn { padding: 14px 32px; font-size: 16px; min-height: 56px; } .hero { min-height: min(100dvh, 1024px); max-height: 1024px; padding: 188px 48px 40px; } .hero-visual { width: min(100%, 440px); margin-top: 32px; } .hero-actions .btn { height: var(--looply-button-height); min-height: var(--looply-button-height); padding: 0 var(--looply-button-padding-x); font-size: 15px; } .banner-wrapper { grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); } .banner-visual { width: min(100%, 320px); justify-self: end; } .section-cards { padding: 100px 48px; } .section-tabs { padding: 100px 48px; } .section-team { padding: 100px 48px; } .section-radial { padding: 100px 48px; } .section-plans { padding: 100px 48px; } .section-testimonials { padding: 100px 48px; } .section-faq { padding: 100px 48px; } .section-banner { padding: 100px 48px; } .feature-marquee { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .feature-window { height: 560px; } .tabs-wrapper { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .tab-item { padding: 24px 0 24px 24px; gap: 24px; } .tab-item h3 { font-size: 1.15rem; } .tab-step { width: 48px; min-width: 48px; height: 48px; } .tab-item p { font-size: 0.95rem; } .tab-image { order: 0; aspect-ratio: 1 / 1; min-height: 0; } .tab-image-slide img { width: 94%; max-width: 94%; } .team-grid { grid-template-columns: repeat(3, 1fr); max-width: 1120px; gap: 32px; } .team-card-image .material-symbols-outlined { font-size: 72px; } .logo-carousel { padding: 56px 0; } .logo-track { gap: 72px; } .logo-carousel::before, .logo-carousel::after { width: 120px; } .plans-grid { grid-template-columns: repeat(3, 1fr); max-width: 1120px; gap: 24px; } .plan-card { min-height: 480px; } .bento-grid { grid-template-columns: 1fr 1fr 1fr 1fr; max-width: 1120px; gap: 24px; } .bento-item:first-child { grid-column: span 3; grid-row: span 2; min-height: 380px; } .bento-item:nth-child(2) { grid-column: span 1; grid-row: span 2; min-height: 380px; } .bento-item:nth-child(3) { grid-column: span 1; grid-row: span 1; min-height: 180px; } .bento-item:nth-child(4) { grid-column: span 3; grid-row: span 1; min-height: 180px; } .faq-wrapper { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .testimonial-card { flex: 0 0 400px; } .footer-content { grid-template-columns: 1fr 1fr 1fr; gap: 60px; } .footer-links { grid-template-columns: 1fr 1fr; gap: 48px; } .banner-wrapper { padding: 64px 56px 0; } } .hero-content { max-width: min(var(--looply-shell-width), 100%); width: 100%; } .section-cards-header h2, .section-cards-header p, .section-tabs-header h2, .section-tabs-header p, .section-team-header h2, .section-team-header p, .section-radial-header h2, .section-radial-header p, .section-plans-header h2, .section-plans-header p, .section-bento-header h2, .section-bento-header p, .section-testimonials-header h2, .section-testimonials-header p, .faq-left h2, .faq-left p, .banner-wrapper h2, .banner-wrapper p { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .hero-headline { display: block; overflow: visible; max-width: min(var(--looply-shell-width), 100%); } .hero-subtitle { display: block; overflow: visible; } .section-cards-header p, .section-tabs-header p, .section-team-header p, .section-plans-header p, .section-bento-header p, .section-testimonials-header p, .faq-left p, .banner-wrapper p { -webkit-line-clamp: 2; line-clamp: 2; } .section-cards-header h2, .section-tabs-header h2, .section-team-header h2, .section-radial-header h2, .section-plans-header h2, .section-bento-header h2, .section-testimonials-header h2, .faq-left h2, .banner-wrapper h2 { -webkit-line-clamp: 2; line-clamp: 2; } .section-radial-header p { -webkit-line-clamp: 2; line-clamp: 2; } .hero-visual { width: min(100%, 440px); } .hero .btn-primary, .banner-wrapper .btn-primary { background: #ffffff; color: var(--looply-primary); } .hero .btn-primary:hover, .banner-wrapper .btn-primary:hover { background: var(--looply-primary-soft); color: var(--looply-primary-strong); } .logo-track { animation: none; will-change: transform; } .plan-card.featured { border: 2px solid var(--looply-primary); } .banner-wrapper h2 { max-width: 28ch; } .header { top: 16px; right: auto; left: 50%; transform: translateX(-50%); width: min(var(--looply-shell-width), calc(100% - 32px)); min-height: 68px; padding: 10px 20px; border: 1px solid rgba(224, 17, 95, 0.08); border-radius: 24px; box-sizing: border-box; box-shadow: 0 18px 44px rgba(31, 31, 31, 0.08); } .header-logo img { width: 100px; } .footer-logo img { width: 192px; } .header-nav a { font-size: 14px; } .header .btn { height: var(--looply-button-height); min-height: var(--looply-button-height); padding: 0 var(--looply-button-padding-x); font-size: 15px; } .section-badge { border-color: rgba(224, 17, 95, 0.2); color: var(--looply-primary); } .header-logo, .header-logo .material-symbols-outlined, .menu-toggle, .header-nav a:hover, .logo-track .material-symbols-outlined { color: var(--looply-primary); } .btn-primary, .btn-outline-dark:hover { background: var(--looply-primary); } .btn-primary:hover { background: var(--looply-primary-strong); } .btn-outline-dark { color: var(--looply-primary); border-color: var(--looply-primary); } .btn-white { color: var(--looply-primary); } .hero { background: radial-gradient(circle at center, #F2558D 0%, var(--looply-primary) 52%, var(--looply-primary-strong) 100%); } .page-placeholder { padding: 112px 24px 80px; background: radial-gradient(circle at top left, rgba(224, 17, 95, 0.08), transparent 26%), linear-gradient(180deg, #ffffff 0%, #fcfcfc 100%); } .page-placeholder__inner { width: min(960px, 100%); margin: 0 auto; } .page-placeholder__panel { border: 1px solid var(--looply-border); border-radius: 24px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 44px rgba(31, 31, 31, 0.08); padding: 32px; } .page-placeholder__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(224, 17, 95, 0.16); color: var(--looply-primary); background: rgba(253, 231, 239, 0.8); font-size: 13px; font-weight: 500; } .page-placeholder__title { margin: 18px 0 12px; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.04; letter-spacing: -0.04em; } .page-placeholder__copy { max-width: 56ch; color: var(--looply-muted); line-height: 1.65; } .page-placeholder__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } body.page-404 { min-height: 100dvh; display: flex; flex-direction: column; } .page-not-found { flex: 1; display: grid; place-items: center; padding: 156px 24px 72px; background: radial-gradient(circle at top left, rgba(224, 17, 95, 0.08), transparent 26%), linear-gradient(180deg, #ffffff 0%, #fcfcfc 100%); } .page-not-found__content { width: min(720px, 100%); text-align: center; } .page-not-found__code { margin: 0; color: var(--looply-primary); font-size: clamp(6rem, 18vw, 12rem); line-height: 0.88; letter-spacing: -0.08em; font-weight: 600; } .page-not-found__title { margin: 18px 0 12px; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.04; letter-spacing: -0.05em; } .page-not-found__copy { margin: 0 auto; max-width: 32ch; color: var(--looply-muted); line-height: 1.65; } .page-not-found__action { margin-top: 24px; } body.page-404 .footer { margin-top: auto; } @media (min-width: 481px) { .footer-content { grid-template-columns: minmax(260px, 1fr) minmax(320px, 1fr); } } @media (min-width: 1025px) { .bento-item:nth-child(3), .bento-item:nth-child(4) { min-height: 380px; } } @media (max-width: 560px) { .cookie-banner { right: 16px; bottom: 16px; } .cookie-actions { display: grid; grid-template-columns: 1fr; } } @media (max-width: 480px) { .header { top: 10px; width: calc(100% - 20px); min-height: 60px; padding: 10px 14px; border-radius: 20px; } .hero-headline { max-width: 100%; font-size: clamp(2rem, 9vw, 2.5rem); } .hero-visual { width: min(100%, 320px); margin-top: 24px; } .btn { height: var(--looply-button-height-mobile); min-height: var(--looply-button-height-mobile); padding: 0 18px; } .banner-wrapper h2 { max-width: 100%; font-size: clamp(1.75rem, 8vw, 2.25rem); } .page-not-found { padding: 132px 16px 56px; } .page-not-found__title { font-size: clamp(1.8rem, 9vw, 2.4rem); } .page-not-found__action { width: 100%; } .page-placeholder { padding: 96px 16px 56px; } .page-placeholder__panel { padding: 24px; border-radius: 20px; } } @media (max-width: 768px) { .footer { min-height: auto; padding: 112px 24px 72px; } .footer-legal { text-align: left; } }