/* ============================================================ Prime Nodes — shared LP design system Used by all vertical landing pages: /coach/, /insegnanti/, /personaltrainer/, /fotografi/, /psicologi/, /yoga/, /tatuatori/, /toelettatori/, /fisioterapisti/ (IT and EN variants under //en/) Each LP overrides only --vp-accent and --vp-orb-1 inline in . ============================================================ */ :root { --color-eggshell: #fdfcfc; --color-powder: #f5f3f1; --color-card: #ffffff; --color-surface-dark: #0c0a09; --color-obsidian: #0c0a09; --color-ink: #292524; --color-stone: #4e4e4e; --color-gravel: #777169; --color-pebble: #a8a29e; --color-chalk: #e7e5e4; --color-chalk-strong: #d6d3d1; --color-chalk-soft: #f0efed; --color-marsh: #3d5a52; --color-marsh-soft: #e8efec; --color-marsh-deep: #2b403a; --color-orb-mint: #a7e5d3; --color-orb-peach: #f4c5a8; --color-orb-lavender: #c8b8e0; --color-orb-sky: #a8c8e8; --color-orb-rose: #e8b8c4; --vp-accent: var(--color-marsh); --vp-accent-soft: var(--color-marsh-soft); --vp-orb-1: rgba(167,229,211,0.95); --bg: var(--color-eggshell); --fg: var(--color-obsidian); --fg-2: var(--color-stone); --fg-3: var(--color-gravel); --border: var(--color-chalk); --accent: var(--vp-accent); --font-display: "Instrument Serif", "Times New Roman", serif; --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace; --fs-eyebrow: 11px; --fs-body: 16px; --fs-body-sm: 14px; --shadow-inset-hairline: inset 0 0 0 0.5px rgba(0,0,0,0.075); --shadow-2: 0 8px 24px -8px rgba(12,10,9,0.12), 0 1px 2px rgba(12,10,9,0.06); --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-entrance: 720ms; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { overflow-x: hidden; } a { color: inherit; text-decoration: none; } ::selection { background: var(--color-obsidian); color: #fff; } .topnav { position: sticky; top: 0; z-index: 50; background: rgba(253,252,252,0.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); } .topnav-inner { max-width: 1280px; margin: 0 auto; height: 64px; padding: 0 32px; display: flex; align-items: center; gap: 32px; } .brand { display: flex; align-items: center; gap: 10px; color: var(--color-obsidian); } .brand svg { width: 22px; height: 22px; } .brand-name { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; line-height: 1; } .brand-vertical { font-family: var(--font-sans); font-size: 12px; color: var(--color-gravel); margin-left: 2px; letter-spacing: 0.04em; text-transform: uppercase; } .topnav-menu { display: flex; gap: 28px; flex: 1; } .topnav-menu a { font-size: 14px; color: var(--color-stone); transition: color 180ms var(--ease-standard); } .topnav-menu a:hover { color: var(--color-obsidian); } .topnav-actions { display: flex; align-items: center; gap: 14px; } .lang-switch { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gravel); padding: 6px 10px; border-radius: 9999px; box-shadow: var(--shadow-inset-hairline); } .lang-switch:hover { color: var(--color-obsidian); } .cta-pill { font-size: 14px; font-weight: 500; color: #fff; background: var(--color-obsidian); padding: 9px 18px; border-radius: 9999px; line-height: 1; transition: transform 180ms var(--ease-standard), background 180ms var(--ease-standard); } .cta-pill:hover { background: var(--color-ink); transform: translateY(-1px); } .hero { position: relative; overflow: hidden; background: var(--color-eggshell); padding: 96px 24px 88px; min-height: calc(100vh - 64px); display: flex; align-items: center; } .orb { position: absolute; pointer-events: none; border-radius: 50%; z-index: 0; } .orb-1 { left: -200px; top: -60px; width: 720px; height: 720px; background: radial-gradient(circle, var(--vp-orb-1) 0%, rgba(167,229,211,0.35) 50%, rgba(167,229,211,0) 100%); } .orb-2 { right: -240px; top: 40px; width: 760px; height: 760px; background: radial-gradient(circle, rgba(244,197,168,0.85) 0%, rgba(244,197,168,0.3) 50%, rgba(244,197,168,0) 100%); } .orb-3 { left: 32%; bottom: -340px; width: 820px; height: 820px; background: radial-gradient(circle, rgba(200,184,224,0.8) 0%, rgba(200,184,224,0.28) 50%, rgba(200,184,224,0) 100%); } .orb-4 { right: 8%; top: 38%; width: 460px; height: 460px; background: radial-gradient(circle, rgba(232,184,196,0.7) 0%, rgba(232,184,196,0.2) 55%, rgba(232,184,196,0) 100%); } .orb-5 { left: 6%; bottom: 18%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(168,200,232,0.65) 0%, rgba(168,200,232,0.2) 55%, rgba(168,200,232,0) 100%); } .hero-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 0 32px; text-align: center; animation: fadeUp var(--dur-entrance) var(--ease-standard) both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 9999px; background: rgba(255,255,255,0.72); box-shadow: var(--shadow-inset-hairline); font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gravel); margin-bottom: 32px; } .eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vp-accent); } .headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 8.4vw, 96px); letter-spacing: -0.025em; line-height: 1.02; color: var(--color-obsidian); margin: 0 0 28px; } .headline em { font-style: italic; color: var(--color-stone); } .subhead { font-family: var(--font-sans); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: var(--color-stone); max-width: 680px; margin: 0 auto 36px; } .cta-row { display: flex; justify-content: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .cta-primary { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 16px; font-weight: 500; color: #fff; background: var(--color-obsidian); padding: 15px 30px; border-radius: 9999px; line-height: 1; transition: transform 200ms var(--ease-standard), background 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 24px -8px rgba(12,10,9,0.35); } .cta-primary:hover { background: var(--color-ink); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 14px 32px -10px rgba(12,10,9,0.42); } .cta-primary .arrow { display: inline-block; transition: transform 200ms var(--ease-standard); } .cta-primary:hover .arrow { transform: translateX(3px); } .cta-ghost { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 16px; font-weight: 500; color: var(--color-obsidian); background: rgba(255,255,255,0.7); padding: 14px 24px; border-radius: 9999px; line-height: 1; box-shadow: var(--shadow-inset-hairline); transition: background 200ms var(--ease-standard), transform 200ms var(--ease-standard); } .cta-ghost:hover { background: #fff; transform: translateY(-2px); } .trust-line { font-family: var(--font-sans); font-size: var(--fs-body-sm); color: var(--color-gravel); margin: 8px auto 44px; max-width: 720px; line-height: 1.55; } .trust-line .dot { display: inline-block; margin: 0 8px; color: var(--color-pebble); } .hero-divider { width: 64px; height: 1px; background: var(--color-chalk-strong); margin: 0 auto 28px; opacity: 0.6; } .cat-strip-wrap { display: flex; justify-content: center; } .cat-strip { display: inline-flex; justify-content: center; flex-wrap: wrap; gap: 4px; padding: 5px; background: rgba(255,255,255,0.55); border-radius: 9999px; box-shadow: var(--shadow-inset-hairline); } .cat-pill { display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 9999px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--color-stone); transition: background 200ms var(--ease-standard), color 200ms var(--ease-standard); cursor: default; } .cat-pill:hover { background: #fff; color: var(--color-obsidian); } .section { position: relative; padding: 120px 24px 100px; } .section--alt { background: var(--color-powder); border-top: 1px solid var(--color-chalk-soft); border-bottom: 1px solid var(--color-chalk-soft); } .section-inner { max-width: 1100px; margin: 0 auto; } .section-head { text-align: center; margin: 0 auto 64px; max-width: 760px; } .section-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 9999px; background: rgba(255,255,255,0.85); box-shadow: var(--shadow-inset-hairline); font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gravel); margin-bottom: 24px; } .section-eyebrow .eyebrow-dot { background: var(--vp-accent); } .section-headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 5.6vw, 64px); letter-spacing: -0.022em; line-height: 1.05; color: var(--color-obsidian); margin: 0 0 20px; } .section-headline em { font-style: italic; color: var(--color-stone); } .section-subhead { font-family: var(--font-sans); font-size: clamp(15px, 1.35vw, 18px); line-height: 1.55; color: var(--color-stone); max-width: 580px; margin: 0 auto; } /* ============================================================ Demo — photorealistic WhatsApp mockup (shared by all verticals) Pure HTML/CSS — no images, no JS. Avatar auto-tints via --vp-accent. ============================================================ */ .phone-wrap { display: flex; justify-content: center; margin: 0 auto; max-width: 348px; } .phone-frame { position: relative; width: 100%; border-radius: 44px; padding: 10px; background: linear-gradient(180deg, #1f1f1f 0%, #2a2a2a 50%, #141414 100%); box-shadow: 0 28px 56px -16px rgba(12,10,9,0.32), 0 8px 16px -4px rgba(12,10,9,0.14), inset 0 1.5px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.4); } .phone-screen { position: relative; border-radius: 34px; overflow: hidden; background: #E5DDD5; display: flex; flex-direction: column; min-height: 620px; } .chat-statusbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 18px 4px; background: #054640; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; font-size: 12px; font-weight: 500; } .chat-statusbar .status-icons { display: inline-flex; align-items: center; gap: 4px; } .chat-statusbar svg { display: block; } .chat-header { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 4px; background: #008069; color: #fff; } .chat-back { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .chat-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--vp-accent); background: linear-gradient(135deg, color-mix(in srgb, var(--vp-accent), #000 38%) 0%, var(--vp-accent) 100%); display: flex; align-items: center; justify-content: center; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 20px; color: #fff; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); } .chat-meta { flex: 1; min-width: 0; margin-left: 2px; } .chat-name { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif; font-size: 15.5px; font-weight: 500; color: #fff; letter-spacing: -0.1px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-status { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; font-size: 12px; color: rgba(255,255,255,0.85); margin-top: 1px; } .chat-actions { display: inline-flex; align-items: center; gap: 16px; color: #fff; flex-shrink: 0; } .chat-actions svg { display: block; } .chat-body { position: relative; flex: 1; padding: 12px 8px 12px; display: flex; flex-direction: column; gap: 4px; background-color: #E5DDD5; background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 240px; } .chat-bubble { position: relative; max-width: 78%; padding: 6px 52px 8px 9px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.35; border-radius: 8px; color: #111b21; box-shadow: 0 1px 0.5px rgba(11,20,26,0.13); word-wrap: break-word; margin-top: 4px; } .chat-bubble--in { background: #ffffff; align-self: flex-start; border-top-left-radius: 0; } .chat-bubble--in::before { content: ""; position: absolute; top: 0; left: -7px; width: 8px; height: 13px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; } .chat-bubble--out { background: #D9FDD3; align-self: flex-end; border-top-right-radius: 0; } .chat-bubble--out::before { content: ""; position: absolute; top: 0; right: -7px; width: 8px; height: 13px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; } .chat-bubble b { font-weight: 600; color: #111b21; } .chat-time { position: absolute; bottom: 3px; right: 7px; font-size: 10.5px; color: #667781; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; } .chat-tick { color: #53BDEB; font-size: 12px; letter-spacing: -3px; margin-left: 1px; } .chat-typing { position: relative; background: #ffffff; border-radius: 8px; border-top-left-radius: 0; padding: 10px 14px; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 1px 0.5px rgba(11,20,26,0.13); margin-top: 4px; } .chat-typing::before { content: ""; position: absolute; top: 0; left: -7px; width: 8px; height: 13px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; } .chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; animation: typing-bounce 1.4s ease-in-out infinite both; } .chat-typing span:nth-child(2) { animation-delay: 0.18s; } .chat-typing span:nth-child(3) { animation-delay: 0.36s; } @keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } } .chat-input { display: flex; align-items: center; gap: 6px; padding: 6px 6px 8px; background: #F0F2F5; } .chat-input-field { flex: 1; display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 22px; padding: 8px 10px; min-height: 36px; color: #54656f; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; font-size: 14px; } .chat-input-field svg { display: block; flex-shrink: 0; } .chat-input-placeholder { flex: 1; color: #8696a0; } .chat-input-mic { width: 38px; height: 38px; border-radius: 50%; background: #00A884; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .chat-input-mic svg { display: block; } .demo-caption { font-family: var(--font-sans); font-size: 12.5px; color: var(--color-stone); text-align: center; margin: 36px auto 0; font-style: italic; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 56px; } .step { position: relative; background: var(--color-card); border: 1px solid var(--color-chalk); border-radius: 16px; padding: 36px 30px 32px; transition: transform 240ms var(--ease-standard), box-shadow 240ms var(--ease-standard), border-color 240ms var(--ease-standard); } .step:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--color-chalk-strong); } .step-number { display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 56px; line-height: 1; color: var(--vp-accent); margin-bottom: 24px; letter-spacing: -0.025em; } .step-title { font-family: var(--font-sans); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--color-obsidian); margin: 0 0 12px; line-height: 1.2; } .step-body { font-family: var(--font-sans); font-size: 15px; line-height: 1.62; color: var(--color-stone); margin: 0; } .step-body strong { color: var(--color-obsidian); font-weight: 500; } .benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .benefit { background: var(--color-card); border: 1px solid var(--color-chalk); border-radius: 16px; padding: 28px 26px 26px; transition: transform 240ms var(--ease-standard), box-shadow 240ms var(--ease-standard), border-color 240ms var(--ease-standard); } .benefit:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--color-chalk-strong); } .benefit-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--vp-accent-soft); color: var(--vp-accent); margin-bottom: 18px; } .benefit-icon svg { display: block; } .benefit-title { font-family: var(--font-sans); font-size: 18px; font-weight: 500; letter-spacing: -0.005em; color: var(--color-obsidian); margin: 0 0 10px; line-height: 1.3; } .benefit-body { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.6; color: var(--color-stone); margin: 0; } .benefit-body strong { color: var(--color-obsidian); font-weight: 500; } .final-cta { background: var(--color-surface-dark); color: #fff; padding: 120px 24px 80px; text-align: center; position: relative; } .final-cta-inner { max-width: 760px; margin: 0 auto; } .eyebrow--inverse { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.12); } .eyebrow--inverse .eyebrow-dot { background: #b7e0d2; } .final-cta-headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 6vw, 72px); letter-spacing: -0.025em; line-height: 1.04; color: #fff; margin: 0 0 22px; } .final-cta-headline em { font-style: italic; color: rgba(255,255,255,0.78); } .final-cta-subhead { font-family: var(--font-sans); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: rgba(255,255,255,0.72); max-width: 580px; margin: 0 auto 38px; } .cta-primary--light { color: var(--color-obsidian); background: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 28px -10px rgba(0,0,0,0.55); } .cta-primary--light:hover { background: var(--color-powder); transform: translateY(-2px); } .cta-secondary-line { font-family: var(--font-sans); font-size: 16px; color: rgba(255,255,255,0.72); margin: 26px 0 0; } .cta-secondary-line a { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,0.35); } .cta-secondary-line a:hover { text-decoration-color: rgba(255,255,255,0.85); } .final-cta-trust { font-family: var(--font-sans); font-size: 14.5px; color: rgba(255,255,255,0.68); margin: 64px auto 0; max-width: 620px; line-height: 1.6; } .site-footer { background: var(--color-surface-dark); color: rgba(255,255,255,0.72); padding: 70px 24px 40px; text-align: center; border-top: 1px solid rgba(255,255,255,0.06); } .wordmark-flourish { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(64px, 15vw, 180px); line-height: 0.92; letter-spacing: -0.04em; color: rgba(255,255,255,0.92); margin: 0 0 44px; white-space: nowrap; overflow: hidden; } .site-footer-links { display: flex; justify-content: center; gap: 28px; margin-bottom: 22px; flex-wrap: wrap; } .site-footer-links a { font-family: var(--font-sans); font-size: 13px; color: rgba(255,255,255,0.78); } .site-footer-links a:hover { color: rgba(255,255,255,0.95); } .site-footer-fine { font-family: var(--font-sans); font-size: 12px; color: rgba(255,255,255,0.62); margin: 0; line-height: 1.5; } :focus-visible { outline: 2px solid var(--vp-accent); outline-offset: 3px; border-radius: 2px; } .cta-primary:focus-visible, .cta-pill:focus-visible, .cta-ghost:focus-visible { outline-offset: 4px; } @media (max-width: 1024px) and (min-width: 861px) { .benefits { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .topnav-inner { padding: 0 20px; gap: 16px; } .topnav-menu, .brand-vertical { display: none; } .cta-pill { padding: 8px 14px; font-size: 13px; } .hero { padding: 48px 16px 64px; min-height: auto; } .hero-inner { padding: 0 8px; } .headline { font-size: clamp(30px, 8.4vw, 60px); margin-bottom: 20px; line-height: 1.04; } .eyebrow { margin-bottom: 22px; font-size: 10px; padding: 5px 12px; } .subhead { font-size: 15.5px; margin-bottom: 26px; } .cta-primary, .cta-ghost { padding: 14px 26px; font-size: 15px; } .trust-line { font-size: 13px; margin-bottom: 36px; } .cat-pill { padding: 6px 13px; font-size: 12.5px; } .section { padding: 72px 16px 64px; } .section-head { margin-bottom: 40px; } .section-subhead { font-size: 15px; } .phone-wrap { max-width: 296px; } .phone-frame { border-radius: 38px; padding: 8px; } .phone-screen { border-radius: 30px; min-height: 560px; } .chat-statusbar { padding: 5px 14px 3px; font-size: 11px; } .chat-header { padding: 6px 6px 6px 2px; gap: 8px; } .chat-back { width: 24px; height: 24px; } .chat-avatar { width: 34px; height: 34px; font-size: 18px; } .chat-name { font-size: 14.5px; } .chat-status { font-size: 11px; } .chat-actions { gap: 12px; } .chat-bubble { font-size: 13px; padding: 6px 48px 7px 9px; } .chat-time { font-size: 10px; } .chat-input-field { font-size: 13px; padding: 7px 9px; min-height: 32px; } .chat-input-mic { width: 34px; height: 34px; } .demo-caption { font-size: 12px; margin-top: 28px; } .steps, .benefits { grid-template-columns: 1fr; gap: 14px; margin-bottom: 36px; } .step { padding: 28px 22px 26px; } .step-number { font-size: 44px; margin-bottom: 18px; } .step-title { font-size: 20px; } .step-body { font-size: 14.5px; } .benefit { padding: 24px 22px 22px; } .benefit-title { font-size: 17px; } .benefit-body { font-size: 14px; } .final-cta { padding: 80px 16px 56px; } .final-cta-headline { font-size: clamp(34px, 9.5vw, 50px); margin-bottom: 18px; } .final-cta-subhead { font-size: 15.5px; margin-bottom: 30px; } .cta-secondary-line { font-size: 15px; } .final-cta-trust { font-size: 13.5px; margin-top: 48px; } .site-footer { padding: 56px 16px 32px; } .wordmark-flourish { font-size: clamp(52px, 16vw, 100px); margin-bottom: 32px; } .site-footer-links { gap: 20px; } .orb-1 { left: -32vw; top: -16vw; width: 60vw; height: 60vw; } .orb-2 { right: -36vw; top: -2vw; width: 52vw; height: 52vw; } .orb-3 { left: -10vw; bottom: -42vw; width: 78vw; height: 78vw; } .orb-4 { right: -25vw; top: 38%; width: 36vw; height: 36vw; } .orb-5 { left: -18vw; top: 64%; width: 32vw; height: 32vw; } } @media (max-width: 480px) { .trust-line .dot { display: none; } .trust-line { font-size: 12.5px; } } @media (prefers-reduced-motion: reduce) { .hero-inner, .cta-primary, .cta-primary .arrow, .cat-pill, .cta-pill, .cta-ghost, .orb, .step, .benefit, .chat-typing span { animation: none !important; transition: none !important; } }