/* ==========================================================================
EmailHelp — Design System (css/style.css)
Independent Email Support · premium SaaS-grade visual foundation
--------------------------------------------------------------------------
Sections
01 Tokens
02 Reset & base
03 Typography
04 Layout (container, section, grid, stack, cluster)
05 Buttons
06 Icons, badges, tags, avatar, stars, pills
07 Cards
08 Header, nav, mobile menu
09 Hero, aurora, grid overlay
10 Page hero + breadcrumbs
11 Trust bar
12 Marquee
13 Steps
14 Stats
15 Carousel / testimonials
16 FAQ
17 Forms
18 CTA band
19 Pricing
20 Prose, TOC, legal
21 Tables
22 Misc utilities (divider, kbd, glow, visually-hidden, skip-link)
23 Back-to-top, cookie banner, sticky CTA
24 Footer
25 Reveal system
26 Dev error overlay
27 Responsive breakpoints
28 Reduced motion
29 Print
========================================================================== */
/* ==========================================================================
01 Tokens
========================================================================== */
:root {
/* Surfaces */
--bg: #F7F9FC;
--bg-2: #FFFFFF;
--bg-dark: #070B14;
--bg-dark-2: #0D1425;
/* Text */
--text: #0F172A;
--text-muted: #5B6B84;
--text-on-dark: #F8FAFC;
--text-muted-dark: #9AA8BF;
/* Brand */
--primary: #6366F1;
--primary-600: #4F46E5;
--violet: #8B5CF6;
--cyan: #22D3EE;
--success: #10B981;
--warning: #F59E0B;
--danger: #EF4444;
--grad: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #22D3EE 100%);
--grad-text: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #22D3EE 100%);
--grad-soft: linear-gradient(135deg, rgba(99, 102, 241, .14) 0%, rgba(139, 92, 246, .12) 50%, rgba(34, 211, 238, .14) 100%);
/* Borders */
--border: rgba(15, 23, 42, .08);
--border-strong: rgba(15, 23, 42, .14);
--border-dark: rgba(255, 255, 255, .08);
--border-dark-strong: rgba(255, 255, 255, .16);
/* Shadows (layered, soft) */
--shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
--shadow-md: 0 2px 4px -1px rgba(15, 23, 42, .04), 0 10px 24px -8px rgba(15, 23, 42, .12);
--shadow-lg: 0 6px 12px -4px rgba(15, 23, 42, .06), 0 28px 56px -16px rgba(15, 23, 42, .20);
--shadow-glow: 0 10px 40px -10px rgba(99, 102, 241, .45);
--shadow-glow-strong: 0 14px 48px -10px rgba(99, 102, 241, .65);
/* Radii */
--radius-sm: 10px;
--radius: 16px;
--radius-lg: 24px;
--radius-pill: 999px;
/* Layout */
--container: 1200px;
--gutter: clamp(16px, 4vw, 32px);
--header-h: 72px;
/* Motion */
--ease: cubic-bezier(.22, 1, .36, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--dur: .6s;
--dur-fast: .25s;
/* Type */
--font-heading: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--fs-display: clamp(2.6rem, 6vw, 4.5rem);
--fs-h1: clamp(2.2rem, 4.5vw, 3.5rem);
--fs-h2: clamp(1.8rem, 3.2vw, 2.6rem);
--fs-h3: 1.35rem;
--fs-body: 1rem;
--fs-small: .875rem;
--fs-eyebrow: .8rem;
/* Focus */
--ring: 0 0 0 4px rgba(99, 102, 241, .2);
--ring-danger: 0 0 0 4px rgba(239, 68, 68, .18);
/* Z-index scale */
--z-header: 100;
--z-menu: 110;
--z-sticky: 90;
--z-toast: 120;
--z-cookie: 95;
--z-dev: 99999;
color-scheme: light;
}
/* Dark-context token swap: any component using var(--text)/var(--text-muted)/var(--border)
adapts automatically inside these containers. */
.section--dark,
.hero--dark,
.page-hero,
.cta-band,
.site-footer,
.mobile-menu,
.theme-dark {
--text: var(--text-on-dark);
--text-muted: var(--text-muted-dark);
--border: var(--border-dark);
--border-strong: var(--border-dark-strong);
color: var(--text-on-dark);
}
/* ==========================================================================
02 Reset & base
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 16px);
scrollbar-width: thin;
scrollbar-color: rgba(15, 23, 42, .22) transparent;
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.65;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
min-height: 100vh;
}
body.menu-open { overflow: hidden; touch-action: none; } /* touch-action stops iOS Safari scrolling the page behind the menu */
/* Keep the header (logo + X toggle) above the open mobile menu so it can always be closed */
body.menu-open .site-header {
z-index: calc(var(--z-menu) + 1);
background: transparent;
border-bottom-color: transparent;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
transform: none;
}
::selection { background: rgba(99, 102, 241, .28); color: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(15, 23, 42, .18);
border-radius: 999px;
border: 3px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, .32); background-clip: padding-box; border: 3px solid transparent; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
svg { fill: none; }
a { color: var(--primary-600); text-decoration: none; transition: color var(--dur-fast) ease; }
a:hover { color: var(--primary); }
button, input, select, textarea {
font: inherit;
color: inherit;
margin: 0;
}
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }
small { font-size: var(--fs-small); }
hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 3px;
border-radius: 6px;
}
/* Page wrapper + main landmark */
main { display: block; }
.page { position: relative; }
/* ==========================================================================
03 Typography
========================================================================== */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 {
font-family: var(--font-heading);
font-weight: 700;
color: var(--text);
margin: 0 0 .5em;
letter-spacing: -.02em;
text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1); line-height: 1.08; }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.15; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
h4 { font-size: 1.1rem; line-height: 1.35; font-weight: 600; letter-spacing: -.005em; }
h5 { font-size: 1rem; font-weight: 600; }
h6 { font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.03em; }
.eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
background: var(--grad-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
margin: 0 0 14px;
}
.lead {
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
line-height: 1.6;
color: var(--text-muted);
max-width: 62ch;
}
.small, .text-small { font-size: var(--fs-small); }
.muted, .text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-balance { text-wrap: balance; }
.mono { font-family: var(--font-mono); }
.gradient-text {
background: var(--grad-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* Long-form links inside body copy */
.prose a,
.link { text-decoration: underline; text-decoration-color: rgba(99, 102, 241, .4); text-underline-offset: 3px; }
.prose a:hover,
.link:hover { text-decoration-color: currentColor; }
/* ==========================================================================
04 Layout
========================================================================== */
.container {
width: min(var(--container), calc(100% - var(--gutter) * 2));
margin-inline: auto;
}
.container--narrow { width: min(860px, calc(100% - var(--gutter) * 2)); }
.container--wide { width: min(1360px, calc(100% - var(--gutter) * 2)); }
.section {
position: relative;
padding: clamp(64px, 8vw, 104px) 0;
}
.section--tight { padding: clamp(48px, 6vw, 80px) 0; }
.section--flush-top { padding-top: 0; }
.section--alt { background: var(--bg-2); }
.section--dark {
background: var(--bg-dark);
overflow: hidden; /* fallback */
overflow: clip; /* clips aurora blobs without becoming a scroll container, so sticky children work */
}
.section--dark + .section--dark { border-top: 1px solid var(--border-dark); }
.section-head {
max-width: 720px;
margin: 0 auto clamp(36px, 5vw, 56px);
text-align: center;
}
.section-head .eyebrow { margin-bottom: 14px; }
.section-head h2 { margin-bottom: 16px; }
.section-head .lead { margin-inline: auto; }
.section-head--left { margin-inline: 0; text-align: left; }
.section-head--left .lead { margin-inline: 0; }
.grid {
display: grid;
gap: clamp(16px, 2.5vw, 28px);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(32px, 6vw, 80px); }
.grid--split-rev { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(32px, 6vw, 80px); }
.grid > * { min-width: 0; } /* nowrap content (chips, badges) must not inflate a track past the viewport */
.grid--center { align-items: center; }
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, 16px); }
.stack--sm { --stack-gap: 8px; }
.stack--lg { --stack-gap: 28px; }
.cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cluster-gap, 12px);
}
.cluster--center { justify-content: center; }
.cluster--between { justify-content: space-between; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mt-5 { margin-top: 48px; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }
.mx-auto { margin-inline: auto; }
/* ==========================================================================
05 Buttons
========================================================================== */
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 48px;
padding: 0 22px;
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: .95rem;
font-weight: 600;
line-height: 1;
letter-spacing: -.005em;
white-space: nowrap;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
isolation: isolate;
transition:
transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
background-color var(--dur-fast) ease,
border-color var(--dur-fast) ease,
color var(--dur-fast) ease,
background-position .5s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: .08s; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn .icon { width: 1.15em; height: 1.15em; }
.btn[disabled],
.btn.is-disabled { opacity: .55; pointer-events: none; }
/* Shine sweep (::after) */
.btn::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%);
transform: translateX(-130%);
opacity: 0;
pointer-events: none;
transition: transform 0s;
}
.btn:hover::after {
opacity: 1;
transform: translateX(130%);
transition: transform .85s var(--ease-out), opacity .1s linear;
}
/* Primary — gradient, glow */
.btn--primary {
color: #fff;
background: var(--grad);
background-size: 140% 140%;
background-position: 0% 50%;
box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, .18);
border-color: transparent;
}
.btn--primary:hover {
color: #fff;
background-position: 100% 50%; /* subtle indigo -> cyan drift, pairs with the shine sweep */
box-shadow: var(--shadow-glow-strong), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn--primary:focus-visible { box-shadow: var(--shadow-glow), 0 0 0 4px rgba(99, 102, 241, .35); }
/* Secondary — white / glass */
.btn--secondary {
color: var(--text);
background: #fff;
border-color: rgba(15, 23, 42, .1);
box-shadow: var(--shadow-sm);
}
.btn--secondary:hover {
color: var(--primary-600);
border-color: rgba(99, 102, 241, .35);
box-shadow: var(--shadow-md);
}
.btn--secondary::after { background: linear-gradient(105deg, transparent 35%, rgba(99, 102, 241, .10) 50%, transparent 65%); }
/* Secondary on dark backgrounds becomes frosted glass */
.section--dark .btn--secondary,
.hero--dark .btn--secondary,
.page-hero .btn--secondary,
.cta-band .btn--secondary,
.theme-dark .btn--secondary {
color: var(--text-on-dark);
background: rgba(255, 255, 255, .08);
border-color: rgba(255, 255, 255, .16);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: none;
}
.section--dark .btn--secondary:hover,
.hero--dark .btn--secondary:hover,
.page-hero .btn--secondary:hover,
.cta-band .btn--secondary:hover,
.theme-dark .btn--secondary:hover {
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .3);
color: #fff;
}
/* Ghost — text only */
.btn--ghost {
color: var(--primary-600);
background: transparent;
padding-inline: 16px;
}
.btn--ghost:hover { background: rgba(99, 102, 241, .08); color: var(--primary-600); }
.btn--ghost::after { display: none; }
.section--dark .btn--ghost,
.theme-dark .btn--ghost { color: var(--text-on-dark); }
.section--dark .btn--ghost:hover,
.theme-dark .btn--ghost:hover { background: rgba(255, 255, 255, .08); }
/* Outline-light — for dark backgrounds */
.btn--outline-light {
color: #fff;
background: transparent;
border-color: rgba(255, 255, 255, .28);
}
.btn--outline-light:hover {
color: #fff;
background: rgba(255, 255, 255, .08);
border-color: rgba(255, 255, 255, .55);
}
.btn--outline-light::after { background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%); }
/* Sizes */
.btn--sm { height: 40px; padding: 0 16px; font-size: .875rem; gap: 6px; }
.btn--lg { height: 56px; padding: 0 30px; font-size: 1.05rem; gap: 10px; }
.btn--block { display: flex; width: 100%; }
.btn--icon { width: 48px; padding: 0; }
.btn--icon.btn--sm { width: 40px; }
/* Loading — spinner via ::after replaces shine */
.btn.is-loading {
color: transparent !important;
pointer-events: none;
}
.btn.is-loading .icon { visibility: hidden; }
.btn.is-loading::after {
content: "";
position: absolute;
inset: auto;
top: 50%;
left: 50%;
z-index: 1;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .35);
border-top-color: #fff;
background: none;
opacity: 1;
transform: none;
animation: spin .7s linear infinite;
}
.btn--secondary.is-loading::after,
.btn--ghost.is-loading::after {
display: block;
border-color: rgba(99, 102, 241, .25);
border-top-color: var(--primary);
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Button groups */
.btn-group { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-group--center { justify-content: center; }
/* ==========================================================================
06 Icons, badges, tags, avatar, stars, pills
========================================================================== */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25em;
height: 1.25em;
flex: 0 0 auto;
vertical-align: -.2em;
color: inherit;
}
.icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; }
.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.6em; height: 1.6em; }
.icon--primary { color: var(--primary); }
.icon--success { color: var(--success); }
.icon--warning { color: var(--warning); }
.icon--danger { color: var(--danger); }
.icon-tile {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex: 0 0 48px;
border-radius: 14px;
background: var(--grad-soft);
border: 1px solid rgba(99, 102, 241, .16);
color: var(--primary-600);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease;
}
.icon-tile .icon { width: 24px; height: 24px; }
.icon-tile--lg { width: 60px; height: 60px; flex-basis: 60px; border-radius: 18px; }
.icon-tile--lg .icon { width: 28px; height: 28px; }
.icon-tile--solid { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--shadow-glow); }
.section--dark .icon-tile,
.hero--dark .icon-tile,
.page-hero .icon-tile,
.theme-dark .icon-tile {
background: linear-gradient(135deg, rgba(99, 102, 241, .28), rgba(34, 211, 238, .18));
border-color: rgba(255, 255, 255, .14);
color: #C7D2FE;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.section--dark .icon-tile--solid,
.hero--dark .icon-tile--solid,
.page-hero .icon-tile--solid,
.theme-dark .icon-tile--solid { background: var(--grad); color: #fff; }
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
border-radius: var(--radius-pill);
font-size: .74rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
line-height: 1.2;
color: var(--primary-600);
background: rgba(99, 102, 241, .10);
border: 1px solid rgba(99, 102, 241, .18);
white-space: nowrap;
}
.badge .icon { width: 1em; height: 1em; }
.badge--success { color: #047857; background: rgba(16, 185, 129, .12); border-color: rgba(16, 185, 129, .24); }
.badge--warning { color: #B45309; background: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .28); }
.badge--danger { color: #B91C1C; background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .22); }
.badge--grad { color: #fff; background: var(--grad); border-color: transparent; box-shadow: var(--shadow-glow); }
.section--dark .badge,
.theme-dark .badge { color: #C7D2FE; background: rgba(99, 102, 241, .18); border-color: rgba(129, 140, 248, .3); }
.section--dark .badge--success,
.theme-dark .badge--success { color: #6EE7B7; background: rgba(16, 185, 129, .16); border-color: rgba(16, 185, 129, .3); }
.section--dark .badge--grad,
.theme-dark .badge--grad { color: #fff; background: var(--grad); border-color: transparent; }
.tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: var(--radius-pill);
font-size: .82rem;
font-weight: 500;
line-height: 1.2;
color: var(--text-muted);
background: rgba(15, 23, 42, .05);
border: 1px solid var(--border);
white-space: nowrap;
}
.tag .icon { width: 1em; height: 1em; }
.section--dark .tag,
.theme-dark .tag { color: var(--text-muted-dark); background: rgba(255, 255, 255, .06); border-color: var(--border-dark); }
/* Pill — hero eyebrow chip with live dot */
.pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px 8px 12px;
border-radius: var(--radius-pill);
font-size: .85rem;
font-weight: 500;
color: var(--text);
background: rgba(15, 23, 42, .05);
border: 1px solid var(--border);
line-height: 1.2;
}
.section--dark .pill,
.hero--dark .pill,
.page-hero .pill,
.theme-dark .pill {
color: var(--text-on-dark);
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .14);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.pill__dot {
position: relative;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--success);
}
/* Pulse ring is a pseudo-element animated with transform/opacity only (no box-shadow repaints) */
.pill__dot::after {
content: "";
position: absolute;
inset: -1px;
border-radius: 50%;
background: rgba(16, 185, 129, .55);
opacity: 0;
animation: pulse-ring 2.2s ease-out infinite;
}
@keyframes pulse-ring {
0% { transform: scale(1); opacity: .8; }
70%, 100% { transform: scale(2.6); opacity: 0; }
}
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: 50%;
background: var(--grad);
color: #fff;
font-family: var(--font-heading);
font-weight: 600;
font-size: .9rem;
letter-spacing: .02em;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), var(--shadow-glow);
}
.avatar--lg { width: 72px; height: 72px; flex-basis: 72px; font-size: 1.35rem; }
.avatar--xl { width: 96px; height: 96px; flex-basis: 96px; font-size: 1.8rem; }
.avatar--sm { width: 32px; height: 32px; flex-basis: 32px; font-size: .75rem; }
.section--dark .avatar,
.theme-dark .avatar { box-shadow: 0 0 0 3px rgba(255, 255, 255, .12), var(--shadow-glow); }
.stars {
display: inline-flex;
gap: 2px;
color: var(--warning);
letter-spacing: 2px;
font-size: 1rem;
line-height: 1;
}
.stars .icon { width: 18px; height: 18px; }
.stars .icon svg { fill: currentColor; }
/* ==========================================================================
07 Cards
========================================================================== */
.card {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
padding: clamp(24px, 3vw, 32px);
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition:
transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
border-color var(--dur-fast) ease,
background-color var(--dur-fast) ease;
}
/* Gradient border-on-hover (mask trick) */
.card::before {
content: "";
position: absolute;
inset: -1px;
z-index: 1;
border-radius: inherit;
padding: 1px;
background: var(--grad);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(99, 102, 241, .06); }
.card:hover::before { opacity: 1; }
.card > * { position: relative; z-index: 2; }
.card h3 { margin-bottom: 0; }
.card p { color: var(--text-muted); margin: 0; }
.card p + p { margin-top: .8em; }
.card .card__title { font-family: var(--font-heading); font-weight: 600; font-size: 1.15rem; color: var(--text); margin: 0; }
.card .card__link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
font-weight: 600;
font-size: .95rem;
color: var(--primary-600);
}
.card .card__link .icon { transition: transform var(--dur-fast) var(--ease-out); }
.card:hover .card__link .icon { transform: translateX(3px); }
.card--static { transition: none; }
.card--static:hover { transform: none; box-shadow: var(--shadow-sm); }
.card--static:hover::before { opacity: 0; }
.card--compact { padding: 20px 22px; gap: 10px; border-radius: var(--radius); }
.card--compact > .cluster { flex-wrap: nowrap; align-items: flex-start; }
.card--compact > .cluster > div { min-width: 0; }
.card--compact > .cluster .icon-tile { flex: 0 0 auto; }
.card--center { align-items: center; text-align: center; }
a.card { color: inherit; }
a.card:hover { color: inherit; }
/* Feature card */
.card--feature { gap: 16px; }
.card--feature .icon-tile { margin-bottom: 6px; }
.card--feature:hover .icon-tile { transform: translateY(-2px) scale(1.04); box-shadow: var(--shadow-glow); }
/* Glass card (dark sections) */
.card--glass,
.section--dark .card,
.hero--dark .card,
.page-hero .card,
.cta-band .card,
.theme-dark .card {
background: rgba(255, 255, 255, .05);
border-color: rgba(255, 255, 255, .1);
color: var(--text-on-dark);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 40px -20px rgba(0, 0, 0, .6);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
backdrop-filter: blur(14px) saturate(1.2);
}
.card--glass:hover,
.section--dark .card:hover,
.hero--dark .card:hover,
.page-hero .card:hover,
.theme-dark .card:hover {
background: rgba(255, 255, 255, .07);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -20px rgba(0, 0, 0, .7), var(--shadow-glow);
}
.card--glass h3, .card--glass h4, .card--glass .card__title,
.section--dark .card h3, .section--dark .card h4, .section--dark .card .card__title,
.hero--dark .card h3, .hero--dark .card h4, .hero--dark .card .card__title,
.page-hero .card h3, .page-hero .card h4, .page-hero .card .card__title,
.theme-dark .card h3, .theme-dark .card h4, .theme-dark .card .card__title { color: var(--text-on-dark); }
.card--glass p,
.section--dark .card p,
.hero--dark .card p,
.page-hero .card p,
.theme-dark .card p { color: var(--text-muted-dark); }
.card--glass .card__link,
.section--dark .card .card__link,
.hero--dark .card .card__link,
.page-hero .card .card__link,
.theme-dark .card .card__link { color: #C7D2FE; }
/* Light card explicitly inside a dark context */
.section--dark .card--light .lead, .hero--dark .card--light .lead, .page-hero .card--light .lead, .theme-dark .card--light .lead { color: var(--text-muted); }
.section--dark .card--light .pill, .hero--dark .card--light .pill, .page-hero .card--light .pill, .theme-dark .card--light .pill {
color: var(--text);
background: rgba(15, 23, 42, .05);
border-color: var(--border);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.section--dark .card--light .btn--secondary, .hero--dark .card--light .btn--secondary, .page-hero .card--light .btn--secondary, .theme-dark .card--light .btn--secondary {
color: var(--text);
background: #fff;
border-color: rgba(15, 23, 42, .14);
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: var(--shadow-sm);
}
.section--dark .card--light .btn--secondary:hover, .hero--dark .card--light .btn--secondary:hover, .page-hero .card--light .btn--secondary:hover, .theme-dark .card--light .btn--secondary:hover {
color: var(--text);
background: #fff;
border-color: rgba(99, 102, 241, .4);
}
.section--dark .card--light .icon-tile, .hero--dark .card--light .icon-tile, .page-hero .card--light .icon-tile, .theme-dark .card--light .icon-tile {
background: var(--grad-soft);
border-color: rgba(99, 102, 241, .16);
color: var(--primary-600);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.section--dark .card--light,
.theme-dark .card--light,
.hero--dark .card--light,
.page-hero .card--light {
--text: #0F172A;
--text-muted: #5B6B84;
--border: rgba(15, 23, 42, .08);
background: #fff;
border-color: rgba(255, 255, 255, .4);
color: #0F172A;
box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, .08);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.section--dark .card--light h3, .section--dark .card--light h4, .section--dark .card--light .card__title,
.hero--dark .card--light h3, .hero--dark .card--light h4, .hero--dark .card--light .card__title,
.page-hero .card--light h3, .theme-dark .card--light h3 { color: #0F172A; }
.section--dark .card--light p, .hero--dark .card--light p, .page-hero .card--light p, .theme-dark .card--light p { color: #5B6B84; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.card--glass, .section--dark .card, .theme-dark .card { background: rgba(255, 255, 255, .09); }
}
/* Testimonial card */
.card--testimonial { gap: 18px; }
.card--testimonial .quote-mark,
.card--testimonial .card__quote-icon {
width: 32px;
height: 32px;
color: var(--primary);
opacity: .5;
}
.card--testimonial .card__quote-icon .icon { width: 100%; height: 100%; }
.testimonial__text,
.card--testimonial blockquote {
margin: 0;
font-size: 1.1rem;
line-height: 1.6;
color: var(--text);
font-weight: 400;
}
.section--dark .testimonial__text,
.section--dark .card--testimonial blockquote { color: var(--text-on-dark); }
.testimonial__author {
display: flex;
align-items: center;
gap: 12px;
margin-top: auto;
padding-top: 6px;
}
.testimonial__name { font-weight: 600; font-size: .95rem; color: var(--text); line-height: 1.3; }
.testimonial__meta { font-size: .8rem; color: var(--text-muted); }
.section--dark .testimonial__name { color: var(--text-on-dark); }
/* ==========================================================================
08 Header, nav, mobile menu
========================================================================== */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-header);
height: var(--header-h);
color: var(--text-on-dark);
background: transparent;
border-bottom: 1px solid transparent;
transition:
background-color .35s ease,
border-color .35s ease,
box-shadow .35s ease,
transform .4s var(--ease),
-webkit-backdrop-filter .35s ease,
backdrop-filter .35s ease;
}
.site-header.is-scrolled {
background: rgba(7, 11, 20, .74);
border-bottom-color: rgba(255, 255, 255, .08);
box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .6);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
backdrop-filter: blur(18px) saturate(1.4);
}
.site-header.is-hidden { transform: translateY(-100%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.site-header.is-scrolled { background: rgba(7, 11, 20, .94); }
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
height: var(--header-h);
}
/* Logo (shared by header, footer, mobile menu) */
.logo {
display: inline-flex;
align-items: center;
gap: 11px;
color: inherit;
text-decoration: none;
line-height: 1;
flex: 0 0 auto;
}
.logo:hover { color: inherit; }
.logo__mark {
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
flex: 0 0 36px;
border-radius: 10px;
background: var(--grad);
box-shadow: 0 6px 16px -4px rgba(99, 102, 241, .55), inset 0 1px 0 rgba(255, 255, 255, .28);
transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease;
}
.logo__mark svg { width: 100%; height: 100%; display: block; }
.logo:hover .logo__mark { transform: translateY(-1px) rotate(-4deg); box-shadow: 0 8px 20px -4px rgba(99, 102, 241, .7), inset 0 1px 0 rgba(255, 255, 255, .28); }
.logo--lg .logo__mark { width: 48px; height: 48px; flex-basis: 48px; border-radius: 13px; }
.logo--lg .logo__word { font-size: 1.6rem; }
.logo__text { display: flex; flex-direction: column; gap: 3px; }
.logo__word {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.25rem;
letter-spacing: -.02em;
color: var(--text);
}
.logo__sub {
font-size: .68rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-muted);
opacity: .9;
}
.site-header .logo__word { color: #fff; }
.site-header .logo__sub { color: var(--text-muted-dark); }
.nav__links {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.nav__links a {
position: relative;
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 14px;
border-radius: var(--radius-pill);
font-size: .95rem;
font-weight: 500;
color: rgba(248, 250, 252, .78);
transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.nav__links a::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 6px;
height: 2px;
border-radius: 2px;
background: var(--grad);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-fast) var(--ease-out);
}
.nav__links a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.nav__links a[aria-current="page"] { color: #fff; }
.nav__links a[aria-current="page"]::after,
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { display: flex; align-items: center; gap: 12px; }
/* .nav__phone / .mobile-menu__phone: legacy class names kept for the header contact link — it is now a mailto: link (support is chat + email only). */
.nav__phone {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .92rem;
font-weight: 600;
color: rgba(248, 250, 252, .85);
padding: 0 6px;
white-space: nowrap;
}
.nav__phone:hover { color: #fff; }
.nav__phone .icon { color: var(--cyan); }
/* Hamburger */
.nav-toggle {
display: none;
position: relative;
width: 44px;
height: 44px;
border-radius: 12px;
color: #fff;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .12);
flex: 0 0 44px;
align-items: center;
justify-content: center;
z-index: calc(var(--z-menu) + 1);
transition: background-color var(--dur-fast) ease;
}
.nav-toggle:hover { background: rgba(255, 255, 255, .12); }
.nav-toggle__bar,
.nav-toggle span {
position: absolute;
left: 12px;
width: 20px;
height: 2px;
border-radius: 2px;
background: currentColor;
top: 21px; /* all bars share one origin; the closed state offsets bars 1 & 3 with transforms only */
transition: transform .35s var(--ease), opacity .2s ease;
}
.nav-toggle__bar:nth-child(1), .nav-toggle span:nth-child(1) { transform: translateY(-7px); }
.nav-toggle__bar:nth-child(3), .nav-toggle span:nth-child(3) { transform: translateY(7px); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(1), .nav-toggle.is-open span:nth-child(1) { transform: rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(2), .nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(3), .nav-toggle.is-open span:nth-child(3) { transform: rotate(-45deg); }
/* Mobile menu (full-screen) */
.mobile-menu {
position: fixed;
inset: 0;
z-index: var(--z-menu);
display: flex;
flex-direction: column;
padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
background: rgba(7, 11, 20, .96);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
overflow-y: auto;
overscroll-behavior: contain;
}
.mobile-menu.is-open {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity .35s var(--ease), transform .45s var(--ease), visibility 0s;
}
.mobile-menu::before {
content: "";
position: absolute;
top: -20%;
right: -20%;
width: 70vw;
height: 70vw;
background: radial-gradient(circle, rgba(99, 102, 241, .35), transparent 65%);
filter: blur(40px);
pointer-events: none;
}
.mobile-menu__links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
}
.mobile-menu__links a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 12px;
border-radius: var(--radius-sm);
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -.02em;
color: rgba(248, 250, 252, .85);
border-bottom: 1px solid rgba(255, 255, 255, .06);
opacity: 0;
transform: translateY(12px);
transition: opacity .4s var(--ease), transform .5s var(--ease), color .2s ease, background-color .2s ease;
transition-delay: calc(var(--i, 0) * 50ms);
}
.mobile-menu.is-open .mobile-menu__links a { opacity: 1; transform: none; }
.mobile-menu__links a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.mobile-menu__links a[aria-current="page"] { color: #fff; }
.mobile-menu__links a[aria-current="page"]::after {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--grad);
box-shadow: 0 0 0 4px rgba(99, 102, 241, .25);
}
.mobile-menu__footer {
position: relative;
margin-top: auto;
padding-top: 28px;
display: flex;
flex-direction: column;
gap: 14px;
}
.mobile-menu__phone {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-weight: 600;
color: rgba(248, 250, 252, .85);
font-size: 1.05rem;
}
.mobile-menu__phone .icon { color: var(--cyan); }
.mobile-menu__note { font-size: .82rem; color: var(--text-muted-dark); text-align: center; }
/* ==========================================================================
09 Hero, aurora, grid overlay
========================================================================== */
.hero {
position: relative;
overflow: hidden;
padding: calc(var(--header-h) + clamp(56px, 9vw, 120px)) 0 clamp(64px, 9vw, 120px);
background: var(--bg);
}
.hero--dark {
background: var(--bg-dark);
color: var(--text-on-dark);
}
.hero__bg {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.hero--dark .hero__bg::after {
/* soft bottom fade so the hero blends into the next section */
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 30%;
background: linear-gradient(to bottom, transparent, rgba(7, 11, 20, .85));
}
.hero .container { position: relative; z-index: 1; }
.hero__grid {
display: grid;
grid-template-columns: 1.05fr .95fr;
align-items: center;
gap: clamp(32px, 6vw, 72px);
}
.hero__content { position: relative; z-index: 1; max-width: 640px; }
.hero__content h1 { margin: 20px 0 22px; }
.hero__content .lead { margin-bottom: 32px; font-size: clamp(1.08rem, 1.5vw, 1.25rem); }
.hero--dark .hero__content h1 { color: #fff; }
.hero--dark .lead { color: var(--text-muted-dark); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.hero__trust {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 20px;
font-size: .875rem;
color: var(--text-muted);
}
.hero--dark .hero__trust,
.page-hero .hero__trust { color: var(--text-muted-dark); }
.hero__trust li,
.hero__trust > span { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust .icon { color: var(--cyan); width: 1.1em; height: 1.1em; }
.hero__trust li:first-child .icon { color: var(--success); } /* only the "No password" shield is green */
.hero__visual { position: relative; z-index: 1; min-width: 0; }
.hero--center { text-align: center; }
.hero--center .hero__content { margin-inline: auto; max-width: 780px; }
.hero--center .hero__actions,
.hero--center .hero__trust { justify-content: center; }
.hero--center .lead { margin-inline: auto; }
/* Aurora blobs — transform-only, contained by overflow:hidden parent */
.aurora {
position: absolute;
width: 46vw;
height: 46vw;
min-width: 380px;
min-height: 380px;
max-width: 820px;
max-height: 820px;
border-radius: 50%;
filter: blur(70px);
opacity: .55;
pointer-events: none;
will-change: transform;
background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, .8), rgba(99, 102, 241, 0) 65%);
animation: float-a 24s ease-in-out infinite alternate;
}
.aurora--1 {
top: -18%;
left: -12%;
background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, .85), rgba(99, 102, 241, 0) 66%);
animation-name: float-a;
animation-duration: 22s;
}
.aurora--2 {
top: 10%;
right: -16%;
background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, .8), rgba(139, 92, 246, 0) 66%);
animation-name: float-b;
animation-duration: 26s;
}
.aurora--3 {
bottom: -30%;
left: 28%;
background: radial-gradient(circle at 50% 50%, rgba(34, 211, 238, .55), rgba(34, 211, 238, 0) 66%);
animation-name: float-c;
animation-duration: 28s;
opacity: .45;
}
.aurora--4 {
top: 40%;
left: -10%;
width: 30vw;
height: 30vw;
background: radial-gradient(circle at 50% 50%, rgba(79, 70, 229, .7), rgba(79, 70, 229, 0) 66%);
animation-name: float-b;
animation-duration: 18s;
animation-direction: alternate-reverse;
opacity: .4;
}
@keyframes float-a {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(8%, 6%, 0) scale(1.08); }
100% { transform: translate3d(-4%, 10%, 0) scale(.96); }
}
@keyframes float-b {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-7%, 9%, 0) scale(1.1); }
100% { transform: translate3d(5%, -6%, 0) scale(.94); }
}
@keyframes float-c {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(6%, -8%, 0) scale(1.06); }
100% { transform: translate3d(-8%, -3%, 0) scale(1.02); }
}
/* Faint line grid, masked to a soft ellipse */
.grid-overlay {
position: absolute;
inset: 0;
pointer-events: none;
background-image:
repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 64px),
repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 64px);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
opacity: .8;
}
.grid-overlay--light {
background-image:
repeating-linear-gradient(0deg, rgba(15, 23, 42, .07) 0 1px, transparent 1px 64px),
repeating-linear-gradient(90deg, rgba(15, 23, 42, .07) 0 1px, transparent 1px 64px);
}
/* Optional cursor glow layer (JS moves --mx/--my) */
/* A fixed 600px disc moved with a transform (compositor only) instead of a full-size gradient repainted per mouse move */
.cursor-glow {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 600px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle at center, rgba(99, 102, 241, .16), transparent 55%);
transform: translate3d(calc(var(--mx, -1000px) - 300px), calc(var(--my, -1000px) - 300px), 0);
will-change: transform;
opacity: 0;
transition: opacity .6s ease;
}
[data-cursor-glow]:hover .cursor-glow { opacity: 1; }
/* Floating decorative chips (hero visual) */
.float-chip {
position: absolute;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
border-radius: var(--radius-pill);
font-size: .82rem;
font-weight: 600;
color: #fff;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .16);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6);
animation: drift 7s ease-in-out infinite;
white-space: nowrap;
z-index: 2;
}
.float-chip .icon { width: 1em; height: 1em; color: var(--cyan); }
@keyframes drift {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* ==========================================================================
10 Page hero + breadcrumbs
========================================================================== */
.page-hero {
position: relative;
overflow: hidden;
background: var(--bg-dark);
color: var(--text-on-dark);
padding: calc(var(--header-h) + clamp(48px, 7vw, 88px)) 0 clamp(48px, 7vw, 80px);
}
.page-hero::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
}
.page-hero .hero__bg { z-index: 0; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero__content { max-width: 780px; }
.page-hero h1 { color: #fff; margin: 14px 0 16px; }
.page-hero .lead { color: var(--text-muted-dark); margin-bottom: 0; }
.page-hero .btn-group,
.page-hero .hero__actions { margin-top: 28px; }
.page-hero--center { text-align: center; }
.page-hero--center .page-hero__content { margin-inline: auto; }
.page-hero--center .lead { margin-inline: auto; }
.page-hero--center .breadcrumbs { justify-content: center; }
.breadcrumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
list-style: none;
margin: 0 0 22px;
padding: 0;
font-size: .82rem;
font-weight: 500;
color: var(--text-muted-dark);
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumbs li + li::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: currentColor;
opacity: .5;
}
.breadcrumbs a { color: var(--text-muted-dark); }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs [aria-current="page"] { color: #fff; }
/* ==========================================================================
11 Trust bar
========================================================================== */
.trust-bar {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px 40px;
padding: 22px var(--gutter);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--bg-2);
}
.trust-bar--plain { border: 0; background: transparent; padding-inline: 0; }
.trust-bar--dark { background: var(--bg-dark-2); color: var(--text-on-dark); border-color: var(--border-dark); }
.trust-item {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: .92rem;
font-weight: 500;
color: var(--text);
white-space: nowrap;
}
.trust-bar--dark { border-top: 0; }
.trust-bar--dark .trust-item { color: var(--text-on-dark); }
.trust-bar--dark .trust-item .icon { color: var(--cyan); }
.trust-bar--dark .trust-item .icon--success { color: var(--success); }
.trust-item .icon {
width: 22px;
height: 22px;
color: var(--primary);
}
.trust-item .icon--success { color: var(--success); }
/* ==========================================================================
12 Marquee
========================================================================== */
.marquee {
position: relative;
overflow: hidden;
padding: 8px 0;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
display: flex;
align-items: center;
gap: 12px;
width: max-content;
padding-right: 12px; /* keeps the loop seam even */
animation: marquee var(--marquee-dur, 45s) linear infinite;
will-change: transform;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee--reverse .marquee__track { animation-direction: reverse; }
@keyframes marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(var(--marquee-shift, -50%), 0, 0); } /* main.js sets an integer px shift so the loop never rests on a half pixel */
}
.marquee__item {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 11px 18px;
border-radius: var(--radius-pill);
font-size: .92rem;
font-weight: 500;
color: var(--text);
background: var(--bg-2);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
white-space: nowrap;
flex: 0 0 auto;
}
.marquee__item .icon { width: 18px; height: 18px; color: var(--primary); }
.section--dark .marquee__item,
.theme-dark .marquee__item {
color: var(--text-on-dark);
background: rgba(255, 255, 255, .05);
border-color: rgba(255, 255, 255, .1);
box-shadow: none;
}
.section--dark .marquee__item .icon { color: var(--cyan); }
.marquee__note {
margin-top: 18px;
text-align: center;
font-size: .82rem;
color: var(--text-muted);
}
/* ==========================================================================
13 Steps
========================================================================== */
.steps {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(20px, 3vw, 36px);
counter-reset: step;
}
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps__line {
position: absolute;
top: 26px;
left: 12.5%;
right: 12.5%;
height: 2px;
border-radius: 2px;
background: var(--border-strong);
overflow: hidden;
pointer-events: none;
}
.steps--3 .steps__line { left: 16.66%; right: 16.66%; }
.steps__line::after {
content: "";
position: absolute;
inset: 0;
background: var(--grad);
transform: scaleX(0);
transform-origin: left center;
transition: transform 1.6s var(--ease) .25s;
}
.steps.is-visible .steps__line::after { transform: scaleX(1); }
.step {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
padding: 0 8px;
}
.step__num {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--grad);
color: #fff;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.1rem;
box-shadow: 0 0 0 6px var(--bg), var(--shadow-glow);
}
.section--alt .step__num { box-shadow: 0 0 0 6px var(--bg-2), var(--shadow-glow); }
.section--dark .step__num { box-shadow: 0 0 0 6px var(--bg-dark), var(--shadow-glow); }
.step__num:empty::before { counter-increment: step; content: counter(step); }
.step__title,
.step h3 { font-size: 1.15rem; margin: 6px 0 0; }
.step p,
.step__text { color: var(--text-muted); font-size: .95rem; margin: 0; }
.step .icon-tile { margin-top: 4px; }
/* Vertical mini steps (thank-you / contact "what happens next") */
.steps--vertical {
grid-template-columns: 1fr;
gap: 22px;
}
.steps--vertical .steps__line {
top: 26px;
bottom: 26px;
left: 25px;
right: auto;
width: 2px;
height: auto;
}
.steps--vertical .steps__line::after { transform: scaleY(0); transform-origin: top center; }
.steps--vertical.is-visible .steps__line::after { transform: scaleY(1); }
.steps--vertical .step {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
column-gap: 20px;
row-gap: 0;
align-items: start;
text-align: left;
padding: 0;
}
.steps--vertical .step__num { grid-column: 1; grid-row: 1 / span 4; }
.steps--vertical .step > :not(.step__num) { grid-column: 2; }
.steps--vertical .step__title,
.steps--vertical .step h3 { margin: 12px 0 8px; }
/* The connector line spans the whole list; a strip in the surface colour hides it below the last number.
Override --steps-bg on .steps when it sits on a non-default surface. */
.steps { --steps-bg: var(--bg); }
.section--alt .steps, .card .steps, .card--light .steps { --steps-bg: var(--bg-2); }
.section--dark .steps { --steps-bg: var(--bg-dark); }
.steps--vertical .step { position: relative; }
.steps--vertical .step:last-child::before {
content: "";
position: absolute;
left: 20px;
width: 12px;
top: 52px;
bottom: -12px;
background: var(--steps-bg);
pointer-events: none;
}
/* ==========================================================================
14 Stats
========================================================================== */
.stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(16px, 2.5vw, 28px);
}
.stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Stats placed in a half-width column automatically become 2×2 (smaller numerals so "12,000+" never clips) */
.grid--split .stats,
.grid--split-rev .stats,
.grid--2 .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--split .stats .stat__num,
.grid--split-rev .stats .stat__num,
.grid--2 .stats .stat__num { font-size: clamp(1.9rem, 2.6vw, 2.6rem); }
.grid--split .stat,
.grid--split-rev .stat,
.grid--2 .stat { padding-left: 12px; padding-right: 12px; }
.stat {
position: relative;
padding: 24px 20px;
border-radius: var(--radius);
background: var(--bg-2);
border: 1px solid var(--border);
text-align: center;
}
.section--dark .stat,
.theme-dark .stat {
background: rgba(255, 255, 255, .04);
border-color: rgba(255, 255, 255, .1);
}
.stat--plain { background: transparent; border: 0; padding: 12px 8px; }
.stat__num {
display: block;
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(2.2rem, 4vw, 3.2rem);
line-height: 1.05;
letter-spacing: -.03em;
background: var(--grad-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.stat__label {
display: block;
margin-top: 8px;
font-size: .9rem;
font-weight: 500;
color: var(--text-muted);
}
/* ==========================================================================
15 Carousel / testimonials
========================================================================== */
/* Slide model: main.js translates .carousel__track by -index * slideWidth; slides are 100% wide flex items.
Inactive slides are slightly dimmed/scaled so the motion reads as a focus change. */
.carousel {
position: relative;
overflow: hidden;
--carousel-dur: .65s;
}
.carousel:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius); }
.carousel__viewport { overflow: hidden; padding: 6px 0 12px; }
.carousel__track {
display: flex;
align-items: stretch;
width: 100%;
transition: transform var(--carousel-dur) var(--ease);
will-change: transform;
}
.carousel__slide {
flex: 0 0 100%;
min-width: 0;
opacity: .35;
transform: scale(.97);
transition: opacity var(--carousel-dur) var(--ease), transform var(--carousel-dur) var(--ease);
}
.carousel__slide.is-active { opacity: 1; transform: none; }
.carousel__slide .card { height: 100%; }
.carousel__controls {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 28px;
}
.carousel__dots {
display: flex;
align-items: center;
gap: 8px;
}
.carousel__dot {
width: 8px;
height: 8px;
padding: 0;
border-radius: var(--radius-pill);
background: rgba(15, 23, 42, .18);
transition: width .35s var(--ease), background-color .25s ease;
}
.section--dark .carousel__dot,
.theme-dark .carousel__dot { background: rgba(255, 255, 255, .22); }
.carousel__dot:hover { background: rgba(99, 102, 241, .55); }
.carousel__dot.is-active { width: 26px; background: var(--grad); }
.carousel__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: var(--text);
background: var(--bg-2);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.carousel__arrow .icon { width: 20px; height: 20px; }
.carousel__arrow:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--primary-600); border-color: rgba(99, 102, 241, .35); }
.carousel__arrow[disabled] { opacity: .4; pointer-events: none; }
.section--dark .carousel__arrow,
.theme-dark .carousel__arrow {
color: var(--text-on-dark);
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .12);
box-shadow: none;
}
.section--dark .carousel__arrow:hover { background: rgba(255, 255, 255, .12); color: #fff; }
/* Multi-card slide layout: a slide can hold a 3-col grid of cards */
.carousel__slide .grid { align-items: stretch; }
/* ==========================================================================
16 FAQ
========================================================================== */
.faq {
display: flex;
flex-direction: column;
gap: 12px;
}
.faq__item {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: border-color var(--dur-fast) ease, box-shadow var(--dur) var(--ease), background-color var(--dur-fast) ease;
}
.faq__item:hover { border-color: rgba(99, 102, 241, .3); }
.faq__item.is-open {
border-color: rgba(99, 102, 241, .35);
box-shadow: var(--shadow-md);
}
.section--dark .faq__item,
.theme-dark .faq__item { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.section--dark .faq__item.is-open { background: rgba(255, 255, 255, .06); }
.faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
padding: 20px 22px;
text-align: left;
font-family: var(--font-heading);
font-weight: 600;
font-size: 1.05rem;
line-height: 1.35;
letter-spacing: -.01em;
color: var(--text);
border-radius: inherit;
transition: color var(--dur-fast) ease;
}
.faq__q:hover { color: var(--primary-600); }
.section--dark .faq__q:hover { color: #C7D2FE; }
.faq__q:focus-visible { outline: none; box-shadow: var(--ring); }
.faq__q .icon,
.faq__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex: 0 0 30px;
border-radius: 50%;
color: var(--primary-600);
background: rgba(99, 102, 241, .1);
transition: transform .4s var(--ease), background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.faq__q .icon svg { width: 18px; height: 18px; }
.faq__q[aria-expanded="true"] .icon,
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(180deg); background: var(--grad); color: #fff; }
.faq__q .faq__icon--plus { transform: none; }
.faq__q[aria-expanded="true"] .faq__icon--plus { transform: rotate(45deg); }
.faq__a {
display: grid;
grid-template-rows: 0fr;
grid-auto-rows: 0fr;
overflow: hidden;
transition: grid-template-rows .45s var(--ease);
}
.faq__item:not(.is-open) .faq__a { pointer-events: none; } /* a closed answer is never a hit target */
.faq__a > * { min-height: 0; overflow: hidden; }
.faq__item.is-open .faq__a,
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; grid-auto-rows: 1fr; }
.faq__a-inner {
padding: 0 22px; /* bottom spacing is the ::after block below: padding would escape the 0fr collapse and leave a ~22px gap under closed questions */
color: var(--text-muted);
font-size: .98rem;
line-height: 1.7;
opacity: 0;
transform: translateY(-4px);
transition: opacity .35s ease .05s, transform .45s var(--ease);
}
.faq__item.is-open .faq__a-inner,
.faq__q[aria-expanded="true"] + .faq__a .faq__a-inner { opacity: 1; transform: none; }
.faq__a-inner::after { content: ""; display: block; height: 22px; }
.faq__a-inner p { margin: 0 0 .8em; }
.faq__a-inner p:last-child { margin-bottom: 0; }
.faq__a-inner ul, .faq__a-inner ol { padding-left: 1.2em; margin: .4em 0 .8em; }
.faq__a-inner li { margin-bottom: .3em; }
.faq__item[hidden] { display: none; }
/* Search input */
.faq-search {
position: relative;
max-width: 560px;
margin: 0 auto 36px;
}
.faq-search .icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
color: var(--text-muted);
pointer-events: none;
}
.faq-search input {
width: 100%;
height: 52px;
padding: 0 16px 0 46px;
border-radius: var(--radius-pill);
border: 1px solid var(--border-strong);
background: var(--bg-2);
color: var(--text);
font-size: 1rem;
box-shadow: var(--shadow-sm);
transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.faq-search input:focus { border-color: var(--primary); box-shadow: var(--ring); }
.faq-search input::placeholder { color: var(--text-muted); opacity: .8; }
/* Pinned light-surface colours so the box stays legible inside dark contexts (they remap --text to --text-on-dark) */
.faq-search input { color: #0F172A; -webkit-text-fill-color: #0F172A; caret-color: var(--primary-600); }
.faq-search input::placeholder { color: #5B6B84; }
.faq-search .icon { color: #5B6B84; }
.faq__empty {
text-align: center;
padding: 32px 20px;
color: var(--text-muted);
border: 1px dashed var(--border-strong);
border-radius: var(--radius);
}
.faq__group {
display: flex;
flex-direction: column;
gap: 12px; /* .faq { gap } only reaches direct children */
margin-bottom: clamp(40px, 6vw, 64px);
scroll-margin-top: calc(var(--header-h) + 24px);
}
.faq__group[hidden] { display: none; }
.faq__group-title {
font-size: 1.35rem;
margin: 0 0 18px;
display: flex;
align-items: center;
gap: 12px;
}
.faq__group-title .icon-tile { width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px; }
.faq__group-title .icon-tile .icon { width: 20px; height: 20px; }
/* Category tabs (anchor chips) */
.tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-bottom: 40px;
}
.tabs a,
.tabs button {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 16px;
border-radius: var(--radius-pill);
font-size: .9rem;
font-weight: 500;
color: var(--text);
background: var(--bg-2);
border: 1px solid var(--border);
transition: all var(--dur-fast) ease;
}
.tabs a:hover,
.tabs button:hover { border-color: rgba(99, 102, 241, .4); color: var(--primary-600); transform: translateY(-1px); }
.tabs a.is-active,
.tabs button.is-active,
.tabs a[aria-current="true"] { color: #fff; background: var(--grad); border-color: transparent; box-shadow: var(--shadow-glow); }
/* Sticky sub-nav (services page) */
.subnav {
position: sticky;
top: var(--header-h);
z-index: var(--z-sticky);
background: rgba(247, 249, 252, .85);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
}
.subnav__list {
display: flex;
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
list-style: none;
margin: 0;
padding: 10px 0;
-webkit-overflow-scrolling: touch;
}
.subnav__list::-webkit-scrollbar { display: none; }
@media (max-width: 900px) {
.subnav__list { padding-right: 48px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); } /* cue that more pills scroll in from the right */
}
.subnav__list a {
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 14px;
border-radius: var(--radius-pill);
font-size: .88rem;
font-weight: 500;
color: var(--text-muted);
white-space: nowrap;
transition: all var(--dur-fast) ease;
}
.subnav__list a:hover { color: var(--text); background: rgba(15, 23, 42, .05); }
.subnav__list a.is-active,
.subnav__list a[aria-current="true"] { color: var(--primary-600); background: rgba(99, 102, 241, .1); }
/* ==========================================================================
17 Forms
========================================================================== */
.form {
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
}
.form.is-submitting { pointer-events: none; }
.form.is-submitting .field { opacity: .75; }
.form__row {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
@media (min-width: 640px) {
.form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.field {
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
}
.field > label,
.field__label {
font-size: .875rem;
font-weight: 600;
color: var(--text);
line-height: 1.3;
}
.field__label .req,
.field > label .req { color: var(--danger); margin-left: 2px; }
.field__optional { font-weight: 400; color: var(--text-muted); }
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea,
.input,
.select,
.textarea {
width: 100%;
height: 48px;
padding: 0 14px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-strong);
background: var(--bg-2);
color: var(--text);
font-size: 1rem;
line-height: 1.4;
box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
-webkit-appearance: none;
appearance: none;
transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.field input::placeholder,
.field textarea::placeholder,
.input::placeholder { color: var(--text-muted); opacity: .75; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(15, 23, 42, .24); }
.field input:focus,
.field select:focus,
.field textarea:focus,
.input:focus,
.select:focus,
.textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: var(--ring);
}
.field textarea,
.textarea {
height: auto;
min-height: 132px;
padding: 12px 14px;
resize: vertical;
line-height: 1.55;
}
.field select,
.select {
padding-right: 42px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235B6B84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 18px;
cursor: pointer;
}
.field select:invalid,
.field select[data-placeholder] { color: var(--text-muted); }
.field select option { color: var(--text); }
/* Dark-context inputs (forms placed directly on dark sections, not in a white card) */
.section--dark .field input:not([type="checkbox"]):not([type="radio"]),
.section--dark .field select,
.section--dark .field textarea,
.theme-dark .field input:not([type="checkbox"]):not([type="radio"]),
.theme-dark .field select,
.theme-dark .field textarea {
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .16);
color: var(--text-on-dark);
box-shadow: none;
}
.section--dark .field input:focus,
.section--dark .field select:focus,
.section--dark .field textarea:focus,
.theme-dark .field input:focus,
.theme-dark .field select:focus,
.theme-dark .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(99, 102, 241, .3); }
.section--dark .field > label, .theme-dark .field > label,
.section--dark .field__label, .theme-dark .field__label { color: var(--text-on-dark); }
.section--dark .field select option { color: var(--text); }
/* …but inside a light card on a dark section, restore light inputs */
.section--dark .card--light .field input:not([type="checkbox"]):not([type="radio"]),
.section--dark .card--light .field select,
.section--dark .card--light .field textarea,
.hero--dark .card--light .field input:not([type="checkbox"]):not([type="radio"]),
.hero--dark .card--light .field select,
.hero--dark .card--light .field textarea,
.page-hero .card--light .field input:not([type="checkbox"]):not([type="radio"]),
.page-hero .card--light .field select,
.page-hero .card--light .field textarea {
background: #fff;
border-color: rgba(15, 23, 42, .14);
color: #0F172A;
}
.section--dark .card--light .field > label, .hero--dark .card--light .field > label, .page-hero .card--light .field > label,
.section--dark .card--light .field__label, .hero--dark .card--light .field__label, .page-hero .card--light .field__label { color: #0F172A; }
/* Input with leading icon */
.field--icon { position: relative; }
.field--icon .field__icon {
position: absolute;
left: 14px;
bottom: 14px;
width: 20px;
height: 20px;
color: var(--text-muted);
pointer-events: none;
}
.field--icon input { padding-left: 42px; }
/* Checkbox / radio */
.field--checkbox,
.field--radio {
flex-direction: row;
align-items: flex-start;
gap: 12px;
}
.field--checkbox label,
.field--radio label {
font-size: .9rem;
font-weight: 400;
color: var(--text-muted);
line-height: 1.5;
cursor: pointer;
}
.field--checkbox label a { font-weight: 500; }
.field input[type="checkbox"],
.field input[type="radio"],
.checkbox {
-webkit-appearance: none;
appearance: none;
flex: 0 0 20px;
width: 20px;
height: 20px;
margin-top: 2px;
border-radius: 6px;
border: 1.5px solid rgba(15, 23, 42, .28);
background: var(--bg-2);
cursor: pointer;
display: inline-grid;
place-content: center;
transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.field input[type="radio"] { border-radius: 50%; }
.field input[type="checkbox"]::before,
.field input[type="radio"]::before,
.checkbox::before {
content: "";
width: 11px;
height: 11px;
transform: scale(0);
transition: transform .2s var(--ease-out);
background: #fff;
clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 22%, 84% 8%, 40% 66%);
}
.field input[type="radio"]::before { clip-path: none; border-radius: 50%; width: 8px; height: 8px; }
.field input[type="checkbox"]:checked,
.field input[type="radio"]:checked,
.checkbox:checked { background: var(--grad); border-color: transparent; }
.field input[type="checkbox"]:checked::before,
.field input[type="radio"]:checked::before,
.checkbox:checked::before { transform: scale(1); }
.field input[type="checkbox"]:focus-visible,
.field input[type="radio"]:focus-visible { outline: none; box-shadow: var(--ring); }
.field__hint {
font-size: .8rem;
color: var(--text-muted);
line-height: 1.4;
}
.field__error {
display: none;
font-size: .8rem;
font-weight: 500;
color: var(--danger);
line-height: 1.4;
}
.field--error .field__error { display: flex; align-items: center; gap: 6px; }
.field--error input,
.field--error select,
.field--error textarea {
border-color: var(--danger) !important;
box-shadow: var(--ring-danger);
}
.field--error > label,
.field--error .field__label { color: var(--danger); }
.field--error input[type="checkbox"] { border-color: var(--danger); }
.form__note {
font-size: .8rem;
color: var(--text-muted);
line-height: 1.5;
text-align: center;
}
.form__note .icon { width: 1em; height: 1em; color: var(--success); }
.form__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.form__status {
display: none;
align-items: flex-start;
gap: 10px;
padding: 14px 16px;
border-radius: var(--radius-sm);
font-size: .9rem;
font-weight: 500;
line-height: 1.5;
border: 1px solid transparent;
}
.form__status.is-success,
.form__status.is-error { display: flex; animation: fade-in-up .4s var(--ease); }
.form__status.is-success { color: #065F46; background: rgba(16, 185, 129, .12); border-color: rgba(16, 185, 129, .3); }
.form__status.is-error { color: #991B1B; background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .3); }
.form__status .icon { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; }
.section--dark .form__status.is-success { color: #6EE7B7; }
.section--dark .form__status.is-error { color: #FCA5A5; }
@keyframes fade-in-up {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
/* Honeypot — visually hidden but present */
.honeypot {
position: absolute !important;
left: -9999px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0;
pointer-events: none;
}
/* Form inside a card gets a heading treatment */
.form-card { padding: clamp(24px, 3vw, 36px); }
.form-card__head { margin-bottom: 8px; }
.form-card__head h2, .form-card__head h3 { font-size: 1.5rem; margin-bottom: 6px; }
.form-card__head p { color: var(--text-muted); font-size: .95rem; margin: 0; }
/* ==========================================================================
18 CTA band
========================================================================== */
.cta-band {
position: relative;
overflow: hidden;
isolation: isolate;
padding: clamp(52px, 8vw, 96px) clamp(24px, 5vw, 64px);
border-radius: var(--radius-lg);
background: linear-gradient(160deg, var(--bg-dark-2), var(--bg-dark));
color: var(--text-on-dark);
text-align: center;
border: 1px solid rgba(255, 255, 255, .08);
box-shadow: var(--shadow-lg), 0 0 0 1px rgba(99, 102, 241, .1);
}
.cta-band .aurora { opacity: .5; }
.cta-band .aurora--1 { top: -50%; left: -15%; }
.cta-band .aurora--2 { top: -20%; right: -20%; }
.cta-band .aurora--3 { bottom: -70%; left: 30%; }
.cta-band .grid-overlay { opacity: .6; }
.cta-band__content {
position: relative;
z-index: 1;
max-width: 680px;
margin: 0 auto;
}
.cta-band h2 { color: #fff; margin-bottom: 14px; }
.cta-band .lead { color: var(--text-muted-dark); margin: 0 auto 30px; }
.cta-band .btn-group,
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cta-band__note { margin-top: 20px; font-size: .82rem; color: var(--text-muted-dark); }
.cta-band--full { border-radius: 0; border-left: 0; border-right: 0; }
/* ==========================================================================
19 Pricing
========================================================================== */
.card--pricing {
gap: 20px;
padding: clamp(28px, 3vw, 36px);
align-items: stretch;
}
.card--pricing .card__title,
.card--pricing h3 { font-size: 1.25rem; }
.card--pricing .card__desc,
.card--pricing .pricing__desc { color: var(--text-muted); font-size: .95rem; min-height: 2.9em; }
.card--pricing .btn { margin-top: auto; } /* slack sits between the list and the button so all CTAs share one baseline */
.card--pricing .feature-list { margin-top: 4px; margin-bottom: 8px; }
.card--pricing .pricing__foot { margin-top: 0; font-size: .8rem; color: var(--text-muted); text-align: center; }
.card--pricing.is-featured {
border-color: transparent;
box-shadow: var(--shadow-lg), var(--shadow-glow);
background:
linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
var(--grad) border-box;
border: 1px solid transparent;
}
.card--pricing.is-featured::before { opacity: 1; }
.card--pricing .pricing__badge,
.card--pricing .badge--featured {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
color: #fff;
background: var(--grad);
border-color: transparent;
box-shadow: var(--shadow-glow);
white-space: nowrap;
}
.section--dark .card--pricing.is-featured,
.theme-dark .card--pricing.is-featured {
background:
linear-gradient(rgba(21, 27, 46, .98), rgba(21, 27, 46, .98)) padding-box,
var(--grad) border-box;
}
@media (min-width: 1024px) {
.card--pricing.is-featured { transform: translateY(-10px); }
.card--pricing.is-featured:hover { transform: translateY(-14px); }
}
.price {
display: flex;
align-items: baseline;
gap: 6px;
line-height: 1;
}
.price__currency {
font-family: var(--font-heading);
font-weight: 600;
font-size: 1.4rem;
color: var(--text-muted);
align-self: flex-start;
margin-top: 6px;
}
.price__amount {
font-family: var(--font-heading);
font-weight: 700;
font-size: clamp(2.6rem, 4vw, 3.4rem);
letter-spacing: -.04em;
color: var(--text);
line-height: 1;
}
.price__period {
font-size: .95rem;
font-weight: 500;
color: var(--text-muted);
}
.price__note { font-size: .82rem; color: var(--text-muted); margin-top: 6px; }
.feature-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 11px;
}
.feature-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: .95rem;
line-height: 1.5;
color: var(--text);
}
.feature-list li .icon,
.feature-list li::before {
flex: 0 0 auto;
margin-top: 2px;
}
.feature-list li .icon {
width: 20px;
height: 20px;
color: var(--success);
}
.feature-list--tiles li .icon {
width: 22px;
height: 22px;
padding: 3px;
border-radius: 50%;
color: #047857;
background: rgba(16, 185, 129, .14);
}
.feature-list li.is-muted,
.feature-list li.is-off { color: var(--text-muted); }
.feature-list li.is-off .icon { color: rgba(91, 107, 132, .5); }
.feature-list--lg li { font-size: 1.02rem; gap: 12px; }
.section--dark .feature-list li,
.theme-dark .feature-list li { color: var(--text-on-dark); }
.section--dark .feature-list li.is-muted,
.section--dark .feature-list li.is-off { color: var(--text-muted-dark); }
/* ==========================================================================
20 Prose, TOC, legal
========================================================================== */
.legal-grid,
.prose-layout {
display: grid;
grid-template-columns: minmax(0, 1fr); /* minmax: a wide table inside .prose must not push the column past the viewport */
gap: clamp(32px, 5vw, 64px);
align-items: start;
}
.legal-grid > *,
.prose-layout > * { min-width: 0; }
@media (min-width: 1024px) {
.legal-grid,
.prose-layout { grid-template-columns: 260px minmax(0, 1fr); }
}
.toc {
position: sticky;
top: calc(var(--header-h) + 24px);
padding: 20px 22px;
border-radius: var(--radius);
background: var(--bg-2);
border: 1px solid var(--border);
max-height: calc(100vh - var(--header-h) - 48px);
overflow-y: auto;
}
.toc__title {
font-size: .75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--text-muted);
margin: 0 0 12px;
}
.toc ol,
.toc ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.toc li { margin: 0; }
.toc a {
display: block;
padding: 7px 10px;
border-radius: 8px;
font-size: .9rem;
line-height: 1.35;
color: var(--text-muted);
border-left: 2px solid transparent;
transition: all var(--dur-fast) ease;
}
.toc a:hover { color: var(--text); background: rgba(15, 23, 42, .04); }
.toc a.is-active,
.toc a[aria-current="true"] {
color: var(--primary-600);
background: rgba(99, 102, 241, .08);
border-left-color: var(--primary);
font-weight: 500;
}
/* Section number inside a TOC link (legal pages): 1 Title */
.toc__num {
display: inline-block;
min-width: 1.65em;
font-size: .8em;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--text-muted);
}
.toc a[aria-current="true"] .toc__num,
.toc a.is-active .toc__num { color: var(--primary-600); }
/* Sidebar mode: number in its own column so wrapped titles keep a hanging indent */
@media (min-width: 1025px) {
.toc li > a:has(> .toc__num) { display: flex; align-items: baseline; gap: 7px; }
.toc__num { flex: 0 0 auto; min-width: 1.4em; }
}
.toc ol ol,
.toc ul ul { padding-left: 12px; margin-top: 2px; }
.legal-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
padding: 12px 16px;
margin: 0 0 32px;
border-radius: var(--radius-sm);
background: rgba(99, 102, 241, .06);
border: 1px solid rgba(99, 102, 241, .14);
font-size: .85rem;
color: var(--text-muted);
}
.legal-meta .icon { width: 1.1em; height: 1.1em; color: var(--primary); }
.legal-meta strong { color: var(--text); font-weight: 600; }
.callout {
display: flex;
gap: 14px;
padding: 18px 20px;
margin: 28px 0;
border-radius: var(--radius);
background: rgba(99, 102, 241, .06);
border: 1px solid rgba(99, 102, 241, .18);
border-left: 3px solid var(--primary);
color: var(--text);
font-size: .95rem;
line-height: 1.6;
}
.callout .icon { width: 22px; height: 22px; flex: 0 0 22px; color: var(--primary); margin-top: 2px; }
.callout p { margin: 0; }
.callout p + p { margin-top: .6em; }
.callout > div > strong:first-child,
.callout__title { display: block; margin-bottom: 2px; font-weight: 600; color: var(--text); } /* only the title is a block; inline inside callout text stays inline */
.grid > .callout, .stack > .callout, .card .callout { margin: 0; }
.callout--success { background: rgba(16, 185, 129, .08); border-color: rgba(16, 185, 129, .25); border-left-color: var(--success); }
.callout--success .icon { color: var(--success); }
.callout--warning { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .3); border-left-color: var(--warning); }
.callout--warning .icon { color: #B45309; }
.callout--danger { background: rgba(239, 68, 68, .07); border-color: rgba(239, 68, 68, .25); border-left-color: var(--danger); }
.callout--danger .icon { color: var(--danger); }
.section--dark .callout,
.theme-dark .callout { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); color: var(--text-on-dark); }
.section--dark .callout strong { color: #fff; }
.section--dark .callout--success, .theme-dark .callout--success { border-left-color: var(--success); }
.section--dark .callout--success .icon, .theme-dark .callout--success .icon { color: #34D399; }
.section--dark .callout--warning, .theme-dark .callout--warning { border-left-color: var(--warning); }
.section--dark .callout--warning .icon, .theme-dark .callout--warning .icon { color: #FBBF24; }
.section--dark .callout--danger, .theme-dark .callout--danger { border-left-color: var(--danger); }
.section--dark .callout--danger .icon, .theme-dark .callout--danger .icon { color: #F87171; }
.prose {
max-width: 780px;
font-size: 1.04rem;
line-height: 1.75;
color: var(--text);
}
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.25em; color: var(--text); }
.prose h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin: 0 0 .6em; }
.prose h2 {
font-size: clamp(1.45rem, 2.2vw, 1.8rem);
margin: 2.4em 0 .8em;
padding-top: .4em;
scroll-margin-top: calc(var(--header-h) + 24px);
border-top: 1px solid var(--border);
}
.prose > h2:first-of-type,
.prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.prose h3 { font-size: 1.2rem; margin: 1.8em 0 .6em; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h4 { font-size: 1.02rem; margin: 1.5em 0 .5em; }
.prose h2 a, .prose h3 a { color: inherit; text-decoration: none; }
.prose h2 a:hover::after, .prose h3 a:hover::after { content: " #"; color: var(--primary); opacity: .6; }
.prose ul, .prose ol { margin: 0 0 1.4em; padding-left: 1.5em; }
.prose ul { list-style: none; padding-left: 1.6em; }
.prose ul > li { position: relative; margin-bottom: .5em; }
.prose ul > li::before {
content: "";
position: absolute;
left: -1.3em;
top: .72em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--grad);
}
.prose ol > li { margin-bottom: .5em; padding-left: .3em; }
.prose ol > li::marker { font-weight: 600; color: var(--primary-600); }
.prose li > ul, .prose li > ol { margin: .5em 0 .5em; }
.prose blockquote {
margin: 1.6em 0;
padding: 4px 0 4px 22px;
border-left: 3px solid var(--primary);
color: var(--text-muted);
font-style: italic;
}
.prose code {
font-family: var(--font-mono);
font-size: .88em;
padding: .15em .45em;
border-radius: 6px;
background: rgba(15, 23, 42, .06);
border: 1px solid var(--border);
}
.prose pre {
overflow-x: auto;
padding: 16px 18px;
border-radius: var(--radius-sm);
background: var(--bg-dark-2);
color: var(--text-on-dark);
font-family: var(--font-mono);
font-size: .88rem;
line-height: 1.6;
}
.prose pre code { background: none; border: 0; padding: 0; }
.prose hr { margin: 2.5em 0; }
.prose table { margin: 1.5em 0; }
.prose img { border-radius: var(--radius); }
.prose .callout { font-size: .95rem; }
.prose .callout p { margin: 0; }
.prose .callout p + p { margin-top: .6em; }
.prose dl { margin: 0 0 1.4em; }
.prose dt { font-weight: 600; margin-top: .8em; }
.prose dd { margin: .2em 0 0 0; color: var(--text-muted); }
.prose address { font-style: normal; line-height: 1.7; }
.prose--lg { font-size: 1.12rem; }
.section--dark .prose, .section--dark .prose p, .theme-dark .prose, .theme-dark .prose p { color: var(--text-on-dark); }
.section--dark .prose h2 { border-color: var(--border-dark); }
/* ==========================================================================
21 Tables
========================================================================== */
.table-wrap {
position: relative; /* containing block for absolutely positioned descendants (e.g. .visually-hidden labels) so they cannot widen the page */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-2);
box-shadow: var(--shadow-sm);
scrollbar-width: thin;
}
.table-wrap table { margin: 0; border: 0; }
table {
width: 100%;
border-collapse: collapse;
font-size: .95rem;
text-align: left;
}
th, td {
padding: 14px 18px;
vertical-align: top;
border-bottom: 1px solid var(--border);
}
th {
font-weight: 600;
font-size: .82rem;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-muted);
background: rgba(15, 23, 42, .025);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(99, 102, 241, .03); }
td .icon--success, .compare-table .icon--success { color: var(--success); }
td .icon--off { color: rgba(91, 107, 132, .4); }
.compare-table { min-width: 640px; }
.compare-table th:first-child,
.compare-table td:first-child { position: sticky; left: 0; background: var(--bg-2); z-index: 1; font-weight: 500; }
.compare-table th:first-child { background: #F8F9FC; }
.compare-table th:not(:first-child),
.compare-table td:not(:first-child) { text-align: center; }
.compare-table th.is-featured,
.compare-table td.is-featured { background: rgba(99, 102, 241, .06); }
.compare-table th.is-featured { color: var(--primary-600); }
.compare-table .icon { width: 22px; height: 22px; margin: 0 auto; }
.compare-table tbody th {
text-transform: none;
letter-spacing: 0;
font-size: .95rem;
color: var(--text);
font-weight: 500;
background: var(--bg-2);
}
.compare-table .table__group td,
.compare-table .table__group th {
background: rgba(15, 23, 42, .03);
font-weight: 600;
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-muted);
padding: 10px 18px;
}
.section--dark .table-wrap { background: rgba(255, 255, 255, .04); border-color: var(--border-dark); }
.section--dark th { background: rgba(255, 255, 255, .04); color: var(--text-muted-dark); }
.section--dark th, .section--dark td { border-color: var(--border-dark); }
.section--dark .compare-table th:first-child,
.section--dark .compare-table td:first-child { background: var(--bg-dark); }
/* ==========================================================================
22 Misc utilities
========================================================================== */
.divider {
height: 1px;
border: 0;
margin: clamp(32px, 5vw, 56px) 0;
background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.divider--short { width: 80px; height: 3px; border-radius: 3px; background: var(--grad); margin-inline: auto; }
.kbd {
display: inline-block;
padding: 2px 7px;
border-radius: 6px;
font-family: var(--font-mono);
font-size: .8em;
font-weight: 500;
color: var(--text);
background: var(--bg-2);
border: 1px solid var(--border-strong);
box-shadow: 0 1px 0 rgba(15, 23, 42, .12);
line-height: 1.3;
vertical-align: middle;
}
.glow { box-shadow: var(--shadow-glow); }
.glow--strong { box-shadow: var(--shadow-glow-strong); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.rounded { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.visually-hidden,
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
.skip-link {
position: fixed;
top: 12px;
left: 12px;
z-index: calc(var(--z-menu) + 10);
padding: 12px 18px;
border-radius: var(--radius-sm);
background: var(--text);
color: #fff;
font-weight: 600;
font-size: .9rem;
box-shadow: var(--shadow-lg);
transform: translateY(-200%);
opacity: 0;
transition: transform .25s var(--ease), opacity .2s ease;
}
.skip-link:focus,
.skip-link:focus-visible { transform: none; opacity: 1; color: #fff; outline: 2px solid var(--cyan); outline-offset: 2px; }
/* Ticker (optional single-line scroll) */
.ticker {
display: flex;
gap: 40px;
overflow: hidden;
white-space: nowrap;
font-size: .85rem;
color: var(--text-muted);
}
/* Toast (MM.toast) */
.toast {
position: fixed;
left: 50%;
bottom: 28px;
z-index: var(--z-toast);
transform: translate(-50%, 20px);
padding: 12px 18px;
border-radius: var(--radius-pill);
background: var(--text);
color: #fff;
font-size: .9rem;
font-weight: 500;
box-shadow: var(--shadow-lg);
opacity: 0;
pointer-events: none;
transition: opacity .3s ease, transform .4s var(--ease);
max-width: min(92vw, 520px);
display: inline-flex;
align-items: center;
gap: 10px;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast .icon { color: var(--cyan); }
/* Animated success check (thank-you page) */
.success-check {
width: 96px;
height: 96px;
margin: 0 auto 24px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--grad);
color: #fff;
box-shadow: var(--shadow-glow-strong);
animation: pop-in .7s var(--ease) both;
}
.success-check .icon { width: 48px; height: 48px; }
.success-check svg path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw-check .6s var(--ease) .35s forwards; }
@keyframes pop-in {
0% { transform: scale(.5); opacity: 0; }
60% { transform: scale(1.08); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes draw-check { to { stroke-dashoffset: 0; } }
/* Two-column media/text row (services page alternating layout) */
.feature-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* minmax: nowrap mock-UI content must not widen the column */
gap: clamp(32px, 6vw, 80px);
align-items: center;
scroll-margin-top: calc(var(--header-h) + 48px);
}
.feature-row--rev > :first-child { order: 2; }
.feature-row__body h2 { margin: 16px 0 12px; }
.feature-row__body .lead { margin-bottom: 20px; font-size: 1.05rem; }
.feature-row + .feature-row { margin-top: clamp(64px, 9vw, 120px); }
.feature-row__visual {
position: relative;
min-height: 280px;
border-radius: var(--radius-lg);
background: linear-gradient(160deg, var(--bg-dark-2), var(--bg-dark));
border: 1px solid rgba(255, 255, 255, .08);
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1fr);
min-width: 0;
place-items: center;
box-shadow: var(--shadow-lg);
}
.feature-row__visual .icon-tile { position: relative; z-index: 1; }
.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; line-height: 1.5; }
.checklist li .icon { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; color: var(--success); }
.checklist--warn li .icon { color: var(--warning); }
.checklist__title { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin: 18px 0 10px; }
/* ==========================================================================
23 Back-to-top, cookie banner, sticky CTA
========================================================================== */
.back-to-top {
position: fixed;
right: 100px;
bottom: 28px;
z-index: var(--z-sticky);
width: 44px;
height: 44px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text);
background: rgba(255, 255, 255, .85);
border: 1px solid var(--border-strong);
box-shadow: var(--shadow-md);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
opacity: 0;
visibility: hidden;
transform: translateY(12px) scale(.9);
transition: opacity .3s ease, transform .4s var(--ease), visibility 0s linear .4s, color .2s ease, box-shadow .2s ease;
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity .3s ease, transform .4s var(--ease), visibility 0s, color .2s ease, box-shadow .2s ease;
}
.back-to-top:hover { color: var(--primary-600); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.back-to-top .icon { width: 20px; height: 20px; }
.cookie-banner {
position: fixed;
left: 20px;
bottom: 20px;
z-index: var(--z-cookie);
width: min(440px, calc(100vw - 40px));
padding: 20px 22px;
border-radius: var(--radius);
background: rgba(255, 255, 255, .92);
border: 1px solid var(--border-strong);
box-shadow: var(--shadow-lg);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
color: var(--text);
opacity: 0;
visibility: hidden;
transform: translateY(16px);
transition: opacity .35s ease, transform .5s var(--ease), visibility 0s linear .5s;
}
.cookie-banner.is-visible {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity .35s ease, transform .5s var(--ease), visibility 0s;
}
.cookie-banner__title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-heading);
font-weight: 600;
font-size: .95rem;
margin: 0 0 6px;
}
.cookie-banner__title .icon { color: var(--primary); }
.cookie-banner__text {
font-size: .85rem;
line-height: 1.55;
color: var(--text-muted);
margin: 0 0 14px;
}
.cookie-banner__text a { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sticky-cta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-sticky);
display: none;
gap: 10px;
padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(7, 11, 20, .88);
border-top: 1px solid rgba(255, 255, 255, .1);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
transform: translateY(100%);
transition: transform .45s var(--ease);
}
.sticky-cta .btn { flex: 1 1 0; height: 46px; }
.sticky-cta.is-visible { transform: none; }
@media (max-width: 860px) { body.has-sticky-cta { padding-bottom: 72px; } } /* the bar itself is display:none above 860px */
/* Lift the fixed launcher + back-to-top above the sticky bar while it is shown (mobile only) */
@media (max-width: 860px) {
.sticky-cta.is-visible ~ .back-to-top,
.sticky-cta.is-visible ~ .mm-chat,
body.has-sticky-cta .back-to-top,
body.has-sticky-cta .mm-chat { bottom: 92px; }
.sticky-cta.is-visible ~ .cookie-banner { bottom: 88px; }
}
/* ==========================================================================
24 Footer
========================================================================== */
.site-footer {
position: relative;
background: var(--bg-dark);
color: var(--text-muted-dark);
padding: clamp(56px, 8vw, 88px) 0 40px;
border-top: 1px solid rgba(255, 255, 255, .06);
overflow: hidden;
}
.site-footer::before {
content: "";
position: absolute;
top: -40%;
left: 50%;
width: 60vw;
height: 60vw;
max-width: 900px;
max-height: 900px;
transform: translateX(-50%);
background: radial-gradient(circle, rgba(99, 102, 241, .16), transparent 60%);
filter: blur(40px);
pointer-events: none;
}
.site-footer .container { position: relative; }
.footer__grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1.1fr 1fr;
gap: clamp(28px, 4vw, 56px);
padding-bottom: 44px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.footer__brand { display: flex; flex-direction: column; gap: 18px; max-width: 360px; }
.footer__brand .logo__word { color: #fff; }
.footer__brand .logo__sub { color: var(--text-muted-dark); }
.footer__brand p { font-size: .95rem; line-height: 1.6; color: var(--text-muted-dark); margin: 0; }
.footer__badges {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.footer__badges li {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .85rem;
font-weight: 500;
color: rgba(248, 250, 252, .85);
}
.footer__badges .icon { width: 18px; height: 18px; color: var(--success); }
.footer__social { display: flex; gap: 8px; }
.footer__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
color: rgba(248, 250, 252, .8);
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .1);
transition: all var(--dur-fast) ease;
}
.footer__social a:hover { color: #fff; background: rgba(99, 102, 241, .35); border-color: rgba(99, 102, 241, .5); transform: translateY(-2px); }
.footer__social .icon { width: 18px; height: 18px; }
.footer__col h4,
.footer__title {
font-family: var(--font-body);
font-size: .78rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: #fff;
margin: 6px 0 18px;
}
.footer__links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.footer__links a {
display: inline-block;
font-size: .95rem;
color: var(--text-muted-dark);
transition: color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.footer__links a:hover { color: #fff; transform: translateX(3px); }
.footer__bottom {
padding-top: 28px;
display: flex;
flex-direction: column;
gap: 16px;
}
.footer__disclaimer {
font-size: .8rem;
line-height: 1.6;
color: rgba(154, 168, 191, .85);
max-width: 980px;
margin: 0;
}
.footer__legal {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 24px;
padding-right: 150px; /* keep clear of the fixed chat launcher + back-to-top */
font-size: .82rem;
color: var(--text-muted-dark);
}
.footer__legal p { margin: 0; }
.footer__legal a { color: rgba(248, 250, 252, .85); font-weight: 500; }
.footer__legal a:hover { color: #fff; }
.footer__contact { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer__contact a { display: inline-flex; align-items: center; gap: 6px; }
.footer__contact .icon { width: 16px; height: 16px; color: var(--cyan); }
.footer__address { font-style: normal; }
/* ==========================================================================
25 Reveal system
========================================================================== */
/* The pre-state is gated on `html.js` (set by an inline script in partials/head.html before first paint),
so a blocked or failed main.js leaves every element visible.
The reveal is a `backwards`-filled animation rather than a transition: once it has played the element
returns to its own styles, so card/tile hover transitions and `.card--pricing.is-featured` keep their
own speeds and no stagger delay leaks into hover states. */
html.js [data-reveal]:not(.is-visible) { opacity: 0; }
html.js [data-reveal].is-visible {
animation: reveal-in var(--dur) var(--ease) backwards;
animation-delay: calc(min(var(--i, 0), 6) * 80ms + var(--delay, 0ms));
}
@keyframes reveal-in {
from { opacity: 0; transform: var(--reveal-from, translateY(28px)); filter: var(--reveal-filter, none); }
to { opacity: 1; transform: var(--reveal-to, none); filter: none; }
}
[data-reveal="fade"] { --reveal-from: none; }
[data-reveal="left"] { --reveal-from: translateX(-36px); }
[data-reveal="right"] { --reveal-from: translateX(36px); }
[data-reveal="scale"] { --reveal-from: scale(.92); }
[data-reveal="blur"] { --reveal-from: translateY(14px); --reveal-filter: blur(10px); }
[data-reveal="down"] { --reveal-from: translateY(-24px); }
/* Stagger: main.js sets --i per IntersectionObserver batch (viewport-entry order, capped at 6 by the min() above)
and --delay from [data-reveal-delay]. */
@media (min-width: 1024px) {
.card--pricing.is-featured[data-reveal] { --reveal-to: translateY(-10px); } /* land on the featured lift, no snap */
}
/* Infinite decorative animations pause while their section is scrolled out of view (main.js toggles .is-offscreen) */
.is-offscreen .aurora,
.is-offscreen .float-chip,
.marquee.is-offscreen .marquee__track { animation-play-state: paused; }
/* ==========================================================================
26 Dev error overlay (dev-only, injected by main.js on file:// / localhost)
========================================================================== */
#dev-js-errors {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-dev);
padding: 10px 16px;
background: #B91C1C;
color: #fff;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
box-shadow: 0 4px 20px rgba(0, 0, 0, .4);
border-bottom: 2px solid #FCA5A5;
max-height: 40vh;
overflow: auto;
}
#dev-js-errors::before {
content: "JS ERRORS";
display: block;
font-weight: 700;
letter-spacing: .1em;
margin-bottom: 4px;
}
/* ==========================================================================
27 Responsive breakpoints
========================================================================== */
/* Minimal header (no nav links: landing, thank-you, 404): the email contact link (.nav__phone) stays visible on every width */
.site-header--minimal .nav__phone { position: relative; }
@media (max-width: 1100px) {
.nav__phone { display: none; }
.site-header--minimal .nav__phone { display: inline-flex; }
.nav__links { gap: 0; }
.nav__links a { padding: 0 11px; font-size: .92rem; }
}
@media (max-width: 1023px) {
/* TOC becomes wrapped chips; .legal-grid switches to the sidebar layout at min-width 1024px, so the two never overlap */
.toc { position: static; max-height: none; }
.toc ol, .toc ul { flex-direction: row; flex-wrap: wrap; gap: 4px; }
.toc a { border-left: 0; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 12px; font-size: .85rem; }
.toc a.is-active, .toc a[aria-current="true"] { border-color: rgba(99, 102, 241, .3); }
.toc ol ol, .toc ul ul { display: none; }
.toc__num { min-width: 0; margin-right: 2px; } /* chip mode: number hugs the label */
}
@media (max-width: 1024px) {
.nav__links { display: none; }
.nav-toggle { display: inline-flex; }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.footer__brand { grid-column: 1 / -1; max-width: 560px; }
.footer__grid > .footer__col:last-child { grid-column: auto; }
}
@media (max-width: 860px) {
.hero__grid,
.grid--split,
.grid--split-rev { grid-template-columns: minmax(0, 1fr); }
.hero__content { max-width: 100%; }
.hero__visual { max-width: 560px; margin-inline: auto; width: 100%; }
.feature-row { grid-template-columns: minmax(0, 1fr); }
.feature-row--rev > :first-child { order: 0; }
.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps:not(.steps--vertical) .steps__line { display: none; }
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } /* three across until 720px: a 2x2 fallback strands step 3 */
.steps--3:not(.steps--vertical) .steps__line { display: block; }
.footer__grid { grid-template-columns: 1fr 1fr; }
.footer__brand { grid-column: 1 / -1; max-width: 100%; }
.trust-bar { gap: 10px 24px; padding: 18px var(--gutter); }
.trust-item { font-size: .88rem; }
.sticky-cta { display: flex; }
.card--pricing.is-featured { transform: none; }
.back-to-top { right: 92px; bottom: 24px; }
/* Keep the button tappable above the full-width cookie banner (main.js sets body.cookie-open + --cookie-h) */
body.cookie-open .back-to-top { bottom: calc(var(--cookie-h, 180px) + 28px); }
.toast { bottom: 88px; }
}
@media (max-width: 560px) {
.site-header--minimal .nav__phone {
width: 40px;
height: 40px;
padding: 0;
justify-content: center;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .16);
background: rgba(255, 255, 255, .06);
}
.site-header--minimal .nav__phone > :not(.icon) { /* email address stays in the accessible name */
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
}
@media (max-width: 720px) {
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
.steps, .steps--3 { grid-template-columns: 1fr; gap: 24px; }
.steps:not(.steps--vertical) .steps__line {
display: block;
top: 26px;
bottom: 26px;
left: 25px;
right: auto;
width: 2px;
height: auto;
}
.steps:not(.steps--vertical) .steps__line::after { transform: scaleY(0); transform-origin: top center; }
.steps.is-visible:not(.steps--vertical) .steps__line::after { transform: scaleY(1); }
.steps:not(.steps--vertical) .step { position: relative; }
.steps:not(.steps--vertical) .step:last-child::before {
content: "";
position: absolute;
left: 20px;
width: 12px;
top: 52px;
bottom: -12px;
background: var(--steps-bg);
pointer-events: none;
}
/* Number on the left, title + text stacked on the right (works with or without a wrapper div) */
.step {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
column-gap: 18px;
row-gap: 0;
align-items: start;
text-align: left;
padding: 0;
}
.step__num { grid-column: 1; grid-row: 1 / span 4; }
.step > :not(.step__num) { grid-column: 2; }
.step__title, .step h3 { margin: 12px 0 8px; }
.step .icon-tile { margin-top: 8px; }
.section-head { margin-bottom: 36px; }
.carousel__controls { gap: 14px; }
.cta-band { border-radius: var(--radius); }
.faq__q { padding: 16px 18px; font-size: 1rem; }
.faq__a-inner { padding: 0 18px 18px; }
.footer__bottom { gap: 14px; }
.footer__legal { flex-direction: column; align-items: flex-start; padding-right: 0; padding-bottom: 64px; }
.table-wrap { border-radius: var(--radius-sm); }
.cookie-banner { left: 12px; bottom: 12px; width: calc(100vw - 24px); }
body.has-sticky-cta .cookie-banner { bottom: 84px; }
.legal-meta { font-size: .8rem; }
}
@media (max-width: 560px) {
:root { --header-h: 64px; }
/* Keep a persistent chat CTA in the phone header: icon-only round button (label hidden) */
.nav__cta { gap: 8px; }
.nav__cta .btn { display: inline-flex; width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
.nav__cta .btn .icon { width: 20px; height: 20px; }
.nav__cta .btn .nav__cta-label { display: none; }
.nav__cta .nav-toggle { display: inline-flex; }
.logo__mark { width: 32px; height: 32px; flex-basis: 32px; }
.logo__word { font-size: 1.15rem; }
.btn--lg { height: 52px; padding: 0 24px; font-size: 1rem; }
.hero__actions .btn,
.cta-band .btn-group .btn,
.cta-band__actions .btn,
.btn-group--stack-mobile .btn { width: 100%; }
.stats { grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { padding: 18px 12px; }
.stat__num { font-size: 2rem; }
.card { padding: 22px; border-radius: var(--radius); }
.card--pricing { padding: 26px 22px; }
.footer__grid { grid-template-columns: 1fr; gap: 28px; }
.mobile-menu__links a { font-size: 1.3rem; padding: 14px 10px; }
.page-hero { padding-top: calc(var(--header-h) + 40px); padding-bottom: 40px; }
.breadcrumbs { margin-bottom: 16px; }
.tabs { gap: 6px; }
.tabs a, .tabs button { height: 36px; padding: 0 12px; font-size: .84rem; }
.cookie-banner__actions .btn { flex: 1 1 auto; }
.back-to-top { width: 40px; height: 40px; right: 84px; }
/* Tidy 2x2 grid instead of a ragged 2 / 1 / 1 wrap */
.trust-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; justify-items: start; padding: 16px var(--gutter); }
.trust-item { white-space: normal; align-items: flex-start; font-size: .84rem; line-height: 1.3; }
.trust-item .icon { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; }
}
/* ==========================================================================
28 Reduced motion
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
[data-reveal], html.js [data-reveal]:not(.is-visible), html.js [data-reveal].is-visible { opacity: 1; transform: none; filter: none; animation: none; }
.marquee__track { animation: none; transform: none; flex-wrap: wrap; justify-content: center; width: auto; }
.marquee { -webkit-mask-image: none; mask-image: none; }
.aurora { animation: none; }
.float-chip { animation: none; }
.pill__dot::after { animation: none; display: none; }
.steps__line::after { transform: none; }
.steps--vertical .steps__line::after { transform: none; }
.btn:hover, .card:hover { transform: none; }
.btn::after { display: none; }
.btn.is-loading::after { display: block; animation: spin 1s linear infinite !important; animation-duration: 1s !important; animation-iteration-count: infinite !important; }
.success-check { animation: none; }
.success-check svg path { animation: none; stroke-dashoffset: 0; }
}
/* ==========================================================================
29 Print (prose / legal pages)
========================================================================== */
@media print {
:root { --header-h: 0px; }
body { background: #fff; color: #000; font-size: 11pt; }
.site-header,
.mobile-menu,
.cookie-banner,
.back-to-top,
.sticky-cta,
.skip-link,
.toc,
.cta-band,
.mm-chat,
.hero__bg,
.aurora,
.grid-overlay,
#dev-js-errors,
.footer__social,
.footer__badges { display: none !important; }
.page-hero { background: none; color: #000; padding: 0 0 16pt; border-bottom: 1px solid #000; }
.page-hero h1, .page-hero .lead, .breadcrumbs, .breadcrumbs a { color: #000; }
.section { padding: 16pt 0; }
.legal-grid, .prose-layout { grid-template-columns: 1fr; }
.prose { max-width: none; font-size: 11pt; line-height: 1.5; }
.prose h2 { break-after: avoid; page-break-after: avoid; }
.prose a { color: #000; text-decoration: underline; }
.prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
.site-footer { background: none; color: #000; border-top: 1px solid #000; padding: 12pt 0; }
.site-footer .footer__grid { display: none; }
.footer__disclaimer, .footer__legal, .footer__legal a { color: #000; }
[data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
.card, .callout, .table-wrap { box-shadow: none; break-inside: avoid; page-break-inside: avoid; }
table { font-size: 10pt; }
}
/* ==========================================================================
Screenshot mode (dev-only; html.is-shot is set by main.js when ?shot=1 on file:// or localhost)
Freezes motion so headless-Chrome screenshots are deterministic. Inert in production.
========================================================================== */
html.is-shot *, html.is-shot *::before, html.is-shot *::after {
transition-duration: 0s !important; transition-delay: 0s !important;
animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
}
html.is-shot [data-reveal], html.is-shot [data-reveal].is-visible { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
html.is-shot .pill__dot::after { display: none; }
html.is-shot .steps__line { transform: none !important; }
html.is-shot .cookie-banner { display: none !important; }
/* Headless Chrome does not paint semi-transparent fixed layers inside the 390px iframe wrapper — make the bar opaque for shots */
html.is-shot .sticky-cta { background: #0D1425; -webkit-backdrop-filter: none; backdrop-filter: none; }