/* ── typefaces ──────────────────────────────────────────────────────────
Self-hosted latin subsets, 62 KB for both — no third-party request on the
critical path. Instrument Serif carries the voice; Inter stays out of its
way. swap, so text paints immediately in the fallback and reflows once. */
@font-face {
font-family: 'Instrument Serif';
font-style: normal; font-weight: 400; font-display: swap;
src: url('assets/fonts/instrument-serif-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}
@font-face {
font-family: 'Press Start 2P';
font-style: normal; font-weight: 400; font-display: swap;
src: url('assets/fonts/press-start-2p-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}
@font-face {
font-family: 'Inter';
font-style: normal; font-weight: 400 700; font-display: swap;
src: url('assets/fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}
/* ── theme tokens ───────────────────────────────────────────────────── */
:root {
--bg: #ffffff;
--surface: #ffffff;
--surface-2: #fbfbfd;
--ink: #1a1310;
--muted: #6f6259;
--faint: #7b6e64; /* 4.93:1 on white, 4.77:1 on surface-2 */
--line: #e9e9ef;
--line-soft: #f1f1f5;
--line-strong: #d5d5e0;
--brand: #b4400f;
--brand-2: #e2703a;
--brand-soft: rgba(180,64,15,.09);
--brand-line: #edc3ab;
--on-brand: #ffffff;
--grid: rgba(10,10,16,.08);
--grid-hi: rgba(10,10,16,.34);
/* dot lattice — mobile/tablet only (see the hero background override) */
--dot: rgba(10,10,16,.26);
--hover: rgba(10,10,16,.045);
--sh: 20,20,40;
color-scheme: light;
}
:root[data-theme="dark"] {
--bg: #0d0b0a;
--surface: #171412;
--surface-2: #1c1815;
--ink: #f6f3f1;
--muted: #b0a49d;
--faint: #8d8079; /* 5.14:1 on body, 4.62:1 on surface-2 */
--line: #2e2825;
--line-soft: #241f1c;
--line-strong: #453b36;
--brand: #e2703a;
--brand-2: #f09a6b;
--brand-soft: rgba(226,112,58,.15);
--brand-line: #7d4327;
--on-brand: #14100c;
--grid: rgba(255,255,255,.075);
--grid-hi: rgba(255,255,255,.30);
--dot: rgba(255,255,255,.26);
--hover: rgba(255,255,255,.06);
--sh: 0,0,0;
color-scheme: dark;
}
:root {
--font: Inter, ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
/* display face: headline, section headings, the rotating term */
--font-display: 'Instrument Serif', ui-serif, Georgia, "Times New Roman", serif;
--ease: cubic-bezier(.22, 1, .36, 1);
/* menu icons — masked so they inherit the brand colour (no icon library) */
--i-board: url('data:image/svg+xml;utf8,');
--i-star: url('data:image/svg+xml;utf8,');
--i-book: url('data:image/svg+xml;utf8,');
--i-users: url('data:image/svg+xml;utf8,');
--i-chart: url('data:image/svg+xml;utf8,');
--i-shield: url('data:image/svg+xml;utf8,');
--i-bolt: url('data:image/svg+xml;utf8,');
--i-id: url('data:image/svg+xml;utf8,');
--i-clock: url('data:image/svg+xml;utf8,');
--i-cap: url('data:image/svg+xml;utf8,');
--i-lab: url('data:image/svg+xml;utf8,');
--i-building: url('data:image/svg+xml;utf8,');
--i-code: url('data:image/svg+xml;utf8,');
--i-doc: url('data:image/svg+xml;utf8,');
--i-search: url('data:image/svg+xml;utf8,');
--i-pen: url('data:image/svg+xml;utf8,');
--i-award: url('data:image/svg+xml;utf8,');
--i-tools: url('data:image/svg+xml;utf8,');
--i-sun: url('data:image/svg+xml;utf8,');
--i-moon: url('data:image/svg+xml;utf8,');
--i-bell: url('data:image/svg+xml;utf8,');
--i-out: url('data:image/svg+xml;utf8,');
--i-rocket: url('data:image/svg+xml;utf8,');
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0; background: var(--bg); color: var(--ink);
font-family: var(--font); -webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* ── hero shell + interactive lattice ───────────────────────────────── */
/* Two stacked copies of the same grid, perfectly aligned:
::before is the faint baseline you always see;
::after is a brighter copy revealed only inside a spotlight that follows
the pointer. Geometry never moves — only visibility changes. */
.hero {
position: relative; overflow: hidden;
padding-bottom: clamp(48px, 6vw, 88px);
--mx: 50%; --my: 26%; --spot: 300px;
background: var(--bg);
}
.hero::before,
.hero::after {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-size: 1cm 1cm;
background-position: center top;
}
/* baseline — subtle, but genuinely visible */
.hero::before {
background-image:
linear-gradient(to right, var(--grid) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 84%);
mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 84%);
}
/* spotlight — the same black grid, just darker where the pointer is */
.hero::after {
background-image:
linear-gradient(to right, var(--grid-hi) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid-hi) 1px, transparent 1px);
-webkit-mask-image:
radial-gradient(circle var(--spot) at var(--mx) var(--my),
#000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.28) 62%, transparent 78%);
mask-image:
radial-gradient(circle var(--spot) at var(--mx) var(--my),
#000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.28) 62%, transparent 78%);
}
/* ── mobile + tablet: video backdrop instead of the ruled grid ───────────
The component's background layer: a looping muted video pinned behind the
content with object-fit: cover. Hidden entirely above 1024px, where the
ruled lattice and its pointer spotlight are untouched. */
.hero-bg { position: absolute; inset: 0; z-index: 0; display: none; overflow: hidden; }
.hero-bg video {
position: absolute; inset: 0; display: block;
width: 100%; height: 100%; object-fit: cover;
/* the aurora lives on the left of the frame, and a tall hero crops `cover`
horizontally — centred, the visible slice would be the empty side */
object-position: left center;
}
/* the scrim is what makes the copy readable on both themes: the video is a
full-strength image, and neither near-white nor near-black text survives on
top of one unaided. Each theme veils toward its own page colour, strongest
behind the headline and clearing by the workspace window. */
.hero-scrim {
position: absolute; inset: 0; display: block; pointer-events: none;
background:
linear-gradient(180deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.16) 28%,
rgba(255,255,255,.58) 52%,
rgba(255,255,255,.92) 72%,
var(--bg) 88%);
}
:root[data-theme="dark"] .hero-scrim {
background:
linear-gradient(180deg,
rgba(13,11,10,.05) 0%,
rgba(13,11,10,.30) 28%,
rgba(13,11,10,.68) 52%,
rgba(13,11,10,.93) 72%,
var(--bg) 88%);
}
@media (max-width: 1024px) {
/* the ruled grid and its pointer spotlight give way to the video */
.hero::before, .hero::after { display: none; }
.hero-bg { display: block; }
}
/* text left, live workspace right — the window keeps its full scale and
bleeds off the right edge rather than shrinking to fit the column */
.hero-inner {
position: relative; z-index: 1;
display: grid;
grid-template-columns: minmax(0, clamp(400px, 26vw, 520px)) minmax(0, 1fr);
/* the gap has to read as a deliberate column break, not a near-miss —
it scales with the viewport instead of pinching shut on wide screens */
align-items: center; column-gap: clamp(48px, 4vw, 110px);
/* the workspace column stops short of the screen edge, never touches it */
padding: clamp(32px, 4vw, 68px) var(--dash-edge) 0 var(--edge);
}
/* ── sticky header ──────────────────────────────────────────────────── */
/* ONE shell for the whole site. The header, the hero copy, the marquee, every
section and the footer all resolve their left edge from these two values, so
nothing on the page can drift out of alignment with anything else. */
:root {
--hdr: 72px; --hdr-gap: 14px; --hdr-side: 16px; --shell: 1520px; --gutter: clamp(20px, 4vw, 48px);
/* breathing room between the workspace window and the screen edge: 1–2cm
(38–76px) across the whole desktop range */
--dash-edge: clamp(40px, 3vw, 72px);
}
/* distance from the viewport edge to the shell's content edge */
.hero-inner { --edge: calc(max(0px, (100% - var(--shell)) / 2) + var(--gutter)); }
/* A floating, rounded bar — never a hard-edged box. It inches in and rounds
further as you scroll rather than switching between two shapes, so the
header reads as one object that settles. --hdr-gap drives both the inset
here and the hero's pull-up below; the drawer breakpoint zeroes it, where a
detached bar would just eat vertical space. */
.site-header {
position: sticky; top: var(--hdr-gap); z-index: 60;
width: calc(100% - var(--hdr-side) * 2);
margin: var(--hdr-gap) auto 0; max-width: 1600px;
/* opaque, always — a translucent bar lets the lattice read through the menu */
background: var(--surface);
border-radius: 20px;
box-shadow: 0 6px 22px -12px rgba(var(--sh), .18);
transition: max-width .32s var(--ease), top .32s var(--ease),
border-color .28s, box-shadow .28s, border-radius .32s var(--ease);
}
/* condensed state — set by JS past the scroll threshold */
.site-header.scrolled {
max-width: 1120px; border-radius: 24px;
box-shadow: 0 0 0 1px var(--line), 0 14px 40px -12px rgba(var(--sh), .16);
}
/* The bar is inset by --hdr-side, which would push the brand that far right of
every other left edge on the page. Its padding gives the inset back. Past
shell + 2*side the bar stops being edge-limited, its own centring absorbs
the inset, and the compensation has to stop or it over-corrects. */
.hdr-inner {
display: flex; align-items: center; gap: 32px;
max-width: var(--shell); margin: 0 auto;
height: var(--hdr); padding: 0 calc(var(--gutter) - var(--hdr-side));
transition: padding .32s var(--ease);
}
/* Once the viewport passes the shell, the page starts centring its content and
the bar has to centre with it. It can only do that while its own content box
is still at least a shell wide — so from that point the inset ramps in from
zero rather than being a flat 16px, and the compensation above stops. Ramp
and hand-off are both smooth; nothing steps. */
@media (min-width: 1520px) {
:root { --hdr-side: min(16px, calc((100vw - var(--shell)) / 2)); }
.hdr-inner { padding-inline: var(--gutter); }
}
.site-header.scrolled .hdr-inner { padding: 0 clamp(12px, 2vw, 20px); }
/* hero slides under the header so the lattice runs behind it — and past the
float gap as well, so the bar sits ON the hero rather than above a strip
of page background */
.hero {
margin-top: calc((var(--hdr) + var(--hdr-gap)) * -1);
padding-top: calc(var(--hdr) + var(--hdr-gap));
}
/* ── mobile toggle ──────────────────────────────────────────────────── */
.burger {
display: none; margin-left: auto;
width: 40px; height: 40px; border-radius: 10px;
align-items: center; justify-content: center;
border: 1px solid var(--line); background: var(--surface);
color: var(--ink); cursor: pointer;
}
.menu-icon { width: 21px; height: 21px; transition: transform .3s ease-in-out; }
.menu-icon .mi-morph {
stroke-dasharray: 12 63;
transition: stroke-dasharray .3s ease-in-out, stroke-dashoffset .3s ease-in-out;
}
.burger[aria-expanded="true"] .menu-icon { transform: rotate(-45deg); }
.burger[aria-expanded="true"] .mi-morph { stroke-dasharray: 20 300; stroke-dashoffset: -32.42px; }
/* ── mobile panel ───────────────────────────────────────────────────── */
.mobile-panel {
position: fixed; inset: var(--hdr) 0 0; z-index: 55;
display: flex; flex-direction: column;
background: var(--surface);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-top: 1px solid var(--line);
animation: mp-in .26s var(--ease) both;
}
.mobile-panel[hidden] { display: none; }
@keyframes mp-in { from { opacity: 0; transform: scale(.985); } }
.mp-scroll { flex: 1; overflow-y: auto; padding: 18px 20px 8px; -webkit-overflow-scrolling: touch; }
.mp-scroll h6 {
margin: 18px 0 6px; font-size: 11px; font-weight: 700;
letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
}
.mp-scroll h6:first-child { margin-top: 0; }
/* ── mobile accordion ───────────────────────────────────────────────── */
.acc { border-bottom: 1px solid var(--line); }
.acc-t {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; padding: 16px 4px; border: 0; background: none;
font: inherit; font-size: 15.5px; font-weight: 600; color: var(--ink);
cursor: pointer; text-align: left;
}
.acc-t .chev { width: 14px; height: 14px; transition: transform .26s var(--ease); }
.acc-t[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* grid-template-rows animates to auto-height without measuring in JS */
.acc-c {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows .3s var(--ease);
}
.acc-t[aria-expanded="true"] + .acc-c { grid-template-rows: 1fr; }
/* must be a single wrapper: 0fr sizes only the first row, so direct
children beyond the first would stay visible when collapsed */
.acc-in { overflow: hidden; min-height: 0; }
.acc-c a {
display: flex; align-items: center; gap: 12px;
padding: 9px 4px; text-decoration: none; color: var(--ink);
}
.acc-c a b { display: block; font-size: 14.5px; font-weight: 500; }
.acc-c a em {
display: block; font-style: normal; font-size: 12px;
color: var(--muted); margin-top: 2px;
}
.mt {
width: 38px; height: 38px; border-radius: 10px; flex: none;
border: 1px solid var(--line); background: var(--surface-2);
}
.mt::after { inset: 10px; }
.mp-plain { padding-top: 8px; }
.mp-plain a {
display: block; padding: 12px 4px; border-radius: 10px;
color: var(--ink); text-decoration: none; font-size: 15.5px; font-weight: 600;
}
.mp-scroll a:active { background: var(--hover); }
.mp-foot {
flex: none; display: grid; gap: 10px;
padding: 14px 20px calc(18px + env(safe-area-inset-bottom));
border-top: 1px solid var(--line);
}
.mp-foot .btn { text-align: center; }
/* ── nav ────────────────────────────────────────────────────────────── */
.nav { display: flex; align-items: center; gap: 32px; padding: 22px clamp(20px, 5vw, 64px); }
/* The supplied lockup is a single flat ink throughout, so one alpha PNG masked
and coloured by CSS covers every surface — orange on dark, white on the
orange bar — instead of shipping and preloading two bitmaps. The still
carries real text for screen readers and search engines. */
:root { --logo: #fe3100; } /* the lockup's own ink */
.brand {
display: inline-flex; align-items: center; padding-block: 9px; /* thumb-sized hit area */
/* an with no colour falls back to the UA's link blue — invisible here
only because the label is sr-only, but wrong the moment it is not */
text-decoration: none; color: var(--ink);
font-size: 19px; font-weight: 600; letter-spacing: -.02em;
}
/* if masking is unavailable, drop the graphic and let the wordmark show as
text rather than leaving the header with no brand at all */
@supports not ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
.brand-mark { display: none; }
.brand .sr-only, .ab-name .sr-only {
position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible;
}
}
.brand-mark {
display: block; width: 100px; height: 38px;
background: var(--logo-ink, var(--logo));
-webkit-mask: url('assets/logo-white.png') no-repeat center / contain;
mask: url('assets/logo-white.png') no-repeat center / contain;
}
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-links > a,
.menu-trigger {
display: inline-flex; align-items: center; gap: 5px;
padding: 8px 12px; border-radius: 9px;
color: var(--muted); text-decoration: none; font: inherit; font-size: 14px;
background: none; border: 0; cursor: pointer;
transition: color .2s, background .2s;
}
.nav-links > a:hover,
.menu-trigger:hover,
.menu-trigger[aria-expanded="true"] { color: var(--ink); background: var(--hover); }
.chev { width: 12px; height: 12px; transition: transform .28s var(--ease); }
.menu-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* ── mega menu ──────────────────────────────────────────────────────── */
.menu { position: relative; }
.menu-panel {
position: absolute; top: calc(100% + 10px); left: 0; z-index: 40;
width: max-content; max-width: min(560px, calc(100vw - 40px));
padding: 18px; border-radius: 16px;
background: var(--surface); border: 1px solid var(--line);
box-shadow: 0 24px 60px rgba(var(--sh), .14), 0 2px 8px rgba(var(--sh), .05);
opacity: 0; transform: translateY(-6px) scale(.985);
transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.menu-panel.wide { max-width: min(900px, calc(100vw - 40px)); }
.menu-panel.open { opacity: 1; transform: none; }
.menu-panel[hidden] { display: none; }
.panel-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.panel-side { padding-left: 20px; border-left: 1px solid var(--line); }
/* integrity line — the promise the copy has to keep */
.panel-note {
margin: 16px -18px -18px; padding: 13px 28px;
border-top: 1px solid var(--line); background: var(--surface-2);
border-radius: 0 0 16px 16px;
font-size: 12px; color: var(--muted);
}
.panel-note strong { color: var(--ink); font-weight: 600; }
.menu-panel h6 {
margin: 0 0 12px; padding-left: 10px;
font-size: 11px; font-weight: 700; letter-spacing: .09em;
text-transform: uppercase; color: var(--faint);
}
.menu-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.panel-main ul, .panel-two { grid-template-columns: 1fr 1fr; }
.menu-panel a {
display: grid; grid-template-columns: auto 1fr; column-gap: 11px; row-gap: 4px;
padding: 11px; border-radius: 11px; text-decoration: none;
transition: background .18s;
}
.menu-panel a:hover, .menu-panel a:focus-visible { background: var(--hover); outline: none; }
/* ── featured grid cards ────────────────────────────────────────────── */
.gcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.menu-panel a.gcard {
position: relative; isolation: isolate; overflow: hidden;
display: flex; flex-direction: column; gap: 10px;
min-height: 148px; padding: 16px 17px;
border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
transition: border-color .15s;
}
.menu-panel a.gcard:hover { background: var(--surface); border-color: var(--line-strong); }
.gc-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* skewed lattice that lifts on hover */
.gc-bg::before {
content: ''; position: absolute; inset: -25%;
background-image:
linear-gradient(to right, var(--line) 1px, transparent 1px),
linear-gradient(to bottom, var(--line) 1px, transparent 1px),
/* a few filled cells, like the reference's random squares */
linear-gradient(var(--hover), var(--hover)),
linear-gradient(var(--hover), var(--hover)),
linear-gradient(var(--hover), var(--hover));
background-size: 30px 30px, 30px 30px, 29px 29px, 29px 29px, 29px 29px;
background-position: 0 0, 0 0, 212px 61px, 272px 121px, 182px 151px;
background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
transform: skewY(-12deg) translateY(8px);
transition: transform .18s ease-out;
-webkit-mask-image: linear-gradient(225deg, #000, transparent);
mask-image: linear-gradient(225deg, #000, transparent);
}
.menu-panel a.gcard:hover .gc-bg::before { transform: skewY(-12deg) translateY(0); }
/* brand-tinted bloom, in place of the reference's pink/blue conic */
.gc-bg::after {
content: ''; position: absolute; inset: -10%;
background: conic-gradient(var(--brand) 0deg, var(--brand-2) 117deg, var(--brand-2) 180deg, #5182fc 240deg, var(--brand) 360deg);
filter: blur(50px); opacity: 0; transition: opacity .18s;
}
.menu-panel a.gcard:hover .gc-bg::after { opacity: .13; }
.gcard .mi { grid-row: auto; margin: 0; }
/* both must be block — as inline spans a short title lets the description
ride up onto the same line */
.gc-t { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.gc-d { display: block; margin-top: 5px; font-size: 12px; line-height: 1.45; color: var(--muted); font-style: normal; }
.gcard .gc-txt { display: block; }
/* ── small rows with a sliding arrow ────────────────────────────────── */
.menu-panel a.srow {
display: flex; align-items: center; gap: 10px;
padding: 10px 10px; border-radius: 9px;
}
.srow .mi { width: 22px; height: 22px; border-radius: 7px; }
.srow .mi::after { inset: 4px; }
.srow .s-t { font-size: 13.5px; color: var(--ink); }
.srow .arw-i {
margin-left: auto; width: 14px; height: 14px; flex: none;
opacity: 0; transform: translateX(-6px);
transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.menu-panel a.srow:hover .arw-i, .menu-panel a.srow:focus-visible .arw-i { opacity: .6; transform: none; }
.menu-panel b {
grid-column: 2; align-self: center;
font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.menu-panel em {
grid-column: 2; font-style: normal;
font-size: 12px; line-height: 1.45; color: var(--muted);
}
.mi {
grid-row: 1 / span 2; align-self: start; margin-top: 1px;
width: 26px; height: 26px; border-radius: 8px; flex: none;
background: var(--brand-soft);
position: relative;
}
.mi::after {
content: ''; position: absolute; inset: 5px;
background: var(--brand);
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-position: center; mask-position: center;
}
.mi-board::after { -webkit-mask-image: var(--i-board); mask-image: var(--i-board); }
.mi-star::after { -webkit-mask-image: var(--i-star); mask-image: var(--i-star); }
.mi-book::after { -webkit-mask-image: var(--i-book); mask-image: var(--i-book); }
.mi-users::after { -webkit-mask-image: var(--i-users); mask-image: var(--i-users); }
.mi-chart::after { -webkit-mask-image: var(--i-chart); mask-image: var(--i-chart); }
.mi-shield::after { -webkit-mask-image: var(--i-shield); mask-image: var(--i-shield); }
.mi-bolt::after { -webkit-mask-image: var(--i-bolt); mask-image: var(--i-bolt); }
.mi-id::after { -webkit-mask-image: var(--i-id); mask-image: var(--i-id); }
.mi-clock::after { -webkit-mask-image: var(--i-clock); mask-image: var(--i-clock); }
.mi-cap::after { -webkit-mask-image: var(--i-cap); mask-image: var(--i-cap); }
.mi-lab::after { -webkit-mask-image: var(--i-lab); mask-image: var(--i-lab); }
.mi-building::after { -webkit-mask-image: var(--i-building); mask-image: var(--i-building); }
.mi-code::after { -webkit-mask-image: var(--i-code); mask-image: var(--i-code); }
.mi-doc::after { -webkit-mask-image: var(--i-doc); mask-image: var(--i-doc); }
.mi-search::after { -webkit-mask-image: var(--i-search); mask-image: var(--i-search); }
.mi-pen::after { -webkit-mask-image: var(--i-pen); mask-image: var(--i-pen); }
.mi-award::after { -webkit-mask-image: var(--i-award); mask-image: var(--i-award); }
.mi-tools::after { -webkit-mask-image: var(--i-tools); mask-image: var(--i-tools); }
.mi-rocket::after { -webkit-mask-image: var(--i-rocket); mask-image: var(--i-rocket); }
.nav-cta {
margin-left: auto; padding: 9px 18px; border-radius: 999px;
border: 1px solid var(--line); background: var(--surface);
color: var(--ink); text-decoration: none; font-size: 14px;
transition: background .2s, border-color .2s, color .2s;
}
.nav-cta:hover { background: var(--ink); color: var(--on-brand); border-color: var(--ink); }
/* ── copy ───────────────────────────────────────────────────────────── */
.hero-copy { text-align: left; padding: 0; }
/* ── hero type system ───────────────────────────────────────────────────
Four tiers, and every text in the hero belongs to exactly one:
1 display Instrument Serif 400 — h1, stat figures, rotating term
2 lede Inter 400, open leading — the paragraph under the headline
3 micro Inter 600, 11px, uppercase, wide tracking — every label
4 ui Inter 500 — buttons and the assurance line
The micro tier is what makes the section read corporate: pill, eyebrow,
stat captions and the marquee label all speak in the same small voice
instead of four slightly different greys. */
.pill-note {
display: inline-flex; align-items: center; gap: 9px;
padding: 8px 16px 8px 13px; border-radius: 999px;
border: 1px solid var(--line); background: var(--surface);
backdrop-filter: blur(6px);
font-size: 11px; font-weight: 600; line-height: 1.4;
letter-spacing: .11em; text-transform: uppercase;
color: var(--muted); text-decoration: none;
transition: border-color .25s, transform .25s var(--ease);
}
.pill-note:hover { border-color: var(--brand-line); transform: translateY(-1px); }
.ping { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; }
.ping::after {
content: ''; position: absolute; inset: -4px; border-radius: 50%;
border: 1.5px solid var(--brand); opacity: 0;
animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping { 0% { transform: scale(.5); opacity: .7; } 70%,100% { transform: scale(1.4); opacity: 0; } }
.arw { color: var(--brand); font-weight: 600; }
/* Instrument Serif ships one weight (400), so 600 here would synthesise a
fake bold and smear the strokes. It also carries more optical weight than
a grotesque at the same size — hence a little larger, and nowhere near the
negative tracking a sans needs. */
.hero h1 {
margin: 22px 0 0;
font-family: var(--font-display);
font-size: clamp(36px, 3.7vw, 56px); line-height: 1.06;
letter-spacing: -.012em; font-weight: 400;
text-wrap: balance;
}
/* keep the accent phrase whole — a hyphen break across lines reads as a typo */
.hero h1 em { font-style: italic; color: var(--brand); white-space: nowrap; }
/* ── rotating discipline ────────────────────────────────────────────────
Sits above the workspace window and reads as its caption: a quiet lead-in,
then the discipline itself at display size. Two lines rather than one, so
the term always has the full column to itself and never fights the
sentence for space. The word is typed in and out by hero-grid.js. */
.hero-right { display: flex; flex-direction: column; min-width: 0; }
.hero-rot {
display: grid; /* live block and sizer share one cell */
margin: 0 0 clamp(18px, 1.6vw, 26px);
}
.hero-rot > .hr-block { grid-area: 1 / 1; min-width: 0; }
.hr-sizer { visibility: hidden; }
/* A short brand tick marks the label. A full-width rule here would cut the
hero in two right above the window — the seam this page is built to avoid. */
.hr-lead {
display: block; position: relative; padding-top: 18px;
font-size: 11px; font-weight: 600; line-height: 1.6;
letter-spacing: .13em; text-transform: uppercase;
color: var(--muted);
}
.hr-lead::before {
content: ''; position: absolute; top: 0; left: 0;
width: 34px; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, var(--brand), var(--brand-2));
}
.hr-term {
display: block; margin-top: 6px;
font-family: var(--font-display);
font-size: clamp(28px, 2.8vw, 44px); line-height: 1.12;
letter-spacing: -.008em; font-weight: 400;
}
/* the term carries the only gradient on the page — it earns it by being the
one element that changes while you watch it */
.hr-word {
background: linear-gradient(96deg, var(--brand) 10%, var(--brand-2) 90%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.hr-caret {
display: inline-block; width: .06em; height: .82em; margin-left: .07em;
background: var(--brand-2); vertical-align: -.06em; border-radius: 1px;
animation: hr-blink 1.05s steps(1) infinite;
}
@keyframes hr-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.hr-caret { animation: none; opacity: .45; }
}
.sub {
max-width: 480px; margin: 22px 0 0; color: var(--muted);
font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65;
letter-spacing: -.011em; /* Inter tightens up as it grows */
}
.hero-cta { display: flex; gap: 12px; margin: 30px 0 0; flex-wrap: wrap; }
.btn {
padding: 15px 30px; border-radius: 999px;
font-size: 14px; font-weight: 500; letter-spacing: .006em;
text-decoration: none; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
background: var(--ink); color: var(--on-brand); font-weight: 500;
box-shadow: 0 8px 22px rgba(var(--sh), .16);
}
.btn-ghost { border: 1px solid var(--line); color: var(--ink); background: var(--surface); backdrop-filter: blur(6px); }
.btn-ghost:hover { border-color: var(--line-strong); }
.assure {
margin: 18px 0 0; max-width: 440px;
font-size: 12.5px; line-height: 1.6; letter-spacing: .004em; color: var(--faint);
}
/* ── stat row ───────────────────────────────────────────────────────── */
.stats {
position: relative;
list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px; max-width: 520px; margin: clamp(26px, 3vw, 38px) 0 0;
padding: clamp(24px, 2.8vw, 32px) 0 0;
}
/* fades out rather than stopping dead — the same hairline language as the
eyebrow tick, so the hero has no hard rules anywhere in it */
.stats::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, var(--line-strong), var(--line) 55%, transparent);
}
.stats li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* figures in the display face — a serif numeral reads considered where a
grotesque one reads like a dashboard metric */
.stats b {
font-family: var(--font-display);
font-size: clamp(28px, 2.5vw, 36px); line-height: 1; font-weight: 400;
letter-spacing: -.004em; color: var(--ink);
}
.stats span {
font-size: 11px; font-weight: 600; line-height: 1.45;
letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
/* ── video ──────────────────────────────────────────────────────────── */
.hero-video {
margin: clamp(40px, 5vw, 72px) auto 0;
max-width: 1600px; padding: 0 clamp(16px, 2vw, 28px);
}
/* the video IS the workspace window, cropped — so it carries the window's own
rounding and shadow, and the page grid runs right up to its edge */
.video-wrap { position: relative; }
.hero-video video {
display: block; width: 100%; height: auto;
border-radius: clamp(10px, 1.1vw, 18px);
box-shadow: 0 24px 70px rgba(var(--sh), .12), 0 2px 8px rgba(var(--sh), .05);
}
.vid-toggle {
position: absolute; right: 16px; bottom: 16px;
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 14px 8px 11px; border-radius: 999px;
border: 1px solid var(--line); background: rgba(255,255,255,.86);
backdrop-filter: blur(8px);
color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600;
cursor: pointer; opacity: 0; transform: translateY(4px);
transition: opacity .25s var(--ease), transform .25s var(--ease),
border-color .2s, background .2s;
}
.video-wrap:hover .vid-toggle,
.vid-toggle:focus-visible { opacity: 1; transform: none; }
.vid-toggle:hover { border-color: var(--line-strong); background: var(--surface); }
.vid-toggle svg { width: 13px; height: 13px; fill: currentColor; flex: none; }
/* show whichever icon matches the *action* the button performs */
.vid-toggle .ic-play { display: none; }
.vid-toggle[aria-pressed="false"] .ic-pause { display: none; }
.vid-toggle[aria-pressed="false"] .ic-play { display: block; }
/* keep it visible while paused, so the control is discoverable */
.vid-toggle[aria-pressed="false"] { opacity: 1; transform: none; }
/* ── journal marquee ────────────────────────────────────────────────── */
/* lives inside the hero grid — span both columns, then sit on the shell */
.marquee {
grid-column: 1 / -1;
/* same content width as every .wrap section, so its right edge lines up too */
margin: clamp(36px, 4vw, 60px) 0 0; max-width: calc(var(--shell) - 2 * var(--gutter));
display: flex; align-items: center; gap: 22px;
}
.marquee-lbl {
font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
color: var(--faint); white-space: nowrap; flex: none;
}
.marquee-track {
flex: 1; min-width: 0; overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
/* the run holds two identical sets; translating exactly one set width loops seamlessly */
.marquee-run { display: flex; width: max-content; animation: slide 30s linear infinite; }
.mq-set { display: flex; gap: 30px; padding-right: 30px; }
.marquee-track span { font-size: 13.5px; font-weight: 600; color: var(--faint); white-space: nowrap; }
@keyframes slide { to { transform: translateX(-50%); } }
/* the full nav (3 mega menus + 2 links + auth pair + theme) needs ~1000px of
header before it starts wrapping onto two lines — hand over to the drawer
well before that, which also puts iPad landscape on the drawer */
@media (max-width: 1024px) {
/* the drawer is anchored to --hdr and measures from the viewport top, so the
bar goes flush here — a floating one would leave a gap above the panel */
:root { --hdr-gap: 0px; --hdr-side: 0px; }
.site-header { width: 100%; max-width: none; border-radius: 0; box-shadow: none; }
/* the drawer carries its own Sign in / Sign up, so the header pair goes too */
.nav-links, .nav-cta, .nav-auth { display: none; }
.burger { display: inline-flex; margin-left: 0; }
.theme-btn { margin-left: auto; }
.site-header.scrolled { max-width: none; border-radius: 0; }
/* it is a full-width bar here, not a floating pill — so it keeps the shell
gutter instead of the pill's tighter inset, which pushed the brand 20px
left of every other element on the page */
.site-header.scrolled .hdr-inner { padding: 0 var(--gutter); }
}
/* Below this the two-column split leaves the workspace under ~950px, which is
where its five stages stop being readable. Stacking hands it the full shell
instead — a 1400px window with room to breathe beats a cramped 800px one. */
@media (max-width: 1599px) {
.hero-inner {
grid-template-columns: minmax(0, 1fr);
max-width: var(--shell); margin-inline: auto;
padding: clamp(28px, 5vw, 56px) var(--gutter) 0;
row-gap: clamp(34px, 5vw, 52px);
}
/* full shell available now — the prose keeps its measure, but the stat row
spreads out instead of huddling in a 660px column */
.hero-copy { max-width: none; }
.sub, .assure { max-width: 660px; }
.hero h1 { font-size: clamp(32px, 5.4vw, 54px); max-width: 20ch; }
.stats { max-width: 880px; }
}
@media (max-width: 720px) {
.hero-video { padding: 0 12px; }
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; }
/* stacking drops the track out of the row, so `flex: 1` no longer caps its
width and it grows to its 2200px content — clipped by .hero, but the fade
mask ends up off-screen. Pin it back to the container. */
.marquee { flex-direction: column; align-items: stretch; gap: 12px; }
.marquee-track { width: 100%; }
}
/* phones: the board is decorative at this size — keep it legible, not complete */
@media (max-width: 560px) {
.hero h1 { font-size: clamp(29px, 8.4vw, 38px); }
.hero-cta .btn { flex: 1 1 auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
.ping::after, .marquee-run, .fp path { animation: none; }
}
/* ── mega panel (spans the header, columns of grouped links) ─────────── */
.hdr-inner { position: relative; }
.menu { position: static; }
.menu-panel.mega {
left: 0; right: 0; width: auto; max-width: none;
padding: 0; overflow: hidden;
}
.mega-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
padding: 16px 22px 13px; border-bottom: 1px solid var(--line);
background: var(--surface-2);
}
.mega-head h5 {
margin: 0; font-size: 11px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.mega-all { font-size: 12.5px; font-weight: 600; color: var(--brand); text-decoration: none; white-space: nowrap; }
.mega-all:hover { text-decoration: underline; }
/* ── theme toggle ───────────────────────────────────────────────────── */
.theme-btn {
width: 38px; height: 38px; flex: none; margin-left: 10px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--line); border-radius: 10px;
background: var(--surface); color: var(--ink); cursor: pointer;
transition: border-color .2s, background .2s;
}
.theme-btn:hover { border-color: var(--line-strong); }
.theme-btn svg { width: 17px; height: 17px; }
.theme-btn .ic-moon { display: none; }
:root[data-theme="dark"] .theme-btn .ic-sun { display: none; }
:root[data-theme="dark"] .theme-btn .ic-moon { display: block; }
/* ── mobile sub-groups inside the accordion ─────────────────────────── */
.msub { padding: 6px 0 10px; }
.msub-t {
display: flex; align-items: center; gap: 9px; margin: 6px 0 4px;
font-size: 12.5px; font-weight: 700; color: var(--ink);
}
.msub-t .mi { width: 22px; height: 22px; border-radius: 7px; }
.msub-t .mi::after { inset: 5px; }
.msub-l { display: grid; }
.msub-l a {
display: block; padding: 8px 8px 8px 31px; border-radius: 8px;
font-size: 14px; color: var(--muted); text-decoration: none;
}
/* the recorded demo is a light-background video; give it a frame in dark mode */
:root[data-theme="dark"] .hero-video video { border: 1px solid var(--line); }
/* the panel spans the two triggers rather than the whole header */
/* mobile: overview items + a link through to the section */
.m-feat {
display: block !important; margin-top: 6px; padding: 12px 4px !important;
font-size: 14px; font-weight: 600; color: var(--brand) !important;
}
@media (max-width: 980px) {
.ov-grid { grid-template-columns: 1fr; }
.ov-side { border-left: 0; border-top: 1px solid var(--line); }
}
.ov-grid { grid-template-columns: 1fr 268px; }
.menu-panel .ov-quick a.srow {
display: flex; align-items: center; gap: 8px;
padding: 9px 10px; border-radius: 8px;
font-size: 12.8px; color: var(--muted); text-decoration: none;
}
.menu-panel .ov-quick a.srow:hover { color: var(--ink); background: var(--hover); }
.ov-quick .s-t { flex: 1; }
.ov-quick .ov-arw { margin-left: auto; }
/* the mega panel has no padding, so the note's negative margins would push it
outside overflow:hidden and clip the text */
.menu-panel.mega .panel-note { margin: 0; border-radius: 0; }
.lr-d { -webkit-line-clamp: 3; }
/* footer bar */
.mm-foot {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 16px 24px; border-top: 1px solid var(--line); background: var(--surface-2);
}
.menu-panel a.mm-cta {
display: inline-block; padding: 13px 26px; border-radius: 999px;
/* --on-brand, not #fff — see .nav-signup below */
background: var(--brand); color: var(--on-brand); text-decoration: none;
font-size: 14.5px; font-weight: 600;
transition: transform .2s var(--ease), box-shadow .2s;
}
.menu-panel a.mm-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -8px var(--brand); background: var(--brand); }
.menu-panel a.mm-all {
display: inline-flex; align-items: center; gap: 8px; padding: 8px 4px;
color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 600;
}
.menu-panel a.mm-all span { color: var(--brand); transition: transform .2s var(--ease); display: inline-block; }
.menu-panel a.mm-all:hover span { transform: translateX(4px); }
@media (max-width: 980px) {
}
/* ── mega menu: titled columns, icon + label + description ───────────── */
.menu-panel.mega { width: max-content; max-width: calc(100vw - 32px); left: 0; right: auto; padding: 0; }
.mm-cols { display: flex; padding: 22px 0 18px; }
.mm-col { min-width: 0; flex: 1; padding: 0 22px; }
.mm-col + .mm-col { border-left: 1px solid var(--line-soft); }
.mm-col h3 {
margin: 0 0 12px; padding: 0 0 10px 2px;
border-bottom: 1px solid var(--line-soft);
font-size: 10.5px; font-weight: 700; color: var(--muted);
text-transform: uppercase; letter-spacing: .09em;
}
.mm-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.menu-panel .mm-col a {
display: flex; align-items: center; gap: 12px;
padding: 9px 10px; border-radius: 10px; text-decoration: none;
transition: background .18s;
}
.menu-panel .mm-col a:hover, .menu-panel .mm-col a:focus-visible { background: var(--hover); outline: none; }
/* bordered square icon, as in the reference — tinted on hover, not filled blue */
.mm-ic {
position: relative; width: 36px; height: 36px; flex: none;
border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
transition: border-color .25s, background .25s;
}
.mm-ic::after {
content: ''; position: absolute; inset: 9px; background: var(--ink);
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-position: center; mask-position: center;
transition: background .25s;
}
.menu-panel .mm-col a:hover .mm-ic { border-color: var(--brand-line); background: var(--brand-soft); }
.menu-panel .mm-col a:hover .mm-ic::after { background: var(--brand); }
.mm-tx { display: block; line-height: 1.35; }
.mm-tx b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
.mm-tx em {
display: block; margin-top: 3px; font-style: normal;
font-size: 11.5px; line-height: 1.4; color: var(--muted); transition: color .25s;
}
.menu-panel .mm-col a:hover .mm-tx em { color: var(--ink); }
.mm-ic.mi-board::after { -webkit-mask-image: var(--i-board); mask-image: var(--i-board); }
.mm-ic.mi-star::after { -webkit-mask-image: var(--i-star); mask-image: var(--i-star); }
.mm-ic.mi-book::after { -webkit-mask-image: var(--i-book); mask-image: var(--i-book); }
.mm-ic.mi-users::after { -webkit-mask-image: var(--i-users); mask-image: var(--i-users); }
.mm-ic.mi-chart::after { -webkit-mask-image: var(--i-chart); mask-image: var(--i-chart); }
.mm-ic.mi-shield::after { -webkit-mask-image: var(--i-shield); mask-image: var(--i-shield); }
.mm-ic.mi-bolt::after { -webkit-mask-image: var(--i-bolt); mask-image: var(--i-bolt); }
.mm-ic.mi-id::after { -webkit-mask-image: var(--i-id); mask-image: var(--i-id); }
.mm-ic.mi-clock::after { -webkit-mask-image: var(--i-clock); mask-image: var(--i-clock); }
.mm-ic.mi-cap::after { -webkit-mask-image: var(--i-cap); mask-image: var(--i-cap); }
.mm-ic.mi-lab::after { -webkit-mask-image: var(--i-lab); mask-image: var(--i-lab); }
.mm-ic.mi-code::after { -webkit-mask-image: var(--i-code); mask-image: var(--i-code); }
.mm-ic.mi-doc::after { -webkit-mask-image: var(--i-doc); mask-image: var(--i-doc); }
.mm-ic.mi-search::after { -webkit-mask-image: var(--i-search); mask-image: var(--i-search); }
.mm-ic.mi-pen::after { -webkit-mask-image: var(--i-pen); mask-image: var(--i-pen); }
.mm-ic.mi-award::after { -webkit-mask-image: var(--i-award); mask-image: var(--i-award); }
.mm-ic.mi-tools::after { -webkit-mask-image: var(--i-tools); mask-image: var(--i-tools); }
.mm-ic.mi-rocket::after { -webkit-mask-image: var(--i-rocket); mask-image: var(--i-rocket); }
.mm-foot {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 14px 24px; border-top: 1px solid var(--line); background: var(--surface-2);
}
/* second .mm-cta block — this is the one that wins, so the fix belongs here too */
.menu-panel a.mm-cta {
display: inline-block; padding: 12px 24px; border-radius: 999px;
background: var(--brand); color: var(--on-brand); text-decoration: none;
font-size: 14px; font-weight: 600;
transition: transform .2s var(--ease), box-shadow .2s;
}
.menu-panel a.mm-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -8px var(--brand); }
.menu-panel a.mm-all {
display: inline-flex; align-items: center; gap: 8px; padding: 8px 4px;
color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600;
}
.menu-panel a.mm-all span { color: var(--brand); display: inline-block; transition: transform .2s var(--ease); }
.menu-panel a.mm-all:hover span { transform: translateX(4px); }
/* ── sliding hover pill behind the nav triggers ─────────────────────── */
.nav-links { position: relative; }
.nav-pill {
position: absolute; left: 0; top: 0; z-index: -1;
height: 0; width: 0; border-radius: 999px; background: var(--brand-soft);
opacity: 0; pointer-events: none;
transition: transform .32s var(--ease), width .32s var(--ease),
height .32s var(--ease), opacity .2s;
}
.nav-links > a, .menu-trigger { position: relative; }
/* the pill replaces the per-item background so they can't double up */
.nav-links > a:hover, .menu-trigger:hover, .menu-trigger[aria-expanded="true"] { background: none; }
@media (max-width: 1100px) { .mm-cols { gap: 26px; } }
@media (max-width: 980px) {
.mm-cols { flex-direction: column; gap: 18px; }
}
/* the note is a footnote, so it must sit below the CTA in the hierarchy */
.menu-panel.mega .panel-note {
padding: 11px 24px; font-size: 11.5px; color: var(--muted);
background: var(--surface); border-top: 1px solid var(--line-soft);
}
.menu-panel.mega .panel-note strong { color: var(--ink); font-weight: 600; }
/* ── account menu (mobile drawer only) ──────────────────────────────── */
.am { margin-top: 6px; padding-top: 6px; }
.am-label {
margin: 14px 4px 6px; font-size: 11.5px; font-weight: 700;
letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.am-sep { height: 1px; margin: 12px 0 2px; background: var(--line); }
.am-item {
display: flex; align-items: center; gap: 12px; width: 100%;
padding: 11px 10px; border: 0; border-radius: 10px;
background: none; font: inherit; font-size: 14.5px; color: var(--ink);
text-decoration: none; cursor: pointer; text-align: left;
transition: background .18s, color .18s;
}
.am-item:active, .am-item:hover { background: var(--hover); }
.am-t { flex: 1; }
.am-ic { position: relative; width: 18px; height: 18px; flex: none; }
.am-ic::after {
content: ''; position: absolute; inset: 0; background: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-position: center; mask-position: center;
}
.am-ic.mi-tools::after { -webkit-mask-image: var(--i-tools); mask-image: var(--i-tools); }
.am-ic.mi-board::after { -webkit-mask-image: var(--i-board); mask-image: var(--i-board); }
.am-ic.mi-users::after { -webkit-mask-image: var(--i-users); mask-image: var(--i-users); }
.am-ic.mi-sun::after { -webkit-mask-image: var(--i-sun); mask-image: var(--i-sun); }
.am-ic.mi-moon::after { -webkit-mask-image: var(--i-moon); mask-image: var(--i-moon); }
.am-ic.mi-bell::after { -webkit-mask-image: var(--i-bell); mask-image: var(--i-bell); }
.am-ic.mi-out::after { -webkit-mask-image: var(--i-out); mask-image: var(--i-out); }
/* destructive action, kept distinct from the brand rust so it still reads as a warning */
.am-danger { color: #c8321f; }
:root[data-theme="dark"] .am-danger { color: #ff8a72; }
.am-danger:hover, .am-danger:active { background: rgba(200,50,31,.10); }
/* submenu: chevron turns, panel opens to its natural height */
.am-chev { width: 13px; height: 13px; color: var(--faint); transition: transform .26s var(--ease); }
.am-trigger[aria-expanded="true"] .am-chev { transform: rotate(90deg); }
.am-panel {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows .28s var(--ease);
}
.am-trigger[aria-expanded="true"] + .am-panel { grid-template-rows: 1fr; }
.am-in { overflow: hidden; min-height: 0; padding-left: 30px; }
.am-opt {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 9px 10px; border: 0; border-radius: 9px;
background: none; font: inherit; font-size: 13.5px; color: var(--muted);
cursor: pointer; text-align: left; transition: background .18s, color .18s;
}
.am-opt:hover, .am-opt:active { background: var(--hover); color: var(--ink); }
.am-opt[aria-checked="true"] { color: var(--ink); font-weight: 600; }
/* radio dot */
.am-opt > i {
width: 15px; height: 15px; flex: none; border-radius: 50%;
border: 1.5px solid var(--line-strong); position: relative; transition: border-color .2s;
}
.am-opt[aria-checked="true"] > i { border-color: var(--brand); }
.am-opt[aria-checked="true"] > i::after {
content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand);
}
/* checkbox variant */
.am-check > i { border-radius: 5px; }
.am-check[aria-checked="true"] > i { background: var(--brand); border-color: var(--brand); }
.am-check[aria-checked="true"] > i::after {
content: ''; position: absolute; inset: 0;
background: #fff; border-radius: 0;
-webkit-mask: url('data:image/svg+xml;utf8,') center/11px no-repeat;
mask: url('data:image/svg+xml;utf8,') center/11px no-repeat;
}
/* ── header auth pair ───────────────────────────────────────────────── */
.nav-auth { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-signin {
padding: 9px 14px; border-radius: 999px; color: var(--ink);
text-decoration: none; font-size: 14px; font-weight: 500;
transition: background .2s;
}
.nav-signin:hover { background: var(--hover); }
.nav-signup {
padding: 9px 18px; border-radius: 999px;
/* not #fff: in dark the brand is a light orange, and white on it is 3.18:1.
--on-brand is white in light and near-black in dark — correct on both. */
background: var(--brand); color: var(--on-brand); text-decoration: none;
font-size: 14px; font-weight: 600;
transition: transform .2s var(--ease), box-shadow .2s;
}
.nav-signup:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px var(--brand); }
@media (max-width: 860px) { .nav-auth { display: none; } }
/* ── section scaffolding ────────────────────────────────────────────── */
.sec { padding: clamp(64px, 8vw, 108px) 0; }
/* Section tints used to be slabs with a 1px rule top and bottom, which is what
made the page read as stacked blocks. They are now edgeless: the tint fades
up from nothing and back to nothing, so one section becomes the next. */
.sec-alt { position: relative; }
.sec-alt::before {
content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(180deg, transparent, var(--surface-2) 16%, var(--surface-2) 84%, transparent);
}
/* same shell as the header and the hero — every section starts at the same x */
.wrap { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.kicker {
margin: 0 0 14px; font-size: 11px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--brand);
}
.sec h2 {
margin: 0; max-width: 18ch; /* the shell is wide; the measure is not */
font-family: var(--font-display);
font-size: clamp(31px, 3.6vw, 50px); line-height: 1.08;
letter-spacing: -.01em; font-weight: 400; color: var(--ink);
}
.cta-band h2 { max-width: none; }
.lede { margin: 16px 0 0; max-width: 620px; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.6; color: var(--muted); }
/* ── service cards ──────────────────────────────────────────────────── */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(36px, 4vw, 56px); }
.scard {
display: flex; flex-direction: column;
padding: 26px; border: 1px solid var(--line); border-radius: 16px;
background: var(--surface); transition: border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.scard:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 16px 40px -18px rgba(var(--sh), .28); }
.scard-ic, .feat-ic {
position: relative; width: 42px; height: 42px; border-radius: 12px;
background: var(--brand-soft); margin-bottom: 18px;
}
.scard-ic::after, .feat-ic::after {
content: ''; position: absolute; inset: 11px; background: var(--brand);
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-position: center; mask-position: center;
}
.scard h3, .feat h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -.015em; }
.scard p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 24px; font-size: 13.5px; color: var(--muted); }
.ticks li::before {
content: ''; position: absolute; left: 0; top: 4px; width: 15px; height: 15px;
border-radius: 50%; background: var(--brand-soft);
}
.ticks li::after {
content: ''; position: absolute; left: 4px; top: 8px; width: 7px; height: 4px;
border-left: 1.6px solid var(--brand); border-bottom: 1.6px solid var(--brand);
transform: rotate(-45deg);
}
.scard-go {
margin-top: auto; padding-top: 22px; text-decoration: none;
font-size: 14px; font-weight: 600; color: var(--brand);
}
.scard-go span { display: inline-block; transition: transform .2s var(--ease); }
.scard-go:hover span { transform: translateX(4px); }
/* ── feature grid ───────────────────────────────────────────────────── */
/* ── why: bento ─────────────────────────────────────────────────────────
Six reasons at three weights rather than six identical boxes. The lead tile
spans two rows and carries the integrity claim, because every other reason
here depends on it. Each tile lights a spotlight border under the pointer,
and the set staggers in on scroll so the eye is walked through it. */
.grid6 {
display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px; margin-top: clamp(36px, 4vw, 56px);
}
.feat {
position: relative; isolation: isolate; overflow: hidden;
display: flex; flex-direction: column;
padding: clamp(20px, 2vw, 28px);
border: 1px solid var(--line); border-radius: 18px;
background: var(--surface);
transition: transform .4s var(--ease), border-color .3s;
}
.feat:hover { transform: translateY(-3px); border-color: var(--line-strong); }
/* bento shape: 1 leads over two rows, 2 and 3 stack beside it, 4-6 sit below */
.feat:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.feat:nth-child(2),
.feat:nth-child(3) { grid-column: span 3; }
.feat:nth-child(4),
.feat:nth-child(5),
.feat:nth-child(6) { grid-column: span 2; }
/* Spotlight border. The gradient is painted into the padding ring and the
fill is punched back out — mask-composite must EXCLUDE here; intersect
multiplies the two layers to zero alpha and paints nothing at all. */
.feat-edge {
position: absolute; inset: 0; z-index: -1; pointer-events: none;
border-radius: inherit; padding: 1px;
background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
var(--brand), transparent 68%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
opacity: 0; transition: opacity .35s var(--ease);
}
.feat:hover .feat-edge, .feat:focus-within .feat-edge { opacity: 1; }
/* the index, set large and faint in the display face */
.feat-n {
position: absolute; top: clamp(12px, 1.2vw, 18px); right: clamp(14px, 1.4vw, 22px);
font-family: var(--font-display); font-size: clamp(30px, 3vw, 46px);
line-height: 1; color: var(--ink); opacity: .07;
transition: opacity .35s var(--ease), color .35s;
}
.feat:hover .feat-n { opacity: .22; color: var(--brand); }
.feat-ic { width: 34px; height: 34px; margin-bottom: 16px; }
.feat-ic::after { inset: 9px; }
.feat h3 {
margin: 0 0 8px; font-size: clamp(15px, 1.35vw, 17.5px); font-weight: 600;
letter-spacing: -.012em; color: var(--ink);
}
.feat p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--muted); }
/* the lead tile gets the room its claim needs */
.feat-lead { justify-content: flex-end; padding: clamp(24px, 2.6vw, 38px); }
.feat-lead .feat-ic { width: 44px; height: 44px; margin-bottom: 20px; }
.feat-lead .feat-ic::after { inset: 12px; }
.feat-lead h3 {
font-family: var(--font-display); font-weight: 400;
font-size: clamp(24px, 2.5vw, 34px); line-height: 1.12; letter-spacing: -.012em;
margin-bottom: 12px;
}
.feat-lead p { font-size: clamp(14.5px, 1.2vw, 16px); line-height: 1.68; max-width: 44ch; }
.feat-lead .feat-n { font-size: clamp(40px, 4.4vw, 68px); }
/* staggered arrival, once */
.grid6 .feat { opacity: 0; }
.grid6.in .feat {
animation: feat-in .6s var(--ease) both;
animation-delay: calc(.07s * var(--i));
}
@keyframes feat-in {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
@media (max-width: 980px) {
.grid6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feat:nth-child(1) { grid-column: span 4; grid-row: auto; }
.feat:nth-child(2), .feat:nth-child(3),
.feat:nth-child(4), .feat:nth-child(5), .feat:nth-child(6) { grid-column: span 2; }
}
@media (max-width: 620px) {
.grid6 { grid-template-columns: minmax(0, 1fr); }
.feat:nth-child(n) { grid-column: span 1; }
}
@media (prefers-reduced-motion: reduce) {
.grid6 .feat { opacity: 1; }
.grid6.in .feat { animation: none; }
.feat, .feat-edge, .feat-n { transition: none; }
}
/* ── stat band ──────────────────────────────────────────────────────── */
.sec-band { position: relative; padding: clamp(40px, 5vw, 64px) 0; }
.sec-band::before {
content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(180deg, transparent, var(--surface-2) 22%, var(--surface-2) 78%, transparent);
}
.band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.band b { display: block; font-size: clamp(30px, 3.4vw, 42px); font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.band span { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
/* ── quotes ─────────────────────────────────────────────────────────── */
/* ── review wall ────────────────────────────────────────────────────────
Two rows drifting in opposite directions. Each row holds the same ten cards
twice and translates by exactly one set width, so the seam never lands in
view — the same loop the journal marquee uses. Pure CSS: nothing measures,
nothing runs on the main thread. */
.rv-wall { margin-top: clamp(36px, 4vw, 56px); display: grid; gap: 10px; }
.rv-row {
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.rv-run { display: flex; width: max-content; animation: rv-drift 78s linear infinite; }
.rv-set { display: flex; gap: 10px; padding-right: 10px; }
/* reverse gives the second row its left-to-right travel off the same keyframe */
.rv-row[data-dir="r"] .rv-run { animation-direction: reverse; }
@keyframes rv-drift { to { transform: translateX(-50%); } }
/* let a reader stop a card they are part-way through */
.rv-row:hover .rv-run,
.rv-row:focus-within .rv-run { animation-play-state: paused; }
.rv {
position: relative; overflow: hidden; isolation: isolate;
flex: 0 0 auto; width: clamp(268px, 25vw, 340px);
display: flex; flex-direction: column;
margin: 0; padding: 18px;
border: 1px dashed var(--line-strong);
}
/* GridPattern as a masked background rather than an