:root {
--t-micro: 120ms;
--t-state: 240ms;
--t-page:  420ms;
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.s-wrap {
width: 100%;
max-width: 1180px;
margin-inline: auto;
padding-inline: clamp(20px, 5vw, 40px);
}
.s-wrap--narrow { max-width: 780px; }
.s-section {
padding-block: clamp(var(--space-layout-2), 6.4vw, var(--space-layout-4));
background: var(--surface-page);
color: var(--text-body);
}
.s-section--panel  { background: var(--surface-panel); }
.s-section--sunken { background: var(--surface-sunken); }
.s-section--ruled { border-top: 1px solid var(--hairline); }
.s-eyebrow {
font-size: var(--step--1);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: var(--space-comp-3);
}
.s-h1 {
font-size: clamp(var(--step-4), 6vw, var(--step-6));
line-height: 1.04;
letter-spacing: -0.035em;
font-weight: 400;
color: var(--text-strong);
text-wrap: balance;
}
.s-h2 {
font-size: clamp(var(--step-2), 4vw, var(--step-4));
line-height: 1.14;
letter-spacing: -0.025em;
font-weight: 400;
color: var(--text-strong);
text-wrap: balance;
}
.s-h3 {
font-size: var(--step-1);
line-height: 1.3;
letter-spacing: -0.01em;
font-weight: 600;
color: var(--text-strong);
}
.s-lead {
font-size: clamp(var(--step-0), 2.2vw, var(--step-1));
line-height: 1.6;
color: var(--text-body);
max-width: var(--measure);
}
.s-body { max-width: var(--measure); line-height: 1.65; }
.s-center { text-align: center; }
.s-center .s-lead,
.s-center .s-body { margin-inline: auto; }
.s-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-comp-2);
min-height: 48px;
padding: var(--space-comp-3) var(--space-comp-5);
border: 1px solid transparent;
border-radius: var(--radius-action);
font: inherit;
font-weight: 600;
line-height: 1;
cursor: pointer;
text-decoration: none;
transition: background-color var(--t-micro) var(--ease),
border-color var(--t-micro) var(--ease),
transform var(--t-micro) var(--ease);
}
.s-btn--primary {
background: var(--accent);
color: var(--accent-fg);
}
.s-btn:active { transform: scale(0.97); }
.s-nav a:not(.s-btn):active,
.s-footer a:active { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
.s-btn:active { transform: none; }
}
.s-btn--primary:hover { background: var(--accent-hover); }
.s-btn--ghost {
background: transparent;
color: var(--text-strong);
border-color: var(--border);
}
.s-btn--ghost:hover { border-color: var(--text-muted); }
.s-btn:active { transform: translateY(1px); }
.s-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-comp-3);
margin-top: var(--space-layout-1);
}
.s-center .s-actions { justify-content: center; }
:where(a, button, summary, [tabindex], input, select, textarea):focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
border-radius: var(--radius-action);
box-shadow: 0 0 0 6px rgb(0 0 0 / 0.45);
}
@media (forced-colors: active) {
:where(a, button, summary, [tabindex], input, select, textarea):focus-visible {
outline: 3px solid CanvasText;
box-shadow: none;
}
}
.s-header {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--surface-page) 88%, transparent);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--hairline);
}
.s-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-layout-1);
min-height: 68px;
}
.s-brand {
font-weight: 800;
font-size: var(--step-1);
letter-spacing: -0.02em;
color: var(--text-strong);
text-decoration: none;
}
.s-nav { display: none; gap: var(--space-comp-5); align-items: center; }
.s-nav a:not(.s-btn) {
color: var(--text-body);
text-decoration: none;
font-weight: 500;
padding-block: var(--space-comp-3);
transition: color var(--t-micro) var(--ease);
}
.s-nav a:not(.s-btn):hover,
.s-nav a:not(.s-btn)[aria-current="page"] { color: var(--text-strong); }
.s-burger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px; height: 48px;
background: none;
border: 1px solid var(--border);
border-radius: var(--radius-action);
color: var(--text-strong);
cursor: pointer;
}
.s-burger svg { width: 22px; height: 22px; }
.s-mobile {
position: fixed;
top: 0; right: 0; bottom: 0;
z-index: 60;
width: min(88vw, 380px);
padding: var(--space-layout-2) var(--space-layout-1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: var(--surface-page);
border-left: 1px solid var(--hairline);
box-shadow: -18px 0 60px rgb(0 0 0 / 0.20);
transform: translateX(100%);
transition: transform var(--t-state) var(--ease);
}
.s-mobile.s-drawer-open { transform: translateX(0); }
.s-mobile[hidden] { display: none; }
.s-drawer-backdrop {
position: fixed;
inset: 0;
z-index: 55;
background: rgb(0 0 0 / 0.45);
opacity: 0;
transition: opacity var(--t-state) var(--ease);
}
.s-drawer-backdrop.s-drawer-open { opacity: 1; }
.s-drawer-backdrop[hidden] { display: none; }
body.s-scroll-locked {
position: fixed;
width: 100%;
overflow: hidden;
padding-right: var(--s-sbw, 0px);
}
@media (prefers-reduced-motion: reduce) {
.s-mobile, .s-drawer-backdrop { transition: none; }
}
.s-mobile a:not(.s-btn) {
display: block;
padding: var(--space-comp-4) 0;
min-height: 44px;
color: var(--text-body);
text-decoration: none;
font-size: var(--step-1);
border-bottom: 1px solid var(--hairline);
}
.s-mobile a:last-of-type { border-bottom: 0; }
@media (min-width: 860px) {
.s-nav { display: flex; }
.s-burger, .s-mobile { display: none; }
}
.s-hero { padding-block: clamp(var(--space-layout-4), 12vw, 160px); }
.s-hero__lead { margin-top: var(--space-layout-1); }
.s-hero--split {
display: grid;
gap: clamp(var(--space-layout-2), 6vw, var(--space-layout-4));
align-items: center;
}
@media (min-width: 900px) {
.s-hero--split { grid-template-columns: 1.05fr 1fr; }
}
.s-hero__media {
border-radius: var(--radius-container);
overflow: hidden;
background: var(--surface-panel);
aspect-ratio: 4 / 3;
}
.s-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.s-logos {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: clamp(24px, 5vw, 56px);
}
.s-logos img { max-height: 30px; width: auto; }
.s-grid {
display: grid;
gap: clamp(var(--space-layout-1), 3vw, var(--space-layout-2));
margin-top: var(--space-layout-2);
}
.s-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.s-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.s-card {
padding: clamp(var(--space-comp-5), 3vw, 32px);
background: var(--surface-page);
border: 1px solid var(--hairline);
border-radius: var(--radius-container);
transition: border-color var(--t-state) var(--ease),
transform var(--t-state) var(--ease);
}
:where(.s-section--panel) :where(.s-card) { background: var(--surface-page); }
a.s-card:hover { border-color: var(--border); transform: translateY(-2px); }
.s-card__title { margin-bottom: var(--space-comp-3); }
.s-card p { color: var(--text-body); }
.s-card__num {
display: block;
font-size: var(--step--1);
font-weight: 700;
letter-spacing: 0.1em;
color: var(--accent);
margin-bottom: var(--space-comp-3);
}
.s-row {
display: grid;
gap: clamp(var(--space-layout-2), 5vw, var(--space-layout-3));
align-items: center;
padding-block: clamp(var(--space-layout-2), 5vw, var(--space-layout-3));
}
.s-row + .s-row { border-top: 1px solid var(--hairline); }
@media (min-width: 900px) {
.s-row { grid-template-columns: 1fr 1fr; }
.s-row--flip .s-row__media { order: -1; }
}
.s-row__media {
border-radius: var(--radius-container);
overflow: hidden;
background: var(--surface-panel);
aspect-ratio: 16 / 10;
}
.s-row__media img { width: 100%; height: 100%; object-fit: cover; }
.s-stats {
display: grid;
gap: var(--space-layout-2);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.s-stat__value {
font-size: clamp(var(--step-3), 5vw, var(--step-5));
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1;
color: var(--text-strong);
font-variant-numeric: tabular-nums;
}
.s-stat__label {
margin-top: var(--space-comp-3);
color: var(--text-muted);
font-size: var(--step--1);
}
.s-quote { max-width: 820px; margin-inline: auto; text-align: center; }
.s-quote blockquote {
font-size: clamp(var(--step-1), 3.2vw, var(--step-3));
line-height: 1.35;
letter-spacing: -0.015em;
font-weight: 500;
color: var(--text-strong);
text-wrap: balance;
}
.s-quote figcaption {
margin-top: var(--space-layout-1);
color: var(--text-muted);
font-size: var(--step-0);
}
.s-quote cite { font-style: normal; font-weight: 600; color: var(--text-body); }
.s-price {
display: flex;
flex-direction: column;
padding: clamp(var(--space-comp-5), 3vw, 32px);
border: 1px solid var(--hairline);
border-radius: var(--radius-container);
background: var(--surface-page);
}
.s-price--featured { border-color: var(--accent); border-width: 2px; }
.s-price__tag {
align-self: flex-start;
padding: 4px var(--space-comp-3);
border-radius: var(--radius-action-pill);
background: var(--accent-subtle);
color: var(--accent-on-subtle);
font-size: var(--step--1);
font-weight: 700;
margin-bottom: var(--space-comp-4);
}
.s-price__amount {
font-size: clamp(var(--step-3), 4vw, var(--step-4));
font-weight: 400;
letter-spacing: -0.03em;
color: var(--text-strong);
font-variant-numeric: tabular-nums;
}
.s-price__period { font-size: var(--step-0); color: var(--text-muted); font-weight: 500; }
.s-price ul { list-style: none; padding: 0; margin: var(--space-layout-1) 0 0; flex: 1; }
.s-price li {
display: flex;
gap: var(--space-comp-3);
padding-block: var(--space-comp-3);
border-top: 1px solid var(--hairline);
color: var(--text-body);
}
.s-price li::before {
content: "";
flex: none;
width: 8px; height: 8px;
margin-top: 9px;
border-radius: 50%;
background: var(--accent);
}
.s-price .s-btn { margin-top: var(--space-layout-1); width: 100%; }
.s-faq { max-width: 780px; margin-inline: auto; }
.s-faq details { border-bottom: 1px solid var(--hairline); }
.s-faq summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-comp-4);
padding-block: var(--space-comp-5);
min-height: 44px;
cursor: pointer;
font-weight: 600;
font-size: var(--step-1);
color: var(--text-strong);
list-style: none;
}
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after {
content: "";
flex: none;
width: 10px; height: 10px;
border-right: 2px solid var(--text-muted);
border-bottom: 2px solid var(--text-muted);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform var(--t-state) var(--ease);
}
.s-faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.s-faq details p {
padding-bottom: var(--space-comp-5);
color: var(--text-body);
max-width: var(--measure);
}
.s-cta {
background: var(--surface-panel);
border-block: 1px solid var(--hairline);
}
.s-footer {
background: var(--surface-page);
border-top: 1px solid var(--hairline);
padding-block: var(--space-layout-3) var(--space-layout-2);
color: var(--text-muted);
font-size: var(--step-0);
}
.s-footer__grid {
display: grid;
gap: var(--space-layout-2);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.s-footer h2 {
font-size: var(--step--1);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-strong);
margin-bottom: var(--space-comp-4);
}
.s-footer ul { list-style: none; padding: 0; margin: 0; }
.s-footer li { margin-bottom: var(--space-comp-3); }
.s-footer a {
color: var(--text-muted);
text-decoration: none;
display: inline-block;
padding-block: 6px;
transition: color var(--t-micro) var(--ease);
}
.s-footer a:hover { color: var(--text-strong); }
.s-footer__base {
margin-top: var(--space-layout-2);
padding-top: var(--space-layout-1);
border-top: 1px solid var(--hairline);
display: flex;
flex-wrap: wrap;
gap: var(--space-comp-4);
justify-content: space-between;
font-size: var(--step--1);
}
.s-skip {
position: absolute;
left: 8px; top: 8px;
z-index: 100;
padding: 10px 18px;
background: var(--surface-page);
color: var(--text-strong);
font-weight: 700;
border-radius: var(--radius-action);
box-shadow: 0 8px 40px rgb(0 0 0 / 0.18);
transform: translateY(-200%);
transition: transform var(--t-state) var(--ease);
}
.s-skip:focus { transform: translateY(0); }
[data-reveal] {
transition: opacity var(--t-page) var(--ease),
transform var(--t-page) var(--ease);
}
.s-reveal-armed[data-reveal] { opacity: 0; transform: translateY(14px); }
.s-reveal-in[data-reveal]    { opacity: 1; transform: none; }
@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;
}
.s-reveal-armed[data-reveal] { opacity: 1; transform: none; }
}