:root { font-family: "Poppins", system-ui, sans-serif; font-size: 15px; color: #0f172a; background-color: #fefefe; --bg: #fefefe; --muted: #5c6471; --border: #e6e9ef; --shadow: 0 25px 60px rgba(15, 23, 42, 0.12); --ink: #0f172a; --accent: #2563eb; --hero-h: 100svh; /* Driven by Motion's scroll() in scripts.js; 0 at the top, 1 once the hero has scrolled away. */ --scroll-progress: 0; } * { box-sizing: border-box; } body { margin: 0; min-height: 100svh; background: var(--bg); } /* ---------------------------------------------------------------- utilities */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 50%; top: 0; transform: translate(-50%, -150%); z-index: 100; padding: 0.75rem 1.5rem; border-radius: 0 0 12px 12px; background: #0f172a; color: #fff; font-weight: 600; text-decoration: none; transition: transform 0.2s ease; } .skip-link:focus { transform: translate(-50%, 0); } /* A single, consistent focus ring. Keyboard only, so it never shows on click. */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .page { min-height: 100svh; background: radial-gradient(circle at 5% 20%, rgba(37, 99, 235, 0.15), transparent 40%), radial-gradient(circle at 95% 5%, rgba(245, 158, 11, 0.08), transparent 50%), linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%); } /* -------------------------------------------------------------- entrance gate Content is visible by default so the page is complete without JavaScript. The inline script in adds .js, which hands control to Motion; if the runtime never initialises, scripts.js (or the head's safety timer) removes .js again and everything falls back to visible. */ .js [data-animate] { opacity: 0; will-change: opacity, transform; } /* ------------------------------------------------------------------- hero */ .hero { height: var(--hero-h); width: 100%; display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem 4rem; text-align: center; overflow: hidden; perspective: 1400px; position: sticky; top: 0; z-index: 10; transition: opacity 0.35s ease; } /* The hero stays stuck behind the whole page. Sections with an opaque background hide it, but .personas is deliberately translucent — which let the spent hero's scroll chevron and glows bleed through over the testimonials. Once it has been scrolled past, take it out of the picture entirely rather than only dropping its z-index. */ .hero--inactive { pointer-events: none; z-index: 0; opacity: 0; } .hero__glow { position: absolute; border-radius: 50%; filter: blur(30px); opacity: 0.6; animation: glow-drift 12s ease-in-out infinite alternate; pointer-events: none; } .hero__glow--one { width: 360px; height: 360px; background: radial-gradient(circle, rgba(37, 99, 235, 0.35), transparent 60%); top: -120px; right: -80px; } .hero__glow--two { width: 280px; height: 280px; background: radial-gradient(circle, rgba(245, 158, 11, 0.35), transparent 60%); bottom: -90px; left: -100px; animation-duration: 9s; } .hero__content { max-width: 640px; z-index: 1; transform-origin: center; } .hero__logo { width: 88px; height: auto; margin-bottom: 1.5rem; } .hero__strap { font-size: 0.95rem; letter-spacing: 0.3rem; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; } .hero__strap-highlight { position: relative; display: inline-block; padding: 0 0.2rem; background-image: linear-gradient(90deg, rgba(130, 157, 22, 0.45), rgba(130, 157, 22, 0.7)); background-repeat: no-repeat; background-position: left 88%; background-size: 0% 0.42em; transition: background-size 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .hero__strap-highlight.is-animating { background-size: 100% 0.42em; } .hero__heading { font-size: clamp(2.75rem, 5vw, 5.5rem); font-weight: 700; font-family: "DM Serif Text", "Poppins", system-ui, sans-serif; margin: 0 0 1.25rem; line-height: 1.15; } .hero__hurricane { font-family: "Hurricane", cursive; font-size: clamp(3rem, 6vw, 6.5rem); display: inline-block; letter-spacing: 0; line-height: 1; /* Hurricane's descenders overshoot its box; this stops them colliding with the lead paragraph underneath. */ margin-bottom: 0.15em; } .hero__lead { font-size: 1.05rem; line-height: 1.8; color: var(--muted); margin: 0; } .hero__arrow { position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; z-index: 1; color: inherit; } .hero__arrow span { display: block; width: 12px; height: 12px; border-bottom: 2px solid #111827; border-right: 2px solid #111827; transform: rotate(45deg); animation: arrow-pulse 1.5s ease infinite; } /* Short and landscape viewports: shrink the hero so the copy and the scroll cue stop fighting for the same pixels. */ @media (max-height: 620px) { .hero { padding: 1.25rem 1.5rem 3rem; } .hero__logo { width: 56px; margin-bottom: 0.75rem; } .hero__heading { font-size: clamp(1.75rem, 4.2vw, 2.5rem); margin-bottom: 0.65rem; } .hero__hurricane { font-size: clamp(2rem, 5vw, 3rem); } .hero__lead { font-size: 0.95rem; line-height: 1.6; } .hero__strap { margin-bottom: 0.5rem; } } /* Ultrawide: the 640px column left the hero looking empty past ~1800px. */ @media (min-width: 1800px) { .hero__content { max-width: 860px; } } /* ------------------------------------------------------------ floating nav */ .floating-nav { position: fixed; top: 0; left: 50%; /* Never wider than the viewport. The old min-width:320px with no max-width pushed the logo and the CTA off both edges on every phone. */ width: max-content; max-width: calc(100vw - 1.5rem); transform: translate(-50%, -140%); padding: 0.6rem 1.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(15, 23, 42, 0.1); box-shadow: 0 25px 45px rgba(15, 23, 42, 0.2); display: flex; align-items: center; gap: 1rem; justify-content: space-between; opacity: 0; pointer-events: none; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease; z-index: 20; } .floating-nav.visible { transform: translate(-50%, 1rem); opacity: 1; pointer-events: auto; } .floating-nav__logo { width: 44px; height: 44px; flex: none; border-radius: 999px; display: grid; place-items: center; background: transparent; } .floating-nav__logo img { width: 32px; height: 32px; object-fit: contain; } .floating-nav__items { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .floating-nav__items a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 0.35rem; font-size: 0.9rem; font-weight: 500; color: #111827; text-decoration: none; white-space: nowrap; border-radius: 999px; } .floating-nav__items .floating-nav__cta { background: #111827; color: #fff; padding: 0 1rem; min-height: 40px; border-radius: 999px; font-weight: 600; } .floating-nav__items .floating-nav__cta i { color: #fff; } .floating-nav__items a i { font-size: 1.15rem; color: #111827; } /* Below ~880px the full labels cannot fit. Drop to icons, keep the CTA labelled, and keep every target at 44px. */ @media (max-width: 880px) { .floating-nav { gap: 0.5rem; padding: 0.5rem 0.75rem; } .floating-nav__items { gap: 0.25rem; } .floating-nav__items a:not(.floating-nav__cta) { width: 44px; padding: 0; justify-content: center; } .floating-nav__items a:not(.floating-nav__cta) span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .floating-nav__items .floating-nav__cta { padding: 0 0.85rem; font-size: 0.85rem; } } @media (max-width: 360px) { .floating-nav__logo { display: none; } .floating-nav__items .floating-nav__cta span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .floating-nav__items .floating-nav__cta { width: 44px; padding: 0; justify-content: center; } } /* -------------------------------------------------------------- highlights */ .section-title-highlight { position: relative; display: inline-block; padding: 0 0.15rem; background-image: linear-gradient(90deg, rgba(130, 157, 22, 0.4), rgba(130, 157, 22, 0.65)); background-repeat: no-repeat; background-position: left 88%; background-size: 0% 0.45em; transition: background-size 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .section-title-highlight.is-animating { background-size: 100% 0.45em; } /* ------------------------------------------------------------------ shared */ .eyebrow { text-transform: uppercase; letter-spacing: 0.4rem; font-size: 0.75rem; color: var(--muted); margin-bottom: 1rem; font-weight: 600; } .primary, .ghost { border-radius: 999px; padding: 0.8rem 1.75rem; font-size: 1rem; font-weight: 600; text-transform: none; font-family: "Poppins", system-ui, sans-serif; border: none; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .primary { background: #111827; color: #fff; } .ghost { background: #f4f5f7; color: #111827; border: 1px solid rgba(15, 23, 42, 0.08); } .primary:hover, .ghost:hover { transform: translateY(-2px); box-shadow: 0 10px 18px rgba(17, 24, 39, 0.2); } /* ----------------------------------------------------------------- legacy */ .legacy { position: relative; padding: 4rem clamp(1.5rem, 4vw, 4rem); background: #f6f7fb; /* Matches the sticky hero's height so it scrolls up over it. */ margin-top: var(--hero-h); } .legacy__intro { max-width: 820px; margin: 0 auto 2rem; text-align: center; } .legacy__intro h2 { margin: 0.35rem 0; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.15; } .legacy__intro p { color: var(--muted); line-height: 1.7; } .legacy__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1.5rem; max-width: 1100px; margin: 0 auto; } .legacy__card { background: #fff; border-radius: 24px; padding: 1.75rem; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 15px 30px rgba(15, 23, 42, 0.08); } .legacy__card h3 { font-size: 1.1rem; margin-top: 0; } .legacy__card p { color: var(--muted); line-height: 1.6; } .legacy__card ul, .legacy__card ol { margin: 0.5rem 0 0; padding-left: 1rem; color: #0f172a; line-height: 1.7; } .legacy__card ol li { margin-bottom: 0.35rem; } /* --------------------------------------------------------------- personas */ .personas { padding: 4rem clamp(1.5rem, 4vw, 4rem) 5rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(245, 247, 255, 0.6)); border-bottom: 1px solid rgba(15, 23, 42, 0.06); } .personas__header { max-width: 840px; margin: 0 auto 2.5rem; text-align: center; } .personas__header h2 { font-size: clamp(2rem, 3vw, 2.75rem); margin: 0.35rem 0 0.75rem; line-height: 1.15; } .personas__carousel { position: relative; max-width: 1200px; margin: 0 auto; display: grid; align-items: center; } .personas__track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-inline: 3.5rem; padding: 0.5rem 3.5rem 1.5rem; scrollbar-width: none; } .personas__track::-webkit-scrollbar { display: none; } /* Fade the card that peeks past the right edge instead of hard-clipping it. data-edge is maintained by scripts.js so the first and last cards are never fogged on the side they are flush against. */ @media (min-width: 1024px) { .personas__track[data-edge="start"], .personas__track[data-edge="middle"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 6rem), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 6rem), transparent 100%); } .personas__track[data-edge="middle"], .personas__track[data-edge="end"] { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4rem); mask-image: linear-gradient(to right, transparent 0, #000 4rem); } .personas__track[data-edge="middle"] { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4rem, #000 calc(100% - 6rem), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 4rem, #000 calc(100% - 6rem), transparent 100%); } } .persona-card { scroll-snap-align: center; min-width: min(980px, 92vw); } .persona__content { max-width: none; margin: 0; padding: 2rem; border-radius: 32px; background: #fff; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.05); display: grid; gap: 1.25rem; border: 1px solid rgba(15, 23, 42, 0.06); } .persona__label { text-transform: uppercase; letter-spacing: 0.4rem; color: var(--muted); font-size: 0.7rem; margin: 0; } .persona__content h3 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin: 0; line-height: 1.2; } .persona__grid { display: grid; /* min() keeps the 240px floor from exceeding the card's inner width on narrow phones — a bare minmax(240px, 1fr) forced the track wider than its own container at 320px and pushed the text past the card edge. */ grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1.5rem; } .persona__grid article { background: rgba(15, 23, 42, 0.02); border-radius: 20px; padding: 1.25rem; border: 1px solid rgba(15, 23, 42, 0.05); } .persona__grid h4 { text-transform: uppercase; letter-spacing: 0.25rem; font-size: 0.65rem; margin-top: 0; margin-bottom: 0.5rem; } .persona__grid ul { margin: 0; padding-left: 1rem; line-height: 1.6; color: var(--muted); } .persona__outcome { font-weight: 600; color: #0f111b; margin: 0; } .persona__plan { margin: 0; color: var(--muted); } .persona__plan a { display: inline-flex; align-items: center; /* 22px was under the WCAG 2.2 target-size floor. */ min-height: 28px; color: #1d4ed8; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(29, 78, 216, 0.4); } .persona__plan a:hover { border-bottom-color: #1d4ed8; } .personas__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(15, 23, 42, 0.1); background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; cursor: pointer; box-shadow: 0 12px 24px rgba(15, 23, 42, 0.15); transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; z-index: 2; } .personas__arrow i { font-size: 1.4rem; color: #111827; } .personas__arrow:hover:not(:disabled) { transform: translateY(-50%) scale(1.05); box-shadow: 0 16px 30px rgba(15, 23, 42, 0.2); } .personas__arrow:disabled { opacity: 0.35; cursor: default; box-shadow: none; } .personas__arrow--prev { left: 0; } .personas__arrow--next { right: 0; } /* The cards are tall enough on phones that vertically-centred arrows land hundreds of pixels below the fold. Dots carry the affordance instead. */ .personas__dots { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 1.5rem; } .personas__dot { width: 44px; height: 44px; padding: 0; border: none; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 50%; } .personas__dot::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 999px; background: rgba(15, 23, 42, 0.22); transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease; } .personas__dot[aria-selected="true"]::before { width: 24px; background: #0f172a; } @media (max-width: 640px) { .personas__track { padding: 0.5rem 1rem 1.25rem; scroll-padding-inline: 1rem; } /* 2rem of padding either side leaves too little room for the copy once the card is only ~245px wide. */ .persona__content { padding: 1.35rem; border-radius: 24px; gap: 1rem; } .persona__grid { gap: 1rem; } .persona__grid article { padding: 1rem; } .persona-card { min-width: calc(100vw - 5rem); } .personas__arrow { display: none; } } /* ---------------------------------------------------------------- pricing */ .pricing { padding: 4rem clamp(1.5rem, 4vw, 4rem) 5rem; background: #fdfdfd; } .pricing__intro { max-width: 840px; margin: 0 auto 4rem; text-align: center; } .pricing__intro h2 { font-size: clamp(2rem, 3vw, 2.75rem); margin-top: 0; margin-bottom: 0.75rem; line-height: 1.15; } .pricing__sub { color: var(--muted); line-height: 1.7; margin: 0; } /* One column, then straight to three. The old auto-fit rule produced two columns between 600 and 900px, which stranded the third card alone on a half-width row. */ .pricing__cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 0 auto 2.5rem; align-items: stretch; max-width: 1100px; } @media (min-width: 900px) { .pricing__cards { grid-template-columns: repeat(3, 1fr); } } .pricing__card { border-radius: 20px; background: #fff; padding: 1.75rem 1.5rem; border: 1px solid rgba(15, 23, 42, 0.1); display: flex; flex-direction: column; gap: 0.75rem; min-height: 260px; transition: transform 0.3s ease, box-shadow 0.3s ease; justify-content: space-between; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); } .pricing__card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12); } /* The accent card is the one being promoted ("Most popular"). */ .pricing__card--accent { border-color: rgba(15, 23, 42, 0.3); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18); position: relative; } .pricing__label { font-weight: 700; font-size: 1.1rem; line-height: 1; margin: 0 !important; } .pricing__tag { font-size: 0.8rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.18rem; line-height: 1; margin: 0 !important; margin-top: 8px !important; } .pricing__tag--pill { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 999px; background: rgba(17, 24, 39, 0.08); color: #0f172a; letter-spacing: 0.1rem; } .pricing__value { font-size: 2.6rem; font-weight: 700; margin: 0; } .pricing__value span { font-size: 0.95rem; font-weight: 500; margin-left: 0.35rem; color: #6b7280; } .pricing__meta { font-size: 0.95rem; color: #4b5563; margin-bottom: 0.25rem; line-height: 1.5; } .pricing__details { display: grid; font-size: 0.95rem; color: #0f172a; padding-top: 0.25rem; } .pricing__details p { margin: 0 !important; } .pricing__details strong { font-weight: 600; } .pricing__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; color: #0f172a; } .pricing__list li { position: relative; padding-left: 1.6rem; line-height: 1.5; font-size: 0.95rem; } .pricing__list li::before { content: "\e182"; font-family: "Phosphor"; font-weight: normal; font-style: normal; font-variant: normal; position: absolute; left: 0.25rem; top: 0.05rem; font-size: 1.05rem; color: #0f172a; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .pricing__button { margin-top: 0.75rem; width: 100%; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; text-decoration: none; } .pricing__downloads { display: grid; gap: 0.5rem; margin-top: 0.75rem; } .pricing__downloads .pricing__button { gap: 0.55rem; margin-top: 0; min-height: 42px; padding: 0.65rem 1rem; font-size: 0.9rem; } .pricing__downloads [hidden] { display: none !important; } .pricing__downloads .ph { flex: 0 0 auto; font-size: 1.1rem; } .pricing__download-hint { margin: 0 0 0.1rem; color: var(--muted); font-size: 0.78rem; text-align: center; } .pricing__download-toggle { justify-self: center; border: 0; padding: 0.25rem 0.4rem; background: transparent; color: #4b5563; font: inherit; font-size: 0.78rem; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; } .pricing__download-toggle:hover { color: #111827; } .pricing__download-toggle:focus-visible { border-radius: 4px; } .pricing__button:disabled { cursor: not-allowed; opacity: 0.55; } .pricing__button:disabled:hover { transform: none; box-shadow: none; } /* -------------------------------------------------------------------- CTA */ .cta { padding: 4rem clamp(1.5rem, 4vw, 4rem) 4.5rem; background: linear-gradient(180deg, #f6f7fb 0%, #ffffff 100%); border-top: 1px solid rgba(15, 23, 42, 0.05); } .cta__inner { max-width: 1100px; margin: 0 auto; background: #0f172a; color: #fff; border-radius: 28px; padding: clamp(1.75rem, 3vw, 2.75rem); display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 1.5rem; box-shadow: 0 24px 50px rgba(15, 23, 42, 0.2); } .cta__copy h2 { margin: 0.5rem 0 0.75rem; font-size: clamp(1.8rem, 3vw, 2.2rem); line-height: 1.2; } .cta__copy p { margin: 0; color: rgba(255, 255, 255, 0.82); line-height: 1.6; } .cta__eyebrow { text-transform: uppercase; letter-spacing: 0.3rem; font-size: 0.75rem; margin: 0; color: rgba(255, 255, 255, 0.7); } .cta__actions { display: grid; align-items: center; justify-content: stretch; align-content: center; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .cta__button { text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; } /* The panel is #0f172a and .primary is #111827 — a 1.01:1 contrast ratio, so the main call to action was an invisible rectangle. Invert both buttons for the dark panel and keep the hierarchy the right way round. */ .cta__actions .primary { background: #ffffff; color: #0f172a; } .cta__actions .primary:hover { background: #e8ebf2; } .cta__actions .ghost { background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.45); } .cta__actions .ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.7); } .cta__inner :focus-visible { outline-color: #fff; } /* ----------------------------------------------------------------- footer */ .footer { background: #0b1220; color: rgba(255, 255, 255, 0.75); padding: 3.5rem clamp(1.5rem, 4vw, 4rem) 2rem; } .footer__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2.5rem; } .footer__brand img { width: 40px; height: auto; /* The logo is dark ink artwork; lift it onto the dark ground. */ filter: brightness(0) invert(1); opacity: 0.9; } .footer__brand p { margin: 0.85rem 0 0; line-height: 1.6; max-width: 30ch; font-size: 0.9rem; } .footer__col h2 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.25rem; color: rgba(255, 255, 255, 0.55); margin: 0 0 1rem; font-weight: 600; } .footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; } .footer__col a { color: rgba(255, 255, 255, 0.8); text-decoration: none; font-size: 0.92rem; display: inline-flex; align-items: center; min-height: 32px; } .footer__col a:hover { color: #fff; text-decoration: underline; } .footer__legal { max-width: 1100px; margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); } .footer :focus-visible { outline-color: #fff; } /* ----------------------------------------------------------- back to top */ .back-to-top { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 56px; height: 56px; border-radius: 50%; border: none; background: #111827; color: #fff; display: grid; place-items: center; box-shadow: 0 20px 40px rgba(17, 24, 39, 0.35); opacity: 0; visibility: hidden; transform: scale(0.8); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); cursor: pointer; z-index: 22; } .back-to-top i { font-size: 1.4rem; color: #fff; display: block; } .back-to-top.show { opacity: 1; visibility: visible; transform: scale(1); } /* ------------------------------------------------------------------ misc */ table { width: 100%; border-collapse: collapse; min-width: 640px; } th, td { padding: 1rem 0.75rem; text-align: left; font-size: 0.95rem; border-bottom: 1px solid rgba(15, 23, 42, 0.05); } th { text-transform: uppercase; letter-spacing: 0.2rem; font-size: 0.75rem; color: var(--muted); } td:nth-child(n + 2) { font-weight: 500; } tbody tr:last-child th, tbody tr:last-child td { border-bottom: none; } @keyframes arrow-pulse { 0% { transform: translateY(0) rotate(45deg); opacity: 1; } 50% { transform: translateY(10px) rotate(45deg); opacity: 0.4; } 100% { transform: translateY(0) rotate(45deg); opacity: 1; } } @keyframes glow-drift { 0% { transform: translateY(0) translateX(0) scale(1); } 100% { transform: translateY(-20px) translateX(15px) scale(1.05); } } @media (max-width: 768px) { .hero__content { max-width: 90vw; } .hero__glow--one, .hero__glow--two { width: 220px; height: 220px; } .hero__glow--one { top: -70px; right: -40px; } .hero__glow--two { bottom: -70px; left: -60px; } th, td { padding: 0.9rem 0.6rem; } } @media (max-width: 640px) { .cta__inner { grid-template-columns: 1fr; } .back-to-top { width: 48px; height: 48px; bottom: 1rem; right: 1rem; } } /* --------------------------------------------------- reduced motion Honour the OS setting: hold every decorative animation still and let scripts.js skip the entrance choreography entirely. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .js [data-animate] { opacity: 1; } .hero__glow { animation: none; } .hero__arrow span { animation: none; } .personas__track { scroll-behavior: auto; } .section-title-highlight, .hero__strap-highlight { transition: none; } }