body { font-family: Nunito Sans, Helvetica, Arial, sans-serif } {} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } @media (max-width: 639px) { .global-style-vtw69z6b2 { background-image: url("https://images.groovetech.io/mOTYDauoV7CI8UXM6NZl-Hmhp5ILMNL4puNkyUmnl9A/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzL2Y1OTk2YWI5LTcxMmMtNGRjNy1hNTUyLWJhYWFkNjdhZTYwZi8xNzAxODAzNTkyX01va3VwUENXZWI1RGFzQ29tcHJvbWlzby5wbmc.webp");background-size: cover;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;width: null;height: auto;max-width: null;z-index: auto;background-position-x: 50%;background-position-y: 50%;min-height: 50px;position: relative;background-repeat-x: no-repeat;background-repeat-y: no-repeat; } } @media (max-width: 767px) and (min-width: 640px) { .global-style-vtw69z6b2 { background-image: url("https://images.groovetech.io/mOTYDauoV7CI8UXM6NZl-Hmhp5ILMNL4puNkyUmnl9A/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzL2Y1OTk2YWI5LTcxMmMtNGRjNy1hNTUyLWJhYWFkNjdhZTYwZi8xNzAxODAzNTkyX01va3VwUENXZWI1RGFzQ29tcHJvbWlzby5wbmc.webp");background-size: cover;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;width: null;height: auto;max-width: null;z-index: auto;background-position-x: 50%;background-position-y: 50%;min-height: 50px;position: relative;background-repeat-x: no-repeat;background-repeat-y: no-repeat; } } @media (max-width: 991px) and (min-width: 768px) { .global-style-vtw69z6b2 { background-image: url("https://images.groovetech.io/mOTYDauoV7CI8UXM6NZl-Hmhp5ILMNL4puNkyUmnl9A/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzL2Y1OTk2YWI5LTcxMmMtNGRjNy1hNTUyLWJhYWFkNjdhZTYwZi8xNzAxODAzNTkyX01va3VwUENXZWI1RGFzQ29tcHJvbWlzby5wbmc.webp");background-size: cover;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;width: null;height: auto;max-width: null;z-index: auto;background-position-x: 50%;background-position-y: 50%;min-height: 50px;position: relative;background-repeat-x: no-repeat;background-repeat-y: no-repeat; } } @media (max-width: 1199px) and (min-width: 992px) { .global-style-vtw69z6b2 { background-image: url("https://images.groovetech.io/mOTYDauoV7CI8UXM6NZl-Hmhp5ILMNL4puNkyUmnl9A/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzL2Y1OTk2YWI5LTcxMmMtNGRjNy1hNTUyLWJhYWFkNjdhZTYwZi8xNzAxODAzNTkyX01va3VwUENXZWI1RGFzQ29tcHJvbWlzby5wbmc.webp");background-size: cover;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;width: null;height: auto;max-width: null;z-index: auto;background-position-x: 50%;background-position-y: 50%;min-height: 50px;position: relative;background-repeat-x: no-repeat;background-repeat-y: no-repeat; } } @media (min-width: 1200px) { .global-style-vtw69z6b2 { background-image: url("https://images.groovetech.io/mOTYDauoV7CI8UXM6NZl-Hmhp5ILMNL4puNkyUmnl9A/rs:fit:0:0:0/g:no:0:0/c:0:0/aHR0cHM6Ly9hc3NldHMuZ3Jvb3ZlYXBwcy5jb20vaW1hZ2VzL2Y1OTk2YWI5LTcxMmMtNGRjNy1hNTUyLWJhYWFkNjdhZTYwZi8xNzAxODAzNTkyX01va3VwUENXZWI1RGFzQ29tcHJvbWlzby5wbmc.webp");background-size: cover;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;width: null;height: auto;max-width: null;z-index: auto;background-position-x: 50%;background-position-y: 50%;min-height: 50px;position: relative;background-repeat-x: no-repeat;background-repeat-y: no-repeat; } } :root { --violet: #7f77dd; --deep-violet: #3c3489; --soft-violet: #afa9ec; --green: #1d9e75; --gold: #ba7517; --paper: #fff3fb; --pink: #c21b6f; --berry: #94184d; --blush: #ffe3f0; --blue: #378add; --night: #2b1746; --ink: #24142d; --cream: #fff8fd; --muted: rgba(255, 243, 251, .74); --line: rgba(255, 243, 251, .18); --shadow: 0 30px 100px rgba(42, 14, 50, .42); --wrap: min(1180px, calc(100% - 40px)); --radius: 8px; --nav: 76px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--paper); background: radial-gradient(860px 540px at 74% 10%, rgba(194, 27, 111, .38), transparent 62%), radial-gradient(680px 420px at 10% 76%, rgba(175, 169, 236, .28), transparent 62%), radial-gradient(520px 320px at 88% 82%, rgba(255, 227, 240, .2), transparent 64%), linear-gradient(158deg, #5a287d 0%, var(--night) 48%, #160d24 100%); line-height: 1.55; overflow-x: hidden; } body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .08; background-image: linear-gradient(rgba(255, 255, 255, .7) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .7) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(#000, transparent 78%); } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 50% 34%, transparent 0 18%, rgba(12, 10, 28, .16) 62%, rgba(7, 10, 20, .38) 100%); } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; } :focus-visible { outline: 3px solid rgba(175, 169, 236, .8); outline-offset: 3px; } .wrap { width: var(--wrap); margin: 0 auto; } .topbar { position: fixed; inset: 0 0 auto; z-index: 90; border-bottom: 1px solid rgba(255, 227, 240, .14); background: rgba(36, 20, 45, .72); backdrop-filter: blur(18px); } .nav { min-height: var(--nav); display: flex; align-items: center; justify-content: space-between; gap: 22px; } .logo { display: inline-flex; flex-direction: column; gap: 3px; line-height: 1; } .logo strong { font-family: "Playfair Display", Georgia, serif; font-size: 28px; } .logo span { color: rgba(248, 246, 255, .64); font-size: 9.5px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; } .menu { display: flex; align-items: center; gap: 24px; color: rgba(248, 246, 255, .82); font-size: 14px; font-weight: 800; } .menu a:not(.btn):hover { color: var(--soft-violet); } .menu-toggle { display: none; } .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 26px; border: 1px solid transparent; border-radius: var(--radius); overflow: hidden; font-weight: 900; line-height: 1; transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease; } .btn:hover { transform: translateY(-2px); } .btn-primary { color: #fff; background: linear-gradient(135deg, var(--pink), var(--violet) 55%, var(--deep-violet)); box-shadow: 0 18px 48px rgba(194, 27, 111, .32); } .btn-primary::after { content: ""; position: absolute; inset: -60% auto -60% -80%; width: 54%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .48), transparent); transition: left .72s ease; } .btn-primary:hover::after { left: 120%; } .btn-ghost { color: var(--paper); border-color: rgba(248, 246, 255, .22); background: rgba(255, 255, 255, .07); } .btn-ghost:hover { border-color: rgba(255, 227, 240, .75); background: rgba(194, 27, 111, .16); } .stage { position: relative; min-height: 100svh; padding: calc(var(--nav) + 34px) 0 38px; overflow: hidden; } .stage::before { content: "JENIFER"; position: absolute; left: 50%; top: 86px; transform: translateX(-50%); z-index: 0; width: 100%; color: rgba(248, 246, 255, .095); font-size: clamp(78px, 15vw, 210px); font-weight: 900; line-height: .78; letter-spacing: -.08em; text-align: center; white-space: nowrap; text-shadow: 0 18px 42px rgba(0, 0, 0, .28); } .stage::after { content: "PROGRaMARTE.TS"; position: absolute; right: 18px; top: 180px; z-index: 1; writing-mode: vertical-rl; color: rgba(255, 227, 240, .28); font-size: 13px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; } .stage-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .92fr minmax(280px, .64fr) .92fr; grid-template-areas: "intro person process" "trust person calendar"; gap: 22px; align-items: end; min-height: calc(100svh - var(--nav) - 90px); } .panel { position: relative; z-index: 3; min-width: 0; border: 1px solid rgba(248, 246, 255, .14); border-radius: 10px; overflow: hidden; background: linear-gradient(145deg, rgba(255, 255, 255, .1), transparent 34%), linear-gradient(180deg, rgba(70, 32, 91, .6), rgba(36, 20, 45, .46)); box-shadow: 0 26px 82px rgba(0, 0, 0, .24); backdrop-filter: blur(10px) saturate(1.08); } .panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(90deg, rgba(255, 255, 255, .1), transparent 22%, transparent 78%, rgba(255, 255, 255, .05)), radial-gradient(420px 220px at 18% 0%, rgba(255, 227, 240, .17), transparent 62%); opacity: .7; } .panel > * { position: relative; z-index: 1; } .panel h1, .panel h2, .panel h3, .panel p, .panel span { text-shadow: 0 2px 12px rgba(0, 0, 0, .28); } .panel h1, .panel h2, .panel h3, .calendar-head h2, .close h2 { margin: 0; font-family: Inter, system-ui, sans-serif; line-height: 1.02; letter-spacing: -.035em; text-transform: uppercase; } .kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; color: var(--soft-violet); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; } .kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; } .intro { grid-area: intro; z-index: 5; align-self: center; padding: 30px; } .intro h1 { margin-bottom: 12px; color: var(--paper); font-size: clamp(42px, 5.8vw, 74px); } .role { margin: 0 0 22px; color: rgba(248, 246, 255, .76); font-size: 16px; font-weight: 850; letter-spacing: .02em; } .intro p { margin: 0 0 22px; color: rgba(248, 246, 255, .76); font-size: 15.5px; } .actions { display: flex; flex-wrap: wrap; gap: 12px; } .person { grid-area: person; position: relative; z-index: 2; min-height: clamp(720px, 84vh, 860px); display: grid; align-items: end; justify-items: center; pointer-events: none; } .person picture { position: relative; z-index: 2; display: grid; justify-items: center; height: clamp(690px, 84vh, 900px); } .person img { position: relative; z-index: 2; width: auto; height: 100%; max-width: none; object-fit: contain; filter: drop-shadow(0 34px 48px rgba(0, 0, 0, .38)); } .person-ring { position: absolute; z-index: 2; right: -28px; top: 242px; width: 180px; height: 180px; border-radius: 50%; border: 1px dashed rgba(248, 246, 255, .28); color: rgba(248, 246, 255, .46); font-size: 11px; font-weight: 900; letter-spacing: .18em; text-align: center; text-transform: uppercase; display: grid; place-items: center; } .process { grid-area: process; z-index: 5; align-self: center; padding: 28px; } .process h2 { margin-bottom: 22px; color: var(--paper); font-size: clamp(29px, 4vw, 45px); } .step { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid rgba(248, 246, 255, .12); } .step-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--green), var(--deep-violet)); font-weight: 950; } .step h3 { margin-bottom: 5px; color: var(--blush); font-size: 15px; letter-spacing: .02em; } .step p { margin: 0; color: rgba(248, 246, 255, .72); font-size: 13.7px; } .process-note { margin-top: 18px; color: var(--paper); font-size: 14px; font-weight: 850; } .trust { grid-area: trust; z-index: 5; padding: 26px; } .trust h2 { margin-bottom: 16px; color: var(--paper); font-size: clamp(28px, 4vw, 40px); } .metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; } .metric { padding: 14px; border: 1px solid rgba(248, 246, 255, .1); border-radius: 8px; background: rgba(255, 255, 255, .055); } .metric strong { display: block; color: var(--blush); font-size: 24px; line-height: 1; } .metric span { color: rgba(248, 246, 255, .7); font-size: 12px; font-weight: 800; } .tags { display: flex; flex-wrap: wrap; gap: 8px; } .tags span { padding: 7px 10px; border-radius: 999px; color: rgba(248, 246, 255, .82); background: rgba(194, 27, 111, .16); border: 1px solid rgba(194, 27, 111, .3); font-size: 12px; font-weight: 800; } .calendar-card { grid-area: calendar; z-index: 5; align-self: stretch; display: grid; align-content: end; padding: 28px; background: linear-gradient(145deg, rgba(255, 243, 251, .96), rgba(255, 227, 240, .78)), radial-gradient(420px 210px at 10% 0%, rgba(194, 27, 111, .16), transparent 62%); color: var(--ink); } .calendar-card h2 { margin-bottom: 12px; color: var(--berry); font-size: clamp(29px, 4vw, 46px); } .calendar-card p { margin-bottom: 18px; color: #39435f; font-size: 15px; font-weight: 700; } .status { display: inline-flex; align-items: center; gap: 9px; width: fit-content; margin-bottom: 14px; padding: 8px 12px; border-radius: 999px; color: var(--berry); background: rgba(194, 27, 111, .1); border: 1px solid rgba(194, 27, 111, .22); font-size: 12px; font-weight: 900; } .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 5px rgba(194, 27, 111, .12); } .calendar-section { position: relative; z-index: 6; padding: 34px 0 70px; } .calendar-shell { overflow: hidden; border: 1px solid rgba(248, 246, 255, .18); border-radius: 12px; background: rgba(255, 243, 251, .98); box-shadow: var(--shadow); } .calendar-head { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; padding: 34px 36px 20px; color: var(--ink); background: radial-gradient(620px 280px at 18% 0%, rgba(255, 227, 240, .55), transparent 62%), var(--paper); } .calendar-head h2 { margin: 0 0 8px; color: var(--berry); font-size: clamp(31px, 4vw, 52px); } .calendar-head p { margin: 0; color: #5b6382; font-weight: 600; } .calendly-frame { padding: 14px; background: linear-gradient(135deg, rgba(60, 52, 137, .11), rgba(194, 27, 111, .14)), var(--paper); } .calendly-box { position: relative; overflow: hidden; border: 1px solid rgba(16, 20, 35, .08); border-radius: 8px; background: #fff; } .calendly-inline-widget { min-width: 320px; height: 1120px; background: #fff; } .noscript { margin: 0; padding: 22px; color: var(--ink); background: #fff; text-align: center; font-weight: 700; } .noscript a { color: var(--berry); text-decoration: underline; text-underline-offset: 4px; } .calendly-loader { position: absolute; inset: 0; z-index: 30; display: grid; place-items: start center; padding: 86px 22px 22px; color: var(--deep-violet); background: radial-gradient(420px 240px at 50% 12%, rgba(255, 227, 240, .56), transparent 62%), linear-gradient(180deg, rgba(255, 243, 251, .96), rgba(255, 248, 253, .92)); text-align: center; transition: opacity .35s ease, visibility .35s ease; pointer-events: none; } .calendly-box.is-loaded .calendly-loader { opacity: 0; visibility: hidden; } .loader-card { max-width: 430px; padding: 28px 26px; border: 1px solid rgba(194, 27, 111, .28); border-radius: 10px; background: rgba(255, 255, 255, .72); box-shadow: 0 18px 44px rgba(16, 20, 35, .1); backdrop-filter: blur(10px); } .coffee { display: inline-block; margin-bottom: 14px; font-size: 42px; transform-origin: 50% 80%; animation: coffee-wiggle 1.35s ease-in-out infinite; } .loader-card strong { display: block; margin-bottom: 8px; font-size: 23px; line-height: 1.05; letter-spacing: -.03em; text-transform: uppercase; } .loader-card p { margin: 0; color: #5b6382; font-size: 14.5px; font-weight: 700; } @keyframes coffee-wiggle { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-5px) rotate(-8deg); } 55% { transform: translateY(0) rotate(6deg); } 75% { transform: translateY(-2px) rotate(-3deg); } } .close { position: relative; z-index: 6; padding: 34px 0 54px; } .close-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 30px; border: 1px solid rgba(248, 246, 255, .12); border-radius: 10px; overflow: hidden; background: linear-gradient(145deg, rgba(255, 255, 255, .08), transparent 34%), radial-gradient(520px 260px at 10% 0%, rgba(194, 27, 111, .24), transparent 64%), rgba(36, 20, 45, .48); box-shadow: var(--shadow); backdrop-filter: blur(10px) saturate(1.08); } .close h2 { margin: 0 0 8px; color: var(--paper); font-size: clamp(27px, 3.6vw, 46px); } .close p { margin: 0; color: rgba(248, 246, 255, .72); font-weight: 700; } .close a:not(.btn) { color: var(--blush); text-decoration: underline; text-underline-offset: 4px; } .footer { padding: 38px 0 46px; border-top: 1px solid rgba(248, 246, 255, .1); background: rgba(36, 20, 45, .9); color: rgba(248, 246, 255, .68); } .footer-grid { display: flex; justify-content: space-between; align-items: center; gap: 26px; } .footer p { margin: 11px 0 0; font-size: 14px; } .footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px 20px; color: var(--blush); font-size: 14px; font-weight: 800; } .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: none; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(36, 20, 45, .94); border-top: 1px solid rgba(194, 27, 111, .34); backdrop-filter: blur(14px); } .mobile-cta .btn { width: 100%; min-height: 50px; } [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, .8, .3, 1); } [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { .person-ring { animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-8px) rotate(-7deg); } } } @media (min-width: 1081px) { .person { grid-column: 1 / -1; grid-row: 1 / 3; position: relative; top: -110px; justify-self: center; width: 100%; } .person img { transform: translateY(-25%) scale(.63); } } @media (min-width: 1081px) and (max-width: 1440px) { .stage { padding-top: calc(var(--nav) + 26px); } .stage-grid { grid-template-columns: minmax(300px, .96fr) minmax(230px, .5fr) minmax(300px, .96fr); gap: 18px; min-height: calc(100svh - var(--nav) - 74px); } .intro, .process, .trust, .calendar-card { padding: 24px; } .intro h1 { font-size: clamp(42px, 4.8vw, 64px); } .role, .intro p { font-size: 14.5px; } .process h2, .trust h2, .calendar-card h2 { font-size: clamp(28px, 3.35vw, 39px); } .step { grid-template-columns: 38px 1fr; gap: 12px; padding: 13px 0; } .person { min-height: clamp(640px, 78vh, 760px); } .person picture { height: clamp(620px, 78vh, 760px); } .person-ring { right: -12px; top: 210px; width: 150px; height: 150px; font-size: 9.5px; } } @media (min-width: 1081px) and (max-width: 1366px) { .stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "intro process" "trust calendar"; align-items: stretch; } .intro, .process, .trust, .calendar-card { align-self: stretch; } .person { position: absolute; grid-area: 1 / 1 / 3 / 3; inset: -96px 0 auto; justify-self: center; width: min(42vw, 500px); min-height: 0; height: min(76vh, 720px); z-index: 2; opacity: .92; transform: none; } .person picture { height: 100%; } .person img { transform: translateY(-25%) scale(.63); } .person-ring { display: none; } } @media (max-width: 1080px) { .stage-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "person" "process" "trust" "calendar"; min-height: 0; } .person { min-height: 0; max-width: 100%; overflow: hidden; padding: 8px 0 2px; } .person picture { width: min(340px, 52vw); height: auto; } .person img { width: 100%; height: auto; transform: none; } .person-ring { display: none; } .intro h1 { font-size: clamp(38px, 5.4vw, 58px); } } @media (max-width: 780px) { :root { --nav: 68px; } .wrap { width: min(100% - 32px, 1180px); } .logo strong { font-size: 23px; } .logo span { font-size: 8px; letter-spacing: .13em; } .menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(175, 169, 236, .4); border-radius: 8px; color: var(--paper); background: rgba(255, 255, 255, .08); } .menu-toggle span, .menu-toggle::before, .menu-toggle::after { content: ""; width: 20px; height: 2px; border-radius: 999px; background: currentColor; transition: transform .22s ease, opacity .18s ease; } .menu-toggle::before { transform: translateY(-7px); } .menu-toggle::after { transform: translateY(7px); } .topbar.is-menu-open .menu-toggle span { opacity: 0; } .topbar.is-menu-open .menu-toggle::before { transform: translateY(2px) rotate(45deg); } .topbar.is-menu-open .menu-toggle::after { transform: translateY(-2px) rotate(-45deg); } .menu { position: absolute; top: calc(100% + 10px); left: 16px; right: 16px; display: grid; gap: 6px; padding: 12px; border: 1px solid rgba(175, 169, 236, .28); border-radius: 8px; background: rgba(36, 20, 45, .98); box-shadow: 0 24px 52px rgba(0, 0, 0, .32); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease, visibility .22s ease; } .topbar.is-menu-open .menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .menu a:not(.btn) { padding: 12px 14px; border-radius: 8px; background: rgba(255, 255, 255, .06); } .menu .btn { display: none; } .stage { min-height: auto; padding: calc(var(--nav) + 34px) 0 28px; overflow: hidden; } .stage::before { top: 88px; font-size: clamp(64px, 20vw, 120px); white-space: normal; } .stage::after { display: none; } .stage-grid { gap: 16px; } .intro, .process, .trust, .calendar-card { padding: 22px; } .actions .btn { width: 100%; } .person { min-height: 420px; z-index: 1; } .person picture { width: min(350px, 100%); } .person img { transform: translateY(8px); } .metrics { grid-template-columns: 1fr; } .calendar-head, .close-inner { grid-template-columns: 1fr; padding: 24px 22px; } .calendly-frame { padding: 8px; } .calendly-inline-widget { height: 1080px; } .calendly-loader { padding-top: 64px; } .footer { padding-bottom: 96px; } .footer-grid { flex-direction: column; align-items: flex-start; } .footer-links { justify-content: flex-start; } .mobile-cta { display: block; } } @media (max-width: 420px) { .wrap { width: min(100% - 24px, 1180px); } .logo strong { font-size: 21px; } .logo span { max-width: 190px; line-height: 1.25; } .intro h1 { font-size: clamp(36px, 14vw, 54px); } .process h2, .trust h2, .calendar-card h2, .calendar-head h2, .close h2 { font-size: clamp(27px, 10vw, 40px); } .panel, .calendar-shell, .close-inner { border-radius: 8px; } .calendly-loader { padding: 46px 14px 16px; } .loader-card strong { font-size: 20px; } .coffee { font-size: 36px; } }