:root { --bg: #f7f8fa; --bg-rgb: 247, 248, 250; --surface: #ffffff; --text: #1f2329; --muted: #5b616b; --line: #d8dee6; --primary: #2b2f36; --primary-dark: #1e232b; --accent: #f4b400; --accent-soft: #fff4cc; --ok: #90c44f; --shadow: 0 14px 34px rgba(31, 35, 41, 0.14); --radius: 18px; --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: radial-gradient( 130% 85% at 10% -10%, rgba(244, 180, 0, 0.12), transparent 48% ), var(--bg); line-height: 1.55; } main { position: relative; overflow: hidden; background: radial-gradient( 120% 120% at 8% 18%, rgba(244, 180, 0, 0.05), rgba(244, 180, 0, 0) 62% ), radial-gradient( 110% 110% at 92% 72%, rgba(43, 47, 54, 0.04), rgba(43, 47, 54, 0) 70% ), var(--bg); } a { color: inherit; text-decoration: none; } section[id], #cta { scroll-margin-top: 96px; } .container { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; } .site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(10px); background: rgba(31, 35, 41, 0.95); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; color: #fff; position: relative; } .brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .brand-logo { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.35); } .nav-links { display: flex; align-items: center; gap: 1rem; } .nav-links a { color: rgba(255, 255, 255, 0.94); font-weight: 500; } .site-header .btn { background: linear-gradient(135deg, #e7d7b2 0%, #d8c39a 100%); color: #2b2a27; border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 3px 8px rgba(102, 88, 58, 0.16); white-space: nowrap; } .site-header .btn:hover { box-shadow: 0 5px 12px rgba(102, 88, 58, 0.22); 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: radial-gradient( 120% 68% at 50% -8%, rgba(244, 180, 0, 0.32) 0%, rgba(119, 98, 49, 0.22) 32%, rgba(43, 47, 54, 0.96) 64% ), linear-gradient(180deg, #30353d 0%, #1e232b 72%); color: #fff; padding: 6.5rem 0 6.4rem; } .hero::before { content: ""; position: absolute; top: -66px; left: -6%; width: 112%; height: 124px; background: rgba(255, 255, 255, 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: -132px; width: 120%; height: 240px; background: radial-gradient( 120% 100% at 50% 0%, rgba(var(--bg-rgb), 1) 38%, rgba(var(--bg-rgb), 0.9) 66%, rgba(var(--bg-rgb), 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.5; z-index: 1; } .shape-1 { width: 360px; height: 360px; background: radial-gradient(circle at 30% 30%, #fff4cc, #f4b400); top: -120px; right: -110px; } .shape-2 { width: 280px; height: 280px; background: radial-gradient(circle at 40% 30%, #eef0f3, #aab2bf); bottom: -145px; left: -80px; } .hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2rem; align-items: center; } .eyebrow { margin: 0 0 0.75rem; color: #fff1bd; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.77rem; font-weight: 700; } .eyebrow.center { text-align: center; color: var(--primary-dark); } .hero h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; letter-spacing: -0.02em; } .hero h1 span { color: #fff4cc; } .hero-copy { color: rgba(255, 255, 255, 0.88); margin: 1rem 0 1.5rem; max-width: 58ch; } .hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } .hero-actions .btn { background: linear-gradient(135deg, #f2dfba 0%, #dbc091 100%); border-color: rgba(255, 241, 189, 0.55); color: #2b2a27; box-shadow: 0 8px 20px rgba(120, 98, 62, 0.26); } .hero-actions .btn-ghost { background: rgba(255, 244, 204, 0.08); border-color: rgba(255, 241, 189, 0.72); color: #fff4cc; box-shadow: none; } .hero-actions .btn-ghost:hover { background: rgba(255, 244, 204, 0.16); } .hero-meta { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.05rem; position: relative; z-index: 3; } .hero-meta-item { display: inline-flex; align-items: center; gap: 0.45rem; color: rgba(255, 255, 255, 0.92); font-size: 0.86rem; font-weight: 600; line-height: 1; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.08); border-radius: 999px; padding: 0.4rem 0.62rem 0.4rem 0.45rem; 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, 244, 204, 0.26); color: #fff4cc; 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.2rem 1.2rem 1.05rem; box-shadow: 0 18px 34px rgba(31, 35, 41, 0.2); border: 1px solid #d8dee6; transform: translateY(-8px); } .card-head { display: inline-flex; align-items: center; gap: 0.45rem; border-radius: 999px; background: #eef0f3; color: var(--primary); font-size: 0.82rem; 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.85rem 0; font-size: 1.15rem; } .hero-card ul { margin: 0 0 1.2rem; 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.9rem 0 0.3rem; padding: 0.8rem; 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: -2.9rem; position: relative; z-index: 4; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .stat-card { border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); padding: 1.1rem; text-align: center; } .stat-value { margin: 0; font-size: 1.6rem; font-weight: 800; color: var(--primary-dark); } .stat-label { margin: 0.3rem 0 0; color: var(--muted); } .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-grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } .feature-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 10px 24px rgba(31, 35, 41, 0.1); padding: 1.15rem; } .feature-card h3 { margin: 0 0 0.5rem; } .feature-card p { margin: 0; color: var(--muted); } .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: none; } .shot-image { width: 100%; height: auto; min-height: 280px; max-height: 520px; border-radius: 0; object-fit: contain; object-position: center center; display: block; position: relative; z-index: 1; box-shadow: none; transform-origin: center center; transition: transform 0.28s ease, filter 0.28s ease; filter: saturate(1.02) contrast(1.01); } .shot-top, .shot-middle, .shot-bottom { transform: rotateY(8deg) rotateX(2.8deg) rotateZ(1deg) scale(0.98); } .shot-middle { transform: rotateY(-8deg) rotateX(1.8deg) rotateZ(-0.9deg) scale(0.98); } .shot-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); 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; } .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(-18px) scale(1.035); box-shadow: 0 26px 44px rgba(31, 35, 41, 0.24); 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, #f4b400, #d89d00); color: #1e232b; 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: 6rem 0 2.8rem; overflow: hidden; background: linear-gradient(145deg, #2b2f36 0%, #252a31 55%, #1e232b 100%); color: #fff; } .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: rgba(255, 255, 255, 0.9); max-width: 64ch; margin: 0.85rem auto 1.3rem; } .footer-cta .btn { background: linear-gradient(135deg, #f4b400, #d89d00); color: #1e232b; } .footer-cta .btn:hover { box-shadow: 0 9px 20px rgba(244, 180, 0, 0.36); } .site-footer::before { content: ""; position: absolute; top: -64px; left: -6%; width: 112%; height: 108px; background: var(--bg); border-radius: 0 0 50% 50% / 0 0 84% 84%; pointer-events: none; } .site-footer::after { content: ""; position: absolute; inset: 0; background: radial-gradient( 70% 90% at 8% 36%, rgba(255, 255, 255, 0.12), transparent 62% ), radial-gradient( 70% 90% at 92% 72%, rgba(255, 255, 255, 0.1), transparent 64% ); pointer-events: none; } .footer-grid { border-top: 1px solid rgba(255, 255, 255, 0.24); 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: #fff; text-transform: uppercase; letter-spacing: 0.06em; } .footer-logo { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.45); } .footer-links { display: flex; gap: 1rem; color: rgba(255, 255, 255, 0.9); } .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 #d8dee6; 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: 999px; background: linear-gradient(135deg, #2b2f36 0%, #1e232b 100%); color: #fff; font-weight: 700; letter-spacing: 0.01em; min-height: 46px; 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 9px 20px rgba(31, 35, 41, 0.35); filter: saturate(1.05); } .btn:active { transform: translateY(0); } .btn-sm { min-height: 40px; padding: 0.56rem 1rem; font-size: 0.89rem; } .btn-lg { min-height: 52px; padding: 0.85rem 1.7rem; font-size: 0.98rem; } .btn-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.48); } .btn-outline { background: transparent; color: var(--primary-dark); border-color: #b9c2cf; } .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, .feature-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; } .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 { min-height: 248px; max-height: 460px; 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; } .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 { min-height: 232px; max-height: 420px; } .shot-card { min-height: 258px; padding: 0.2rem 0 0.45rem; } section[id], #cta { scroll-margin-top: 16px; } }