:root { --bg: #f7f7f8; --bg-rgb: 247, 247, 248; --surface: #ffffff; --text: #121212; --muted: #6b7280; --line: #e5e7eb; --primary: #ff6a00; --primary-dark: #d65f06; --accent: #ff8a3d; --accent-soft: #ffe7d7; --ok: #90c44f; --shadow: 0 8px 30px rgba(0, 0, 0, 0.08); --radius: 16px; --section-gap-tight: 4.4rem; --section-gap-base: 5.3rem; --section-gap-loose: 6.2rem; } /* Optional A/B themes: add "theme-warm" or "theme-neutral" to */ body.theme-warm { --bg: #faf7f0; --bg-rgb: 250, 247, 240; --line: #e2d9c8; --primary: #312d2a; --primary-dark: #25211f; --accent: #e7aa2f; --shadow: 0 14px 34px rgba(37, 33, 31, 0.14); } body.theme-neutral { --bg: #f6f7f9; --bg-rgb: 246, 247, 249; --line: #d6dbe3; --primary: #2f343c; --primary-dark: #242930; --accent: #e3a400; --shadow: 0 14px 34px rgba(36, 41, 48, 0.14); } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--text); background: var(--bg); line-height: 1.55; } main { position: relative; overflow: hidden; background: var(--bg); } a { color: inherit; text-decoration: none; } section[id], #cta { scroll-margin-top: 96px; } .container { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; } .site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); background: rgba(247, 247, 248, 0.88); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; color: var(--text); position: relative; } .brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.05rem; text-transform: none; letter-spacing: -0.01em; } .brand-logo { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); } .nav-links { display: flex; align-items: center; gap: 0.9rem; } .nav-links a { color: var(--muted); font-weight: 500; font-size: 0.92rem; } .header-actions { display: inline-flex; align-items: center; gap: 0.55rem; } .lang-switch { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.2rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; } .lang-btn { border: 0; background: transparent; color: var(--muted); font-size: 0.75rem; font-weight: 700; min-width: 34px; height: 28px; border-radius: 999px; cursor: pointer; } .lang-btn.is-active { background: #111827; color: #fff; } .site-header .btn { background: linear-gradient(135deg, #ff6a00 0%, #ff8a3d 100%); color: #ffffff; border-color: transparent; border-radius: 14px; min-height: 38px; padding: 0.45rem 1rem; box-shadow: 0 4px 10px rgba(255, 106, 0, 0.2); white-space: nowrap; } .site-header .btn:hover { box-shadow: 0 7px 14px rgba(255, 106, 0, 0.34); filter: saturate(1.02); } .section { padding: var(--section-gap-base) 0; position: relative; overflow: hidden; background: transparent; } main > .section + .section { padding-top: var(--section-gap-loose); } #features { padding-top: var(--section-gap-tight); } #showcase { padding-top: var(--section-gap-loose); } #pricing { padding-top: var(--section-gap-loose); } #faq { padding-top: var(--section-gap-base); padding-bottom: calc(var(--section-gap-base) + 0.4rem); } .section::after { content: ""; position: absolute; width: 460px; height: 460px; border-radius: 46% 54% 52% 48% / 56% 42% 58% 44%; background: radial-gradient( circle at 30% 30%, rgba(244, 180, 0, 0.06), rgba(244, 180, 0, 0) ); top: -280px; right: -260px; z-index: 0; pointer-events: none; opacity: 0.18; } .section > .container { position: relative; z-index: 1; } .wave-separator { display: none; } .wave-separator::before { content: none; } .wave-separator::after { content: none; } .wave-separator-top { top: -84px; border-radius: 0 0 56% 44% / 0 0 100% 100%; } .wave-separator-top::before { background: radial-gradient( 125% 120% at 50% 100%, rgba(var(--bg-rgb), 0.99) 26%, rgba(var(--bg-rgb), 0.9) 56%, rgba(var(--bg-rgb), 0) 100% ); } .wave-separator-bottom { bottom: -84px; border-radius: 56% 44% 0 0 / 100% 100% 0 0; } .wave-separator-bottom::before { background: radial-gradient( 125% 120% at 50% 0%, rgba(var(--bg-rgb), 0.99) 24%, rgba(var(--bg-rgb), 0.88) 54%, rgba(var(--bg-rgb), 0) 100% ); } /* Section-specific wave tuning for smoother/stronger transitions */ #features .wave-separator-top { height: 130px; top: -78px; border-radius: 0 0 46% 54% / 0 0 100% 100%; opacity: 0.46; } #features .wave-separator-bottom { height: 142px; bottom: -88px; opacity: 0.42; } #showcase .wave-separator-top { height: 146px; top: -86px; opacity: 0.42; } #pricing .wave-separator-top { height: 148px; top: -90px; opacity: 0.4; } #pricing .wave-separator-bottom { height: 170px; bottom: -102px; border-radius: 60% 40% 0 0 / 100% 100% 0 0; opacity: 0.4; } #faq .wave-separator-top { height: 154px; top: -96px; border-radius: 0 0 62% 38% / 0 0 100% 100%; opacity: 0.42; } .deco-plus, .deco-wave { position: absolute; z-index: 1; pointer-events: none; font-weight: 700; line-height: 1; } .deco-plus { color: var(--accent); font-size: 2.2rem; } .deco-wave { color: #7d8593; font-size: 2rem; letter-spacing: 0.05em; } .deco-plus-features-a { left: 10%; top: 112px; } .deco-wave-features-a { right: 10%; bottom: 84px; } .deco-plus-showcase-a { right: 11%; top: 120px; } .deco-wave-showcase-a { left: 11%; bottom: 90px; } .deco-plus-pricing-a { left: 10%; top: 140px; } .deco-wave-faq-a { left: 14%; bottom: 90px; } /* Quick taste presets: switch class on */ body.taste-subtle .wave-separator { display: none; } body.taste-subtle #features .wave-separator-top { height: 56px; top: -38px; } body.taste-subtle #pricing .wave-separator-bottom { height: 126px; bottom: -92px; } body.taste-subtle #faq .wave-separator-top { height: 102px; top: -76px; } body.taste-subtle .deco-plus, body.taste-subtle .deco-wave { opacity: 0.45; } body.taste-subtle .price-card.featured { transform: translateY(-8px) scale(1.015); box-shadow: 0 18px 30px rgba(31, 35, 41, 0.18); } body.taste-subtle .btn:hover { box-shadow: 0 6px 14px rgba(31, 35, 41, 0.24); } body.taste-dramatic .wave-separator { display: none; } body.taste-dramatic #features .wave-separator-top { height: 88px; top: -62px; } body.taste-dramatic #pricing .wave-separator-bottom { height: 192px; bottom: -146px; } body.taste-dramatic #faq .wave-separator-top { height: 164px; top: -124px; } body.taste-dramatic .deco-plus, body.taste-dramatic .deco-wave { opacity: 0.95; } body.taste-dramatic .price-card.featured { transform: translateY(-22px) scale(1.045); box-shadow: 0 30px 50px rgba(31, 35, 41, 0.24); } body.taste-dramatic .btn:hover { box-shadow: 0 12px 24px rgba(31, 35, 41, 0.42); } .section-alt { background: transparent; } .hero { position: relative; overflow: visible; background: linear-gradient(180deg, #f9f9fa 0%, #f7f7f8 100%); color: var(--text); padding: 4rem 0 3.6rem; } .hero::before { content: ""; position: absolute; top: -58px; left: -6%; width: 112%; height: 108px; background: rgba(255, 138, 61, 0.08); border-radius: 0 0 58% 42% / 0 0 100% 100%; pointer-events: none; z-index: 0; } .hero::after { content: ""; position: absolute; left: -10%; bottom: -110px; width: 120%; height: 200px; background: radial-gradient(120% 100% at 50% 0%, rgba(229, 231, 235, 0.7) 32%, rgba(247, 247, 248, 0) 100%); border-radius: 58% 42% 0 0 / 100% 100% 0 0; pointer-events: none; z-index: 1; } .hero .container { position: relative; z-index: 2; } .hero-bg-shape { position: absolute; border-radius: 999px; filter: blur(0.5px); opacity: 0.16; z-index: 1; } .shape-1 { width: 320px; height: 320px; background: radial-gradient(circle at 30% 30%, #ffe7d7, #ff8a3d); top: -118px; right: -80px; } .shape-2 { width: 220px; height: 220px; background: radial-gradient(circle at 40% 30%, #ffffff, #d1d5db); bottom: -130px; left: -70px; } .hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 1.6rem; align-items: center; } .eyebrow { margin: 0 0 0.75rem; color: var(--primary-dark); letter-spacing: 0.09em; text-transform: uppercase; font-size: 0.72rem; font-weight: 700; } .eyebrow.center { text-align: center; color: var(--primary-dark); } .hero h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.05rem); line-height: 1.06; letter-spacing: -0.02em; max-width: 20ch; } .hero h1 span { color: var(--primary-dark); } .hero-copy { color: var(--muted); margin: 0.95rem 0 1.35rem; max-width: 54ch; font-size: 1.06rem; } .hero-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; } .hero-actions .btn { background: linear-gradient(135deg, #ff6a00 0%, #ff8a3d 100%); border-color: rgba(255, 138, 61, 0.55); color: #fff; box-shadow: 0 8px 20px rgba(255, 106, 0, 0.28); border-radius: 14px; } .hero-actions .btn-ghost { background: #fff; border-color: var(--line); color: var(--text); box-shadow: none; } .hero-actions .btn-ghost:hover { background: #f3f4f6; } .hero-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.95rem; position: relative; z-index: 3; } .hero-meta-item { display: inline-flex; align-items: center; gap: 0.45rem; color: #374151; font-size: 0.82rem; font-weight: 600; line-height: 1; border: 1px solid #d1d5db; background: #f3f4f6; border-radius: 999px; padding: 0.34rem 0.56rem 0.34rem 0.4rem; backdrop-filter: blur(3px); } .hero-meta-icon { width: 1.22rem; height: 1.22rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 106, 0, 0.12); color: var(--primary-dark); flex-shrink: 0; } .hero-meta-icon svg { width: 0.82rem; height: 0.82rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .hero-card { background: #fff; color: var(--text); border-radius: var(--radius); padding: 1.05rem 1.05rem 0.95rem; box-shadow: var(--shadow); border: 1px solid var(--line); transform: translateY(0); } .hero-screenshot-card { padding: 0.75rem; } .hero-screenshot-image { width: 100%; height: clamp(250px, 34vw, 360px); object-fit: cover; object-position: top center; border-radius: 12px; border: 1px solid #d8dee6; display: block; } .hero-screenshot-footer { margin-top: 0.75rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .hero-screenshot-footer p { margin: 0; color: var(--muted); font-weight: 600; font-size: 0.92rem; } .card-head { display: inline-flex; align-items: center; gap: 0.45rem; border-radius: 999px; background: rgba(255, 106, 0, 0.1); color: var(--primary-dark); font-size: 0.8rem; font-weight: 700; padding: 0.3rem 0.65rem; } .card-head-logo { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); } .hero-card h3 { margin: 0.78rem 0; font-size: 1.12rem; } .hero-card ul { margin: 0 0 1rem; padding: 0 0 0 1rem; color: var(--muted); } .hero-card-mockup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; margin: 0.8rem 0 0.25rem; padding: 0.72rem; border-radius: 14px; background: linear-gradient(180deg, #f3f4f6 0%, #eef0f3 100%); border: 1px solid #d8dee6; } .mockup-check { min-height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.42rem 0.5rem; font-size: 0.67rem; font-weight: 600; color: #2b3648; background: #e6ebf3; border: 1px solid #cdd6e3; letter-spacing: 0.01em; } .mockup-check::before { content: "✓"; width: 17px; height: 17px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.6rem; color: #ffffff; background: linear-gradient(135deg, #1e232b, #2b2f36); } .mockup-check-label { line-height: 1; } .mockup-line { height: 7px; border-radius: 999px; display: block; background: #c9d0da; } .mockup-line-a { width: 90%; } .mockup-line-b { width: 72%; } .mockup-line-c { width: 84%; } .stats { margin-top: -1.2rem; position: relative; z-index: 4; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; } .stat-card { border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); padding: 0.95rem; text-align: center; } .stat-value { margin: 0; font-size: 1.45rem; font-weight: 800; color: var(--primary-dark); } .stat-label { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.92rem; } .section-title { margin: 0 auto 2.35rem; max-width: 26ch; text-align: center; font-size: clamp(1.5rem, 4vw, 2.15rem); letter-spacing: -0.01em; color: var(--primary-dark); } .eyebrow.center { margin-bottom: 0.9rem; } .feature-list { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; gap: 0.9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); padding: 1rem 1.05rem; display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: start; } .feature-icon { width: 1.75rem; height: 1.75rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #fff1e7; border: 1px solid rgba(255, 106, 0, 0.28); color: #ff6a00; line-height: 1; flex-shrink: 0; margin-top: 0.08rem; } .feature-icon svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; } .feature-copy h3 { margin: 0 0 0.32rem; } .feature-copy p { margin: 0; color: var(--muted); } .feature-list .feature-item:last-child:nth-child(odd) { grid-column: 1 / -1; } .section-showcase { position: relative; overflow: visible; background: radial-gradient( 90% 80% at 10% 10%, rgba(244, 180, 0, 0.02), rgba(244, 180, 0, 0) 88% ), radial-gradient( 90% 100% at 90% 80%, rgba(43, 47, 54, 0.02), rgba(43, 47, 54, 0) 90% ); } .section-showcase::before { content: ""; position: absolute; left: -8%; top: -132px; width: 116%; height: 250px; pointer-events: none; z-index: 0; background: radial-gradient( 120% 100% at 50% 0%, rgba(var(--bg-rgb), 0.92) 30%, rgba(var(--bg-rgb), 0.56) 60%, rgba(var(--bg-rgb), 0) 100% ); border-radius: 58% 42% 0 0 / 100% 100% 0 0; } .deco-plus, .deco-wave { display: none; } .showcase-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; } .showcase-rows { display: grid; gap: 2.6rem; } .showcase-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; align-items: center; } .showcase-row-reverse .shot-card { order: 2; } .showcase-row-reverse .showcase-copy { order: 1; } .shot-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0.35rem 0 0.6rem; position: relative; overflow: visible; perspective: 1100px; min-height: 320px; display: flex; align-items: center; } .shot-card::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: -16px; height: 24px; border-radius: 50%; background: radial-gradient( 60% 100% at 50% 50%, rgba(31, 35, 41, 0.24), rgba(43, 47, 54, 0) ); filter: blur(6px); z-index: 0; pointer-events: none; } .shot-image { width: 100%; height: 280px; border-radius: 12px; object-fit: cover; display: block; position: relative; z-index: 1; box-shadow: 0 14px 28px rgba(31, 35, 41, 0.24), 0 3px 10px rgba(31, 35, 41, 0.16); transform-origin: center center; transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease; filter: saturate(1.02) contrast(1.01); } .shot-top { object-position: center top; transform: rotateY(8deg) rotateX(2.8deg) rotateZ(1deg) scale(0.98); } .shot-middle { object-position: center; transform: rotateY(-8deg) rotateX(1.8deg) rotateZ(-0.9deg) scale(0.98); } .shot-bottom { object-position: center bottom; transform: rotateY(7deg) rotateX(3.5deg) rotateZ(0.8deg) scale(0.99); } .shot-card:hover .shot-image { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1.015); box-shadow: 0 20px 36px rgba(31, 35, 41, 0.26), 0 8px 20px rgba(31, 35, 41, 0.18); filter: saturate(1.05) contrast(1.02); } .showcase-copy h3 { margin: 0 0 0.5rem; font-size: 1.85rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--primary-dark); } .showcase-copy p { margin: 0 0 0.9rem; color: var(--muted); max-width: 40ch; } .show-card { border: 1px solid #d8dee6; border-radius: 18px; padding: 1rem; background: #fff; color: var(--text); box-shadow: 0 14px 30px rgba(31, 35, 41, 0.15); } .show-topline { display: inline-flex; align-items: center; gap: 0.45rem; color: #606977; font-size: 0.8rem; margin-bottom: 0.85rem; } .show-dot { width: 8px; height: 8px; border-radius: 50%; background: #a6ce72; } .show-code { margin: 0.2rem 0; font-size: 2.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--primary-dark); } .show-title { margin: 0.2rem 0; font-size: 1.05rem; font-weight: 700; } .show-copy { margin: 0.35rem 0 1rem; color: var(--muted); } .show-card h3 { margin: 0.2rem 0 0.8rem; } .show-form, .auth-box { display: grid; gap: 0.6rem; } .show-form label, .auth-box label { display: grid; gap: 0.25rem; font-size: 0.82rem; color: #606977; } .show-form input, .show-form textarea, .auth-box input { border: 1px solid #d8dee6; background: #f7f8fa; color: var(--text); border-radius: 9px; padding: 0.45rem 0.55rem; font: inherit; } .show-form textarea { min-height: 72px; resize: none; } .auth-tabs { display: inline-flex; background: #eef0f3; border-radius: 999px; padding: 0.25rem; margin-bottom: 0.8rem; } .auth-tab { border: 0; background: transparent; color: #606977; border-radius: 999px; padding: 0.32rem 0.62rem; font-size: 0.78rem; cursor: default; } .auth-tab.is-active { background: linear-gradient(135deg, #2b2f36, #1e232b); color: #fff; font-weight: 700; } .auth-box { background: #ffffff; border: 1px solid #d8dee6; border-radius: 14px; padding: 0.85rem; } .show-mockup { border: 1px solid #d8dee6; border-radius: 12px; background: linear-gradient(180deg, #fbfbfc, #f1f3f6); padding: 0.65rem; margin-bottom: 0.85rem; } .show-mockup-chart { display: flex; align-items: end; gap: 0.4rem; height: 88px; } .show-mockup-chart span { flex: 1; border-radius: 8px 8px 5px 5px; background: linear-gradient(180deg, #4c535f, #2b2f36); } .show-mockup-chart span:nth-child(1) { height: 40%; } .show-mockup-chart span:nth-child(2) { height: 66%; } .show-mockup-chart span:nth-child(3) { height: 52%; } .show-mockup-chart span:nth-child(4) { height: 78%; } .show-mockup-chart span:nth-child(5) { height: 46%; } .show-mockup-stats { display: grid; gap: 0.45rem; } .show-mockup-stats span { height: 26px; border-radius: 9px; display: block; } .show-mockup-stats span:nth-child(1) { background: linear-gradient(135deg, #2b2f36, #1e232b); } .show-mockup-stats span:nth-child(2) { background: linear-gradient(135deg, #5a6270, #454b56); } .show-mockup-stats span:nth-child(3) { background: linear-gradient(135deg, #7fc46a, #69a955); } .show-mockup-kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; height: 84px; } .show-mockup-kanban span { border-radius: 8px; background: #eef0f3; } .show-mockup-kanban span:nth-child(2), .show-mockup-kanban span:nth-child(4) { background: #d8dee6; } .pricing-grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; } .pricing-grid.single { grid-template-columns: minmax(0, 760px); justify-content: center; } .price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; box-shadow: var(--shadow); position: relative; display: flex; flex-direction: column; gap: 0.35rem; } .price-card.featured { border-color: rgba(244, 180, 0, 0.65); transform: translateY(-12px) scale(1.02); box-shadow: 0 16px 32px rgba(255, 106, 0, 0.18); z-index: 2; } .price-ribbon { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: calc(100% - 2.2rem); text-align: center; margin: 0; border-radius: 0 0 999px 999px; background: linear-gradient(135deg, #ff8a3d, #ff6a00); color: #ffffff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.58rem 0.45rem 0.52rem; } .plan { margin: 0; color: var(--primary-dark); font-weight: 700; } .price-card.featured .plan { margin-top: 1.5rem; } .price { margin: 0.25rem 0; font-size: 2rem; font-weight: 800; } .price-copy { margin: 0 0 1rem; color: var(--muted); } .price-card ul { margin: 0 0 1rem; padding: 0 0 0 1rem; color: var(--muted); flex: 1; } .price-card .btn, .price-card .btn-outline { width: 100%; min-height: 46px; padding: 0.72rem 1rem; } .faq-list { display: grid; gap: 0.9rem; max-width: 800px; margin: 0 auto; } .faq-list details { border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 0.9rem 1rem; box-shadow: 0 8px 22px rgba(31, 35, 41, 0.1); } .faq-list summary { cursor: pointer; font-weight: 600; } .faq-list p { margin: 0.65rem 0 0; color: var(--muted); } .cta { padding-top: 0; } .cta-wrap { text-align: center; border-radius: 24px; background: linear-gradient(145deg, #2b2f36, #1e232b); color: #fff; padding: 2.6rem 1.2rem; box-shadow: 0 18px 38px rgba(31, 35, 41, 0.28); } .cta-wrap p { color: rgba(255, 255, 255, 0.87); max-width: 65ch; margin: 0.7rem auto 1.2rem; } .site-footer { position: relative; margin-top: 2.2rem; padding: 4.2rem 0 2.2rem; overflow: hidden; background: #fff; color: var(--text); border-top: 1px solid var(--line); } .footer-cta { position: relative; z-index: 1; text-align: center; max-width: 760px; margin: 0 auto 2rem; } .footer-cta h2 { margin: 0; font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; } .footer-cta p { color: var(--muted); max-width: 64ch; margin: 0.85rem auto 1.3rem; } .footer-cta .btn { background: linear-gradient(135deg, #ff6a00, #ff8a3d); color: #ffffff; } .footer-cta .btn:hover { box-shadow: 0 9px 20px rgba(255, 106, 0, 0.36); } .site-footer::before { content: ""; position: absolute; top: -64px; left: -6%; width: 112%; height: 108px; background: transparent; border-radius: 0 0 50% 50% / 0 0 84% 84%; pointer-events: none; } .site-footer::after { content: none; } .footer-grid { border-top: 1px solid var(--line); padding-top: 1.15rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; position: relative; z-index: 1; } .brand-footer { margin: 0; display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; color: var(--text); text-transform: none; letter-spacing: -0.01em; } .footer-logo { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); } .footer-links { display: flex; gap: 1rem; color: var(--muted); } .footer-links a { color: inherit; font-weight: 500; transition: opacity 0.15s ease; } .footer-link-button { appearance: none; border: 0; padding: 0; margin: 0; background: transparent; color: inherit; font: inherit; font-weight: 500; cursor: pointer; transition: opacity 0.15s ease; } .footer-links a:hover { opacity: 0.82; } .footer-link-button:hover { opacity: 0.82; } .cookie-consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 120; max-width: 720px; margin: 0 auto; border: 1px solid var(--line); border-radius: 16px; background: #ffffff; box-shadow: 0 20px 38px rgba(31, 35, 41, 0.26); padding: 1rem; } .cookie-consent-title { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 700; color: var(--primary-dark); } .cookie-consent-copy { margin: 0; color: var(--muted); font-size: 0.92rem; } .cookie-consent-copy a { text-decoration: underline; text-underline-offset: 2px; } .cookie-consent-actions { margin-top: 0.85rem; display: flex; gap: 0.6rem; flex-wrap: wrap; } body.has-cookie-consent { padding-bottom: 9rem; } .btn { display: inline-flex; justify-content: center; align-items: center; gap: 0.4rem; border: 1px solid transparent; border-radius: 12px; background: linear-gradient(135deg, #ff6a00 0%, #ff8a3d 100%); color: #fff; font-weight: 700; letter-spacing: 0.01em; min-height: 42px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, filter 0.15s ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(255, 106, 0, 0.28); filter: saturate(1.05); } .btn:active { transform: translateY(0); } .btn-sm { min-height: 36px; padding: 0.56rem 1rem; font-size: 0.89rem; } .btn-lg { min-height: 46px; padding: 0.75rem 1.25rem; font-size: 0.98rem; } .btn-ghost { background: transparent; border-color: var(--line); } .btn-outline { background: #fff; color: var(--primary-dark); border-color: var(--line); } .btn-outline:hover { background: #eef0f3; } .btn-block { width: 100%; } .btn:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } @media (max-width: 990px) { .section { padding: 4.8rem 0; } main > .section + .section { padding-top: 5.2rem; } #features { padding-top: 4.2rem; } #showcase, #pricing { padding-top: 5.4rem; } #faq { padding-top: 4.8rem; } .hero-grid, .pricing-grid, .showcase-grid, .showcase-row { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .stats { margin-top: -2.5rem; } .hero::after { bottom: -108px; height: 196px; } .section-showcase::before { top: -102px; height: 200px; } .site-header { position: static; } .nav { gap: 0.65rem; padding: 0.68rem 0; } .brand { gap: 0.4rem; font-size: 1.05rem; } .brand-logo { width: 24px; height: 24px; } .nav-links { display: none; } .site-header .btn.btn-sm { min-height: 38px; padding: 0.45rem 0.9rem; font-size: 0.88rem; } .header-actions { gap: 0.45rem; } .lang-switch { padding: 0.18rem; } .lang-btn { min-width: 30px; height: 26px; font-size: 0.72rem; } .hero-card { transform: none; } body.taste-subtle .price-card.featured, body.taste-dramatic .price-card.featured { transform: none; } .deco-plus, .deco-wave { opacity: 0.5; } .price-card.featured { transform: none; } .showcase-row-reverse .shot-card, .showcase-row-reverse .showcase-copy { order: initial; } .shot-image { height: 248px; transform: none; box-shadow: 0 10px 22px rgba(31, 35, 41, 0.18); } .shot-card { min-height: 282px; } .shot-card::before { left: 14%; right: 14%; bottom: -12px; height: 18px; } .site-footer { padding-top: 5rem; } .site-footer::before { top: -52px; height: 84px; } } @media (max-width: 620px) { .section { padding: 4.4rem 0; } main > .section + .section { padding-top: 4.8rem; } #features { padding-top: 3.9rem; } #showcase, #pricing { padding-top: 5rem; } .hero { padding-top: 3.8rem; padding-bottom: 4.9rem; } .eyebrow { margin-bottom: 0.65rem; font-size: 0.73rem; } .hero h1 { font-size: clamp(1.8rem, 8.6vw, 2.7rem); line-height: 1.08; } .hero-copy { margin: 0.85rem 0 1.2rem; } .hero-actions { flex-direction: column; gap: 0.6rem; width: 100%; } .hero-actions .btn { width: 100%; justify-content: center; } .hero::after { bottom: -86px; height: 156px; } .section-showcase::before { top: -82px; height: 164px; } .stats-grid { grid-template-columns: 1fr; } .hero-meta { display: grid; gap: 0.4rem; margin-top: 0.9rem; } .hero-meta-item { width: fit-content; font-size: 0.82rem; padding: 0.34rem 0.56rem 0.34rem 0.4rem; } .hero-meta-icon { width: 1.08rem; height: 1.08rem; } .nav { gap: 0.45rem; padding: 0.58rem 0; } .brand { font-size: 0.92rem; gap: 0.34rem; } .brand-logo { width: 21px; height: 21px; } .site-header .btn.btn-sm { min-height: 36px; padding: 0.38rem 0.78rem; font-size: 0.82rem; } .header-actions { gap: 0.35rem; } .lang-switch { padding: 0.15rem; } .lang-btn { min-width: 28px; height: 24px; font-size: 0.68rem; } .cookie-consent { left: 0.7rem; right: 0.7rem; bottom: 0.7rem; padding: 0.9rem; } .cookie-consent-actions .btn { width: 100%; } body.has-cookie-consent { padding-bottom: 12rem; } .shot-image { height: 232px; } .feature-list { grid-template-columns: 1fr; } .feature-list .feature-item:last-child:nth-child(odd) { grid-column: auto; } .shot-card { min-height: 258px; padding: 0.2rem 0 0.45rem; } section[id], #cta { scroll-margin-top: 16px; } }