@font-face {
font-family: "Poppins";
src: url("/static/fonts/Poppins-Regular.woff2") format("woff2"), url("/static/fonts/Poppins-Regular.ttf") format("truetype");
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Poppins";
src: url("/static/fonts/Poppins-SemiBold.woff2") format("woff2"), url("/static/fonts/Poppins-SemiBold.ttf") format("truetype");
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: "Poppins";
src: url("/static/fonts/Poppins-Bold.woff2") format("woff2"), url("/static/fonts/Poppins-Bold.ttf") format("truetype");
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url("/static/fonts/Manrope-Variable.woff2") format("woff2"), url("/static/fonts/Manrope-Variable.ttf") format("truetype");
font-weight: 200 800;
font-display: swap;
}
:root {
--main: #4ecfaa;
--main-light: #7adcc0;
--secondary: #30355b;
--bg: #f5f7f7;
--surface: #fcfdfd;
--surface-tint: #e8f8f2;
--surface-deep: #e9ecf2;
--ink: var(--secondary);
--ink-soft: #5a5f7e;
--rule: #dcdfe8;
--accent: var(--main);
--accent-hover: var(--main-light);
--accent-ink: var(--main);
--on-accent: var(--secondary);
--shadow: 0 1px 2px rgb(48 53 91 / .06), 0 12px 32px -12px rgb(48 53 91 / .16);
--font-display: "Poppins", sans-serif;
--font-body: "Manrope", sans-serif;
--radius-lg: 16px;
--radius-sm: 10px;
--max-width: 1280px;
--gutter: clamp(1.25rem, 4vw, 3rem);
--section-space: clamp(4.5rem, 9vw, 8rem);
--header-height: 72px;
--ease: cubic-bezier(.16, 1, .3, 1);
color-scheme: light;
}
[data-theme="dark"] {
--bg: #161a33;
--surface: #1c2140;
--surface-tint: color-mix(in srgb, var(--main) 16%, #1c2140);
--surface-deep: #252a4d;
--ink: #eef0f7;
--ink-soft: #b3b7cf;
--rule: #30355b;
--accent: var(--main);
--accent-hover: var(--main-light);
--accent-ink: var(--main);
--on-accent: var(--secondary);
--shadow: 0 1px 2px rgb(0 0 0 / .3), 0 16px 40px -16px rgb(0 0 0 / .5);
color-scheme: dark;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-height) + 1rem);
}
body {
margin: 0;
color: var(--ink);
background: var(--bg);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.65;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
transition: background-color .3s var(--ease), color .3s var(--ease);
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button,
input {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
}
::selection {
color: var(--on-accent);
background: var(--accent-hover);
}
[hidden] {
display: none !important;
}
:focus-visible {
outline: 3px solid var(--accent-ink);
outline-offset: 3px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
}
h1,
h2,
h3,
p {
margin-top: 0;
}
h1,
h2,
h3 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.1;
letter-spacing: -.025em;
text-wrap: balance;
}
h1 {
font-size: clamp(2.4rem, 4.6vw, 4rem);
margin-bottom: 1.25rem;
}
h2 {
font-size: clamp(1.9rem, 3.4vw, 2.9rem);
margin-bottom: 1rem;
}
h3 {
font-size: 1.2rem;
letter-spacing: -.01em;
margin-bottom: .5rem;
}
p {
text-wrap: pretty;
}
.lead {
max-width: 58ch;
color: var(--ink-soft);
font-size: 1.125rem;
}
.accent-text {
color: var(--accent-ink);
}
.label {
display: inline-block;
margin-bottom: 1rem;
color: var(--accent-ink);
font-size: .8rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.container {
width: 100%;
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section {
padding-block: var(--section-space);
}
.section-head {
max-width: 44rem;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head > p {
max-width: 58ch;
margin-bottom: 0;
color: var(--ink-soft);
font-size: 1.075rem;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.skip-link {
position: fixed;
top: .75rem;
left: .75rem;
z-index: 100;
padding: .7rem 1rem;
color: var(--on-accent);
background: var(--accent);
border-radius: var(--radius-sm);
font-weight: 700;
transform: translateY(-160%);
transition: transform .2s var(--ease);
}
.skip-link:focus {
transform: translateY(0);
}
.button {
display: inline-flex;
align-items: center;
gap: .6rem;
min-height: 50px;
padding: .8rem 1.25rem;
border: 1px solid transparent;
border-radius: var(--radius-sm);
font-weight: 700;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.button svg,
.text-link svg {
width: 18px;
height: 18px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform .25s var(--ease);
}
.button:hover svg {
transform: translateX(3px);
}
.text-link .t-learn-chevron svg {
width: 16px;
height: 16px;
stroke-width: 2;
transition: none;
}
.button:active {
transform: translateY(1px);
}
.button-primary {
color: var(--on-accent);
background: var(--accent);
}
.button-primary:hover {
background: var(--accent-hover);
}
.button-secondary {
color: var(--ink);
border-color: var(--rule);
background: var(--surface);
}
.button-secondary:hover {
border-color: var(--ink-soft);
}
.text-link {
display: inline-flex;
align-items: center;
gap: .45rem;
color: var(--accent-ink);
font-weight: 700;
text-decoration: none;
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--bg) 88%, transparent);
border-bottom: 1px solid var(--rule);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.navigation {
display: flex;
align-items: center;
gap: 2rem;
height: var(--header-height);
}
.brand {
flex: none;
display: block;
}
.brand img {
width: 150px;
height: auto;
}
.brand .logo-dark,
[data-theme="dark"] .brand .logo-light {
display: none;
}
[data-theme="dark"] .brand .logo-dark {
display: block;
}
.nav-links {
display: flex;
align-items: center;
gap: 1.75rem;
margin-left: auto;
}
.nav-links > a:not(.button) {
color: var(--ink-soft);
font-size: .95rem;
font-weight: 600;
text-decoration: none;
transition: color .2s var(--ease);
}
.nav-links > a:not(.button):hover {
color: var(--ink);
}
.nav-links .button {
min-height: 42px;
padding: .55rem 1rem;
font-size: .95rem;
}
.nav-tools {
display: flex;
align-items: center;
gap: 1.25rem;
}
.menu-toggle {
display: none;
align-items: center;
gap: .6rem;
margin-left: auto;
padding: .5rem .8rem;
border: 1px solid var(--rule);
border-radius: var(--radius-sm);
background: var(--surface);
font-weight: 700;
}
.menu-toggle-lines {
display: grid;
gap: 5px;
width: 18px;
}
.menu-toggle-lines i {
display: block;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform .25s var(--ease);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-lines i:first-child {
transform: translateY(3.5px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-lines i:last-child {
transform: translateY(-3.5px) rotate(-45deg);
}
@media (max-width: 1000px) {
.menu-toggle {
display: inline-flex;
}
.nav-links {
position: absolute;
top: calc(var(--header-height) - 1px);
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: .5rem var(--gutter) 1.5rem;
background: var(--bg);
border-bottom: 1px solid var(--rule);
box-shadow: var(--shadow);
opacity: 0;
transform: translateY(-8px);
transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.nav-links.is-open {
opacity: 1;
transform: translateY(0);
}
.nav-links > a:not(.button) {
padding: .9rem 0;
border-bottom: 1px solid var(--rule);
font-size: 1.05rem;
}
.nav-tools {
justify-content: space-between;
padding-top: 1.25rem;
}
}
.navigation-compact .nav-links {
position: static;
flex-direction: row;
align-items: center;
gap: 1.5rem;
padding: 0;
background: none;
border: 0;
box-shadow: none;
opacity: 1;
transform: none;
}
@media (max-width: 1000px) {
.navigation-compact .nav-links > a:not(.button) {
display: none;
}
.navigation-compact .nav-tools {
padding-top: 0;
gap: .75rem;
}
}
@media (max-width: 560px) {
.brand img {
width: 124px;
}
.navigation-compact .nav-links .button {
display: none;
}
}
.theme-toggle {
display: inline-flex;
align-items: center;
gap: .6rem;
min-height: 44px;
padding: 0;
border: 0;
background: none;
color: var(--ink-soft);
font-size: .9rem;
font-weight: 600;
}
.theme-toggle:hover {
color: var(--ink);
}
.theme-toggle-track {
position: relative;
width: 40px;
height: 22px;
border: 1px solid var(--rule);
border-radius: 999px;
background: var(--surface-deep);
transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.theme-toggle-track .t-toggle-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--ink-soft);
transition: background-color .25s var(--ease);
}
.theme-toggle[aria-checked="true"] .theme-toggle-track {
background: var(--accent);
border-color: var(--accent);
}
.theme-toggle[aria-checked="true"] .theme-toggle-track .t-toggle-thumb {
background: var(--on-accent);
}
.photo {
position: relative;
margin: 0;
overflow: hidden;
border-radius: var(--radius-lg);
background: var(--surface-deep);
aspect-ratio: var(--ratio, 3 / 2);
}
.photo img {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
}
.photo[data-missing]::before {
content: attr(data-missing);
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 1rem;
color: var(--ink-soft);
font-size: .85rem;
text-align: center;
}
.photo-portrait {
--ratio: 4 / 5;
}
.photo-wide {
--ratio: 16 / 9;
}
.has-blur-bg {
--wash-angle: 100deg;
--wash-stop: 45%;
--wash-from: rgb(255 255 255 / .94);
--wash-mid: rgb(255 255 255 / .86);
--wash-to: rgb(255 255 255 / .92);
--wash-glow: rgb(78 207 170 / .14);
--wash-glow-size: 30% 45%;
--card-ink: var(--secondary);
--card-soft: #464b6c;
--ink-soft: var(--card-soft);
position: relative;
isolation: isolate;
overflow: hidden;
}
[data-theme="dark"] .has-blur-bg {
--wash-from: rgb(20 24 50 / .96);
--wash-mid: rgb(26 31 66 / .9);
--wash-to: rgb(40 40 78 / .96);
--wash-glow: rgb(78 207 170 / .1);
--wash-glow-size: 30% 45%;
--card-ink: #ffffff;
--card-soft: #d3d6e6;
}
.blur-bg {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.blur-bg img {
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(22px) saturate(1.15) brightness(1.2);
transform: scale(1.2);
}
[data-theme="dark"] .blur-bg img {
filter: blur(22px) saturate(1.5) brightness(.32);
}
.blur-bg::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(var(--wash-glow-size) at 100% 100%, var(--wash-glow), transparent 70%),
linear-gradient(var(--wash-angle), var(--wash-from) 0%, var(--wash-mid) var(--wash-stop), var(--wash-to) 100%);
}
.has-blur-bg :is(h1, h2, h3) {
color: var(--card-ink);
}
.has-blur-bg :is(.label, .service-tag) {
align-self: flex-start;
padding: .2rem .7rem;
border: 1px solid rgb(78 207 170 / .45);
border-radius: 999px;
background: rgb(78 207 170 / .16);
color: var(--card-ink) !important;
}
.has-blur-bg .text-link {
align-self: flex-start;
color: var(--card-ink);
}
.has-blur-bg .text-link .t-learn-chevron {
color: var(--main);
}
@media (max-width: 960px) {
.has-blur-bg {
--wash-angle: 180deg;
--wash-stop: 50%;
}
}
.icon-sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.icon {
display: inline-block;
flex: none;
width: 1.25em;
height: 1.25em;
overflow: visible;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: -.2em;
}
.icon-tile {
display: inline-grid;
flex: none;
place-items: center;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-sm);
background: var(--surface-tint);
color: var(--accent-ink);
}
.icon-tile .icon {
width: 1.3rem;
height: 1.3rem;
}
@media (prefers-reduced-motion: no-preference) {
.js-icons .icon {
stroke-dasharray: 1 1;
stroke-dashoffset: 1;
opacity: 0;
}
.js-icons .icon.is-drawn {
animation: icon-draw 1100ms var(--ease-smooth-out) var(--icon-delay, 0ms) both;
}
.js-icons .icon.is-ready {
stroke-dashoffset: 0;
opacity: 1;
}
.icon-beat.is-ready {
animation: icon-beat 2.8s var(--ease-in-out) infinite;
}
:is(a, button):focus-visible .icon.is-ready,
.js-icons .icon.is-ready.is-replay {
animation: icon-redraw 750ms var(--ease-smooth-out) both;
}
:is(a, button):focus-visible .icon-spin.is-ready,
.js-icons .icon-spin.is-ready.is-replay {
animation: icon-spin-once 900ms var(--ease-smooth-out) both;
}
@media (hover: hover) {
:is(a, button, li, tr, [data-icon-host]):hover .icon.is-ready {
animation: icon-redraw 750ms var(--ease-smooth-out) both;
}
:is(a, button, li, tr, [data-icon-host]):hover .icon-spin.is-ready {
animation: icon-spin-once 900ms var(--ease-smooth-out) both;
}
}
}
@keyframes icon-draw {
0% { stroke-dashoffset: 1; opacity: 0; }
12% { opacity: 1; }
100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes icon-redraw {
0% { stroke-dashoffset: 1; transform: scale(.88); }
55% { transform: scale(1.08); }
100% { stroke-dashoffset: 0; transform: scale(1); }
}
@keyframes icon-beat {
0%, 70%, 100% { transform: scale(1); }
78% { transform: scale(1.14); }
86% { transform: scale(.98); }
}
@keyframes icon-spin-once {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.cta-panel {
--ink: #ffffff;
--ink-soft: #d3d6e6;
--accent-ink: var(--main);
--surface-tint: rgb(78 207 170 / .16);
--rule: rgb(255 255 255 / .14);
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--radius-lg);
background: #161a33;
color: var(--ink);
box-shadow: 0 30px 60px -30px rgb(22 26 51 / .55);
}
.cta-panel :is(h2, h3) {
color: var(--ink);
}
.cta-photo {
position: absolute;
inset: 0;
z-index: -1;
}
.cta-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cta-photo::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(60% 90% at 0% 100%, rgb(78 207 170 / .24), transparent 70%),
linear-gradient(100deg, rgb(12 14 32 / .97) 0%, rgb(15 18 40 / .92) 45%, rgb(22 26 51 / .55) 100%);
}
.cta-kicker {
display: inline-flex;
align-items: center;
gap: .55rem;
margin: 0 0 1.25rem;
padding: .3rem .8rem;
border: 1px solid rgb(78 207 170 / .45);
border-radius: 999px;
background: rgb(78 207 170 / .14);
color: var(--ink);
font-size: .78rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.cta-dot {
position: relative;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--main);
}
.cta-button {
position: relative;
box-shadow: 0 10px 30px -10px rgb(78 207 170 / .8);
}
.cta-button:hover {
transform: translateY(-2px);
}
@media (prefers-reduced-motion: no-preference) {
.js-reveal .cta-panel[data-reveal] .cta-photo img {
transform: scale(1.1);
transition: transform 1.8s var(--ease-smooth-out);
}
.js-reveal .cta-panel[data-reveal].is-visible .cta-photo img {
transform: scale(1);
}
.cta-dot::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--main);
animation: cta-ping 2.4s var(--ease-out) infinite;
}
.cta-button::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
}
.cta-panel.is-visible .cta-button::after,
html:not(.js-reveal) .cta-button::after {
animation: cta-ring 1.6s var(--ease-out) 900ms 3;
}
}
@keyframes cta-ping {
from { transform: scale(1); opacity: .6; }
to { transform: scale(3); opacity: 0; }
}
@keyframes cta-ring {
from { box-shadow: 0 0 0 0 rgb(78 207 170 / .55); }
to { box-shadow: 0 0 0 16px rgb(78 207 170 / 0); }
}
@media (max-width: 860px) {
.cta-photo::after {
background:
radial-gradient(90% 60% at 0% 100%, rgb(78 207 170 / .22), transparent 70%),
linear-gradient(180deg, rgb(12 14 32 / .95) 0%, rgb(15 18 40 / .9) 60%, rgb(22 26 51 / .82) 100%);
}
}
@view-transition {
navigation: auto;
}
.page-progress {
position: fixed;
top: 0;
left: 0;
z-index: 200;
width: 100%;
height: 3px;
background: var(--main);
box-shadow: 0 0 12px rgb(78 207 170 / .7);
transform: scaleX(0);
transform-origin: left;
opacity: 0;
pointer-events: none;
}
.is-navigating .page-progress {
opacity: 1;
animation: page-progress 8s cubic-bezier(.1, .7, .2, 1) forwards;
}
@keyframes page-progress {
0% { transform: scaleX(0); }
10% { transform: scaleX(.35); }
100% { transform: scaleX(.92); }
}
.page-skeleton {
position: fixed;
inset: var(--header-height) 0 0;
z-index: 90;
overflow: hidden;
padding-top: clamp(2.5rem, 6vw, 5rem);
background: var(--bg);
opacity: 0;
visibility: hidden;
transition: opacity var(--reveal-dur) var(--reveal-ease), visibility 0s linear var(--reveal-dur);
}
.is-skeleton .page-skeleton {
opacity: 1;
visibility: visible;
transition: opacity var(--reveal-dur) var(--reveal-ease);
}
.page-skel {
--pulse-count: infinite;
position: relative;
inset: auto;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 1rem clamp(1.5rem, 4vw, 3rem);
align-content: start;
}
.sk {
display: block;
border-radius: var(--radius-sm);
background: var(--surface-deep);
}
.sk-kicker { grid-column: 1 / 3; width: 40%; height: .9rem; border-radius: 999px; }
.sk-title { grid-column: 1 / 4; height: clamp(2.2rem, 4vw, 3.4rem); }
.sk-title-short { width: 72%; }
.sk-line { grid-column: 1 / 4; height: 1rem; margin-top: .4rem; }
.sk-line-short { width: 60%; margin-top: 0; }
.sk-button { grid-column: 1 / 3; width: 70%; height: 3.1rem; margin-top: 1rem; }
.sk-visual { grid-column: 4 / 7; grid-row: 1 / 7; min-height: 320px; border-radius: var(--radius-lg); }
.sk-card { grid-column: span 2; height: 180px; margin-top: 2.5rem; border-radius: var(--radius-lg); }
.page-skel > :nth-child(2) { animation-delay: 80ms; }
.page-skel > :nth-child(3) { animation-delay: 160ms; }
.page-skel > :nth-child(4) { animation-delay: 240ms; }
.page-skel > :nth-child(5) { animation-delay: 320ms; }
.page-skel > :nth-child(6) { animation-delay: 400ms; }
.page-skel > :nth-child(7) { animation-delay: 200ms; }
.page-skel > :nth-child(8) { animation-delay: 480ms; }
.page-skel > :nth-child(9) { animation-delay: 560ms; }
.page-skel > :nth-child(10) { animation-delay: 640ms; }
@media (max-width: 860px) {
.page-skel > * { grid-column: 1 / -1; }
.sk-kicker { width: 35%; }
.sk-button { width: 55%; }
.sk-visual { grid-row: auto; min-height: 220px; margin-top: 1.5rem; }
.sk-card { height: 120px; margin-top: 0; }
.sk-card + .sk-card { display: none; }
}
.js .photo.is-loading {
background:
linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--surface) 70%, transparent) 50%, transparent 70%) var(--surface-deep);
background-size: 250% 100%;
animation: photo-shimmer 1.4s linear infinite;
}
.js .photo img {
transition: opacity var(--reveal-dur) var(--reveal-ease), filter var(--reveal-dur) var(--reveal-ease);
}
.js .photo.is-loading img {
opacity: 0;
filter: blur(var(--reveal-blur));
}
@keyframes photo-shimmer {
from { background-position: 150% 0; }
to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
.is-navigating .page-progress { animation: none; transform: scaleX(.6); }
.js .photo.is-loading { animation: none; }
.js .photo img { transition: none; }
}
@media (prefers-reduced-motion: no-preference) {
.js-reveal [data-reveal] {
opacity: 0;
transform: translateY(var(--distance-medium));
transition: opacity var(--duration-very-slow) var(--ease-smooth-out), transform var(--duration-very-slow) var(--ease-smooth-out);
transition-delay: calc(var(--reveal-index, 0) * var(--duration-micro));
}
.js-reveal [data-reveal].is-visible {
opacity: 1;
transform: none;
}
}
:root {
--duration-stagger: 40ms;
--duration-micro: 80ms;
--duration-quick: 150ms;
--duration-fast: 250ms;
--duration-medium: 350ms;
--duration-slow: 400ms;
--duration-very-slow: 500ms;
--ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: ease-in-out;
--ease-out: ease-out;
--ease-linear: linear;
--ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
--distance-micro: 4px;
--distance-base: 8px;
--distance-medium: 12px;
--blur-small: 2px;
--blur-medium: 3px;
--stagger-dur: 500ms;
--stagger-distance: 12px;
--stagger-stagger: 40ms;
--stagger-blur: 3px;
--stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
--reel-dur: 1400ms;
--reel-cell: 30px;
--reel-spin-blur: 3px;
--reel-stagger: 90ms;
--reel-ease: cubic-bezier(0.16, 1, 0.3, 1);
--learn-shift: 2px;
--learn-spread: 8deg;
--learn-in: 350ms;
--learn-out: 350ms;
--learn-ease: cubic-bezier(0.22, 1, 0.36, 1);
--toggle-dur: 350ms;
--toggle-travel: 14.66px;
--toggle-ov1: 1px;
--toggle-ov2: 0px;
--toggle-track: 0ms;
--toggle-ease: cubic-bezier(0.34, 1.35, 0.64, 1);
--tabs-dur: 250ms;
--tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
--pulse-dur: 1000ms;
--pulse-count: 1;
--pulse-min: 0.5;
--reveal-dur: 400ms;
--reveal-blur: 2px;
--reveal-ease: ease-in-out;
--text-swap-dur: 150ms;
--text-swap-translate-y: 4px;
--text-swap-blur: 2px;
--text-swap-ease: ease-in-out;
}
.t-stagger-line {
display: block;
opacity: 0;
transform: translateY(var(--stagger-distance));
filter: blur(var(--stagger-blur));
transition:
opacity   var(--stagger-dur) var(--stagger-ease),
transform var(--stagger-dur) var(--stagger-ease),
filter    var(--stagger-dur) var(--stagger-ease);
will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }
.t-stagger.is-shown .t-stagger-line {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
.t-stagger.is-hiding .t-stagger-line {
opacity: 0;
transform: translateY(0);
filter: blur(0);
transition:
opacity 200ms ease,
transform 0s linear,
filter 0s linear;
transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
.t-stagger-line { transition: none !important; }
}
.t-reel { display: inline-flex; align-items: center; height: var(--reel-cell); font-variant-numeric: tabular-nums; }
.t-reel-col {
position: relative; height: var(--reel-cell); overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.t-reel-strip { display: flex; flex-direction: column; will-change: transform, filter; }
.t-reel-digit { height: var(--reel-cell); display: flex; align-items: center; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
.t-reel-strip { transition: none !important; filter: none !important; }
}
.t-learn-chevron {
display: inline-flex;
transform: translateX(0);
transition: transform var(--learn-out) var(--learn-ease);
}
.t-learn-arm {
transform-box: view-box;
transform-origin: 10px 8px;
vector-effect: non-scaling-stroke;
transition: transform var(--learn-out) var(--learn-ease);
}
.t-learn:hover .t-learn-chevron { transform: translateX(var(--learn-shift)); transition-duration: var(--learn-in); }
.t-learn:hover .t-learn-arm { transition-duration: var(--learn-in); }
.t-learn:hover .t-learn-arm-top { transform: rotate(var(--learn-spread)); }
.t-learn:hover .t-learn-arm-bot { transform: rotate(calc(var(--learn-spread) * -1)); }
@media (prefers-reduced-motion: reduce) {
.t-learn-chevron, .t-learn-arm { transition: none !important; }
}
.t-toggle { transition: background var(--toggle-track) var(--toggle-ease); }
.t-toggle-thumb { translate: 0 0; will-change: translate; }
.t-toggle[data-on="true"] .t-toggle-thumb { translate: var(--toggle-travel) 0; }
.t-toggle.is-init[data-on="true"] .t-toggle-thumb { animation: t-toggle-on var(--toggle-dur) var(--toggle-ease) both; }
.t-toggle.is-init[data-on="false"] .t-toggle-thumb { animation: t-toggle-off var(--toggle-dur) var(--toggle-ease) both; }
@keyframes t-toggle-on {
0% { translate: 0 0; }
55% { translate: calc(var(--toggle-travel) + var(--toggle-ov1)) 0; }
80% { translate: calc(var(--toggle-travel) - var(--toggle-ov2)) 0; }
100% { translate: var(--toggle-travel) 0; }
}
@keyframes t-toggle-off {
0% { translate: var(--toggle-travel) 0; }
55% { translate: calc(0px - var(--toggle-ov1)) 0; }
80% { translate: var(--toggle-ov2) 0; }
100% { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.t-toggle-thumb { animation: none !important; }
}
.t-text-swap {
display: inline-block;
transform: translateY(0);
filter: blur(0);
opacity: 1;
transition:
transform var(--text-swap-dur) var(--text-swap-ease),
filter    var(--text-swap-dur) var(--text-swap-ease),
opacity   var(--text-swap-dur) var(--text-swap-ease);
will-change: transform, filter, opacity;
}
.t-text-swap.is-exit {
transform: translateY(calc(var(--text-swap-translate-y) * -1));
filter: blur(var(--text-swap-blur));
opacity: 0;
}
.t-text-swap.is-enter-start {
transform: translateY(var(--text-swap-translate-y));
filter: blur(var(--text-swap-blur));
opacity: 0;
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.t-text-swap { transition: none !important; }
}
.t-skel { position: relative; }
.t-skel-skeleton,
.t-skel-content {
position: absolute;
inset: 0;
}
.t-skel-skeleton {
z-index: 1;
opacity: 1;
filter: blur(0);
transition:
opacity var(--reveal-dur) var(--reveal-ease),
filter  var(--reveal-dur) var(--reveal-ease);
}
.t-skel-content {
z-index: 2;
opacity: 0;
filter: blur(var(--reveal-blur));
transition:
opacity var(--reveal-dur) var(--reveal-ease),
filter  var(--reveal-dur) var(--reveal-ease);
}
.t-skel.is-revealed .t-skel-skeleton {
opacity: 0;
filter: blur(var(--reveal-blur));
}
.t-skel.is-revealed .t-skel-content {
opacity: 1;
filter: blur(0);
}
.t-skel.is-resetting .t-skel-skeleton,
.t-skel.is-resetting .t-skel-content {
transition: none !important;
}
.t-skel-skeleton.is-pulsing > * {
animation: t-skel-pulse var(--pulse-dur) ease-in-out var(--pulse-count);
}
@keyframes t-skel-pulse {
0%, 100% { opacity: 1; }
50%      { opacity: var(--pulse-min); }
}
@media (prefers-reduced-motion: reduce) {
.t-skel-skeleton, .t-skel-content {
transition: none !important;
}
.t-skel-skeleton.is-pulsing > * { animation: none !important; }
}
.t-stagger { --stagger-stagger: var(--duration-micro); }
.t-stagger-line--3 { transition-delay: calc(var(--stagger-stagger) * 2); }
.t-stagger-line--4 { transition-delay: calc(var(--stagger-stagger) * 3); }
html:not(.js) .t-stagger-line {
opacity: 1;
transform: none;
filter: none;
}
.proof-grid { --reel-cell: 1.2em; }
.t-reel-static { display: inline-block; }
.theme-toggle { --toggle-travel: 18px; }
.site-footer {
padding-block: 3rem 2.5rem;
border-top: 1px solid var(--rule);
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 2rem 4rem;
align-items: start;
}
.footer-brand img {
width: 150px;
height: auto;
margin-bottom: 1rem;
}
.footer-brand .logo-dark,
[data-theme="dark"] .footer-brand .logo-light {
display: none;
}
[data-theme="dark"] .footer-brand .logo-dark {
display: block;
}
.footer-brand p {
max-width: 34ch;
margin: 0;
color: var(--ink-soft);
}
.footer-connect {
display: grid;
justify-items: end;
gap: .6rem;
}
.footer-label {
margin: 0;
color: var(--ink-soft);
font-size: .8rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.footer-label + .socials,
.footer-label + .mail-row {
margin-bottom: .9rem;
}
.mail-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: .5rem;
max-width: 100%;
}
.mail-link {
display: inline-flex;
align-items: center;
gap: .8rem;
min-height: 52px;
max-width: 100%;
padding: .45rem 1.1rem .45rem .45rem;
border: 1px solid var(--rule);
border-radius: 999px;
background: var(--surface);
color: var(--ink);
font-family: var(--font-display);
font-size: clamp(1rem, 1.6vw, 1.15rem);
font-weight: 600;
text-decoration: none;
transition: border-color var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out);
}
.mail-address {
min-width: 0;
white-space: nowrap;
}
@media (max-width: 420px) {
.mail-link {
gap: .6rem;
padding-right: .9rem;
font-size: min(1rem, 4.05vw);
}
.mail-icon {
width: 36px;
height: 36px;
}
}
.mail-icon {
display: grid;
flex: none;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--accent);
}
.mail-icon svg,
.mail-copy svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.mail-icon svg {
color: var(--on-accent);
overflow: visible;
}
.mail-flap,
.mail-letter {
transform-box: view-box;
transition: transform var(--duration-slow) var(--ease-smooth-out), opacity var(--duration-fast) var(--ease-smooth-out);
}
.mail-flap {
transform-origin: 12px 6px;
}
.mail-letter {
opacity: 0;
}
.mail-link:hover,
.mail-link:focus-visible {
border-color: var(--accent);
}
.mail-link:hover .mail-flap,
.mail-link:focus-visible .mail-flap {
transform: scaleY(-1);
}
.mail-link:hover .mail-letter,
.mail-link:focus-visible .mail-letter {
opacity: 1;
transform: translateY(-9px);
}
.mail-link:active {
transform: scale(.98);
}
.mail-copy {
display: inline-flex;
align-items: center;
gap: .45rem;
min-height: 44px;
padding: 0 1rem;
border: 1px solid var(--rule);
border-radius: 999px;
background: transparent;
color: var(--ink-soft);
font: inherit;
font-size: .875rem;
font-weight: 600;
cursor: pointer;
transition: color var(--duration-fast) var(--ease-smooth-out), border-color var(--duration-fast) var(--ease-smooth-out);
}
.mail-copy[hidden] {
display: none;
}
.mail-copy:hover,
.mail-copy.is-copied {
border-color: var(--accent);
color: var(--accent-ink);
}
.mail-copy .t-text-swap {
min-width: 3.6em;
text-align: left;
}
.socials {
display: flex;
gap: .75rem;
margin: 0;
padding: 0;
list-style: none;
}
.social {
position: relative;
display: grid;
place-items: center;
width: 52px;
height: 52px;
border: 1px solid var(--rule);
border-radius: 50%;
background: var(--surface);
color: var(--ink);
isolation: isolate;
transition: border-color var(--duration-fast) var(--ease-smooth-out), translate var(--duration-fast) var(--ease-bounce);
}
.social::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: var(--accent);
clip-path: circle(0% at 50% 100%);
transition: clip-path var(--duration-slow) var(--ease-smooth-out);
}
.social::after {
content: attr(data-label);
position: absolute;
bottom: calc(100% + .5rem);
left: 50%;
padding: .25rem .6rem;
border-radius: var(--radius-sm);
background: var(--ink);
color: var(--bg);
font-size: .75rem;
font-weight: 700;
white-space: nowrap;
opacity: 0;
pointer-events: none;
translate: -50% 4px;
transition: opacity var(--duration-quick) var(--ease-out), translate var(--duration-quick) var(--ease-out);
}
.social-roll {
display: flex;
flex-direction: column;
width: 20px;
height: 20px;
overflow: hidden;
}
.social-roll svg {
flex: none;
width: 20px;
height: 20px;
fill: currentColor;
transition: transform var(--duration-slow) var(--ease-smooth-out);
}
.social:hover,
.social:focus-visible {
border-color: var(--accent);
color: var(--on-accent);
translate: 0 -3px;
}
.social:hover::before,
.social:focus-visible::before {
clip-path: circle(75% at 50% 100%);
}
.social:hover::after,
.social:focus-visible::after {
opacity: 1;
translate: -50% 0;
}
.social:hover .social-roll svg,
.social:focus-visible .social-roll svg {
transform: translateY(-100%);
}
.social:active {
scale: .96;
}
@media (prefers-reduced-motion: reduce) {
.mail-flap,
.mail-letter,
.social,
.social::before,
.social::after,
.social-roll svg {
transition: none !important;
}
}
.copyright {
grid-column: 1 / -1;
margin: 1.5rem 0 0;
padding-top: 1.5rem;
border-top: 1px solid var(--rule);
color: var(--ink-soft);
font-size: .875rem;
}
@media (max-width: 760px) {
.footer-grid {
grid-template-columns: 1fr;
}
.footer-connect {
justify-items: start;
}
.mail-row {
justify-content: flex-start;
}
}