/* ============================================================
1. DESIGN TOKENS — Anthropic "Research journal" reference
============================================================ */
:root {
/* Colors — achromatic + single warm accent */
--color-slate-dark: #141413;
--color-ivory-light: #faf9f5;
--color-ivory-medium: #f0eee6;
--color-ivory-dark: #e8e6dc;
--color-oat: #e3dacc;
--color-cloud-light: #d1cfc5;
--color-cloud-medium: #b0aea5;
--color-cloud-dark: #87867f;
--color-slate-medium: #3d3d3a;
--color-slate-light: #5e5d59;
--color-clay: #d97757;
--color-accent-ember: #c6613f;
--color-olive: #788c5d;
--color-sky: #6a9bcc;
--color-fig: #c46686;
/* Typography families */
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-serif: 'Playfair Display', ui-serif, Georgia, "Times New Roman", serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
/* Type scale */
--text-caption: 12px;
--text-body-sm: 15px;
--text-body: 16px;
--text-subheading: 18px;
--text-heading-sm: 20px;
--text-heading: 24px;
--text-heading-md: 36px;
--text-heading-lg: 61px;
--text-display: 91px;
/* Spacing */
--spacing-2: 2px;
--spacing-4: 4px;
--spacing-6: 6px;
--spacing-8: 8px;
--spacing-10: 10px;
--spacing-12: 12px;
--spacing-14: 14px;
--spacing-16: 16px;
--spacing-20: 20px;
--spacing-24: 24px;
--spacing-28: 28px;
--spacing-32: 32px;
--spacing-36: 36px;
--spacing-40: 40px;
--spacing-44: 44px;
--spacing-48: 48px;
--spacing-56: 56px;
--spacing-61: 61px;
--spacing-64: 64px;
--spacing-72: 72px;
--spacing-76: 76px;
--spacing-84: 84px;
--spacing-96: 96px;
--spacing-120: 120px;
/* Layout */
--page-max-width: 1200px;
--section-gap: 84px;
--card-padding: 31px;
/* Radii — sharp for buttons, modest for cards, generous for featured */
--radius-buttons: 0px;
--radius-cards: 8px;
--radius-panels: 16px;
--radius-featured: 24px;
--radius-cta-asymmetric: 0px 0px 8px 8px;
/* Easing — spring with subtle overshoot (Antimetal pattern).
Elements feel like they physically arrive instead of plain ease. */
--ease-spring: linear(
0 0%, 0.026 1.8%, 0.108 3.9%, 0.59 12.2%, 0.792 16.5%,
0.931 21%, 0.978 23.4%, 1.01 25.9%, 1.033 29.3%,
1.04 33.3%, 1.001 56.9%, 1 100%
);
}
/* ============================================================
2. RESET + BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
font-size: var(--text-body-sm);
line-height: 1.4;
color: var(--color-slate-dark);
background: var(--color-ivory-light);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.002em;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
/* ============================================================
Global horizontal-overflow guard (applies on all viewports).
`overflow-x: clip` clips overflow WITHOUT creating a scroll
container, so `position: sticky` on the nav continues to work.
iOS 12/old Safari (no clip support) falls through with no
overflow constraint — sticky stays working there too.
NO max-width or width changes — those caused tablet layout
recalculation that looked like a zoom-in.
Adding to both html AND body because iPad Safari sometimes
uses body as the scroll root depending on document state.
overscroll-behavior-x: contain prevents iOS horizontal
rubber-band/elastic scrolling at viewport edges.
============================================================ */
@supports (overflow-x: clip) {
html, body {
overflow-x: clip;
overscroll-behavior-x: contain;
}
}
/* ============================================================
3. TYPOGRAPHY UTILITIES
============================================================ */
.eyebrow {
font-family: var(--font-mono);
font-size: var(--text-caption);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-cloud-dark);
}
.headline-serif {
font-family: var(--font-serif);
font-weight: 400;
line-height: 1.1;
color: var(--color-ivory-light);
}
.headline-md {
font-family: var(--font-sans);
font-size: var(--text-heading-md);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.5px;
color: var(--color-slate-dark);
}
.body-lg {
font-size: var(--text-subheading);
line-height: 1.5;
color: var(--color-slate-dark);
}
.label-mono {
font-family: var(--font-mono);
font-size: var(--text-body);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-cloud-dark);
}
/* Underline-as-emphasis — Anthropic signature */
.emph {
text-decoration: underline;
text-decoration-thickness: 4px;
text-underline-offset: 6px;
text-decoration-skip-ink: none;
}
.headline-serif .emph {
text-decoration-thickness: 5px;
text-underline-offset: 8px;
}
/* ============================================================
4. BUTTONS — sharp 0px, asymmetric CTA
============================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: var(--spacing-8);
padding: 12px 31px;
font-family: var(--font-sans);
font-size: var(--text-body-sm);
font-weight: 500;
letter-spacing: -0.002em;
border: 1px solid var(--color-slate-dark);
border-radius: var(--radius-buttons);
background: var(--color-ivory-light);
color: var(--color-slate-dark);
transition: background-color 0.15s ease, color 0.15s ease;
cursor: pointer;
text-decoration: none;
}
.btn:hover {
background: var(--color-slate-dark);
color: var(--color-ivory-light);
}
.btn--primary {
background: var(--color-slate-dark);
color: var(--color-ivory-light);
border-radius: var(--radius-cta-asymmetric);
/* Speakeasy-inspired inset shadow stack — physical "pressed" feel */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -1px 0 rgba(0, 0, 0, 0.4),
0 1px 3px rgba(20, 20, 19, 0.16),
0 4px 12px -2px rgba(20, 20, 19, 0.18);
transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
}
.btn--primary:hover {
background: var(--color-clay);
border-color: var(--color-clay);
color: var(--color-ivory-light);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.18),
0 1px 3px rgba(217, 119, 87, 0.32),
0 8px 20px -4px rgba(217, 119, 87, 0.32);
transform: translateY(-1px);
}
.btn--primary:active {
transform: translateY(0);
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.18),
inset 0 -1px 0 rgba(255, 255, 255, 0.06),
0 1px 2px rgba(20, 20, 19, 0.1);
}
.btn--ghost {
background: transparent;
}
/* Arrow text link — Anthropic "Read announcement →" pattern */
/* ============================================================
5. NAVIGATION — sticky, ivory, with asymmetric CTA
============================================================ */
.nav {
position: sticky;
top: 0;
z-index: 50;
height: 68px;
display: flex;
align-items: center;
padding: 0;
transition: padding 0.32s var(--ease-spring), top 0.32s var(--ease-spring);
}
.nav__inner {
width: 100%;
/* Ensure at least 32px breathing room from viewport edges on any width
so CTA button never touches right edge (MacBook Air 13" Chrome). */
max-width: min(1320px, calc(100vw - 32px));
margin: 0 auto;
padding: 0 var(--spacing-24);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-16);
background: var(--color-ivory-medium);
height: 68px;
border: 1px solid transparent;
border-radius: 0;
transition:
background-color 0.32s ease,
border-color 0.32s ease,
border-radius 0.32s var(--ease-spring),
box-shadow 0.32s ease,
height 0.32s var(--ease-spring),
backdrop-filter 0.32s ease;
}
/* Once scrolled past hero, nav __inner becomes a floating pill capsule */
.nav--scrolled {
padding: 0 var(--spacing-16);
top: 12px;
}
.nav--scrolled .nav__inner {
background: rgba(250, 249, 245, 0.82);
-webkit-backdrop-filter: saturate(160%) blur(14px);
backdrop-filter: saturate(160%) blur(14px);
border-color: rgba(20, 20, 19, 0.08);
border-radius: 999px;
height: 60px;
box-shadow:
rgba(20, 20, 19, 0.04) 0px 1px 2px 0px,
rgba(20, 20, 19, 0.06) 0px 8px 24px -8px,
rgba(255, 255, 255, 0.8) 0px 1px 0px 0px inset;
padding: 0 var(--spacing-24);
}
@media (max-width: 980px) {
.nav--scrolled { padding: 0 var(--spacing-12); top: 10px; }
.nav--scrolled .nav__inner { height: 56px; padding: 0 var(--spacing-16); }
}
@media (prefers-reduced-motion: reduce) {
.nav, .nav__inner { transition: none !important; }
}
/* Active nav-link indicator — clay underline following current section */
.nav__link::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 4px;
height: 2px;
background: var(--color-clay);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.4s var(--ease-spring);
pointer-events: none;
}
.nav__link:hover::after {
transform: scaleX(0.4);
}
.nav__link.is-current::after {
transform: scaleX(1);
}
/* Speakeasy-inspired animated gradient line under nav.
Brand-toned: clay → oat → ivory → clay, shifting horizontally. */
.nav-gradient-line {
position: fixed;
top: 68px; /* matches nav height */
left: 0;
right: 0;
height: 2px;
z-index: 49;
background: linear-gradient(
90deg,
transparent 0%,
var(--color-clay) 18%,
var(--color-oat) 38%,
var(--color-ivory-light) 50%,
var(--color-oat) 62%,
var(--color-clay) 82%,
transparent 100%
);
background-size: 200% 100%;
background-position: 0% 0%;
animation: navGradientFlow 14s linear infinite;
pointer-events: none;
opacity: 0.65;
transition: top 0.32s var(--ease-spring), opacity 0.32s ease;
}
.nav-gradient-line.is-floating {
/* When nav becomes a floating pill, line moves with it */
top: 80px;
opacity: 0.4;
}
@keyframes navGradientFlow {
0% { background-position: 0% 0%; }
100% { background-position: 200% 0%; }
}
@media (prefers-reduced-motion: reduce) {
.nav-gradient-line { animation: none; }
}
@media (max-width: 980px) {
.nav-gradient-line.is-floating { top: 76px; }
}
.nav__brand {
display: inline-flex;
align-items: center;
height: 100%;
padding: 4px 0;
flex-shrink: 0;
}
.nav__brand img {
height: 38px !important;
width: auto !important;
max-width: none;
display: block;
}
.nav__brand strong { font-weight: 700; }
.nav__links {
display: flex;
gap: 10px;
list-style: none;
flex-wrap: nowrap;
}
.nav__link {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 400;
color: var(--color-slate-dark);
padding: 6px 8px;
position: relative;
white-space: nowrap;
border-radius: 6px;
transition: background-color 0.15s ease, color 0.15s ease;
}
.nav__link:hover {
background: var(--color-clay);
color: var(--color-ivory-light);
}
.nav__actions {
display: flex;
align-items: center;
gap: var(--spacing-12);
flex-shrink: 0;
}
.nav__actions .btn {
white-space: nowrap;
padding: 10px 20px;
}
.nav__switcher {
display: flex;
align-items: center;
gap: var(--spacing-4);
font-family: var(--font-mono);
font-size: var(--text-caption);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.nav__switcher button {
background: transparent;
border: none;
color: var(--color-cloud-dark);
padding: 4px 6px;
font-family: var(--font-mono);
font-size: var(--text-caption);
text-transform: uppercase;
letter-spacing: 0.06em;
cursor: pointer;
transition: color 0.15s ease;
}
.nav__switcher button:hover { color: var(--color-slate-dark); }
.nav__switcher button.is-active { color: var(--color-slate-dark); }
.nav__switcher button.is-active::after {
content: "";
display: block;
height: 1px;
background: var(--color-slate-dark);
margin-top: 2px;
}
/* ============================================================
6. PAGE LAYOUT
============================================================ */
.container {
width: 100%;
max-width: var(--page-max-width);
margin: 0 auto;
padding: 0 var(--spacing-32);
}
.section {
padding-top: var(--spacing-84);
padding-bottom: var(--spacing-84);
}
.section-header { max-width: 880px; margin-bottom: var(--spacing-48); }
.section-header .eyebrow { display: block; margin-bottom: var(--spacing-12); }
.section-header .body-lg { margin-top: var(--spacing-24); max-width: 720px; }
/* ============================================================
7. HERO
============================================================ */
.hero {
padding-top: var(--spacing-32);
padding-bottom: var(--spacing-61);
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Subtle dotted pattern on the right side of hero (Factory.ai-inspired).
Sits behind the photo, fades out on the left so it doesn't conflict
with hero text. */
.hero::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 55%;
height: 100%;
background-image: radial-gradient(circle at center, var(--color-oat) 1px, transparent 1.5px);
background-size: 22px 22px;
opacity: 0.45;
pointer-events: none;
z-index: -1;
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, black 35%, black 100%),
linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(90deg, transparent 0%, black 35%, black 100%),
linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
mask-composite: intersect;
}
@media (max-width: 980px) {
.hero::after { display: none; } /* keep mobile clean */
}
.hero__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-61);
align-items: center;
position: relative;
}
.hero__text {
padding-left: var(--spacing-32);
position: relative;
z-index: 2;
}
.hero__text > .eyebrow { margin-bottom: var(--spacing-32); display: block; }
.hero__brand-wordmark {
font-family: var(--font-serif);
font-size: clamp(72px, 10.5vw, 156px);
font-weight: 400;
line-height: 0.95;
letter-spacing: -5px;
color: var(--color-slate-dark);
margin-bottom: var(--spacing-32);
}
.hero__tagline {
font-family: var(--font-sans);
font-size: clamp(28px, 3.5vw, 42px);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.8px;
color: var(--color-slate-dark);
margin-bottom: var(--spacing-32);
max-width: 680px;
}
.hero__sub {
font-size: var(--text-subheading);
line-height: 1.6;
color: var(--color-slate-light);
max-width: 560px;
margin-bottom: var(--spacing-48);
}
.hero__ctas {
display: flex;
gap: var(--spacing-12);
flex-wrap: wrap;
}
.hero__price-anchor {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: var(--spacing-16);
padding: var(--spacing-12) var(--spacing-16);
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(217, 119, 87, 0.15);
border-radius: 12px;
}
.hero__price-anchor__sep {
color: var(--color-slate-light);
font-family: var(--font-mono);
opacity: 0.5;
}
.hero__price-chip {
display: inline-flex;
flex-direction: column;
gap: 2px;
padding: 4px 10px;
border-radius: 6px;
text-decoration: none;
transition: background-color 200ms ease, transform 200ms ease;
}
.hero__price-chip:hover {
background-color: rgba(217, 119, 87, 0.08);
transform: translateY(-1px);
}
.hero__price-chip__label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.2px;
color: var(--color-slate-medium);
text-transform: uppercase;
}
.hero__price-chip__value {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 400;
letter-spacing: -0.4px;
color: var(--color-slate-dark);
line-height: 1;
}
.hero__price-chip--featured .hero__price-chip__value {
color: var(--color-clay);
}
@media (max-width: 760px) {
.hero__price-anchor {
gap: 6px;
padding: 10px 12px;
}
.hero__price-chip {
padding: 4px 6px;
}
.hero__price-chip__value {
font-size: 16px;
}
.hero__price-anchor__sep {
display: none;
}
}
.hero__photo {
position: relative;
background: transparent;
aspect-ratio: 4 / 5;
max-height: 720px;
z-index: 1;
align-self: center;
}
.hero__photo::before {
content: "";
position: absolute;
inset: -18% -22% -10% -22%;
background:
radial-gradient(ellipse at 50% 40%, rgba(245, 240, 230, 0.65) 0%, transparent 55%),
radial-gradient(ellipse at 55% 50%, rgba(217, 119, 87, 0.45) 0%, rgba(217, 119, 87, 0.15) 30%, transparent 65%);
filter: blur(60px);
pointer-events: none;
z-index: -1;
animation: heroGlowPulse 11s ease-in-out infinite;
will-change: transform, opacity;
}
@keyframes heroGlowPulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.06);
opacity: 0.88;
}
}
@media (prefers-reduced-motion: reduce) {
.hero__photo::before { animation: none; }
}
.hero__photo picture {
display: block;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
.hero__photo img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
display: block;
filter: drop-shadow(0 20px 40px rgba(20, 20, 19, 0.08));
}
.hero__photo-caption {
position: absolute;
left: var(--spacing-8);
bottom: var(--spacing-16);
background: var(--color-slate-dark);
color: var(--color-ivory-light);
padding: 8px 14px;
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
z-index: 2;
}
/* ============================================================
8. SURFACE BANDS — alternating ivory / dark
============================================================ */
.band--oat {
background: var(--color-oat);
}
.band--ivory-medium {
background: var(--color-ivory-medium);
}
.dark-card {
background: var(--color-slate-dark);
color: var(--color-ivory-light);
border-radius: var(--radius-featured);
padding: var(--spacing-76) var(--spacing-61);
position: relative;
/* Authkit-inspired inset glow — top edge highlight + soft inner ambient */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 24px 48px rgba(255, 255, 255, 0.025),
inset 0 -1px 0 rgba(0, 0, 0, 0.4),
0 24px 48px rgba(20, 20, 19, 0.18),
0 0 0 1px rgba(217, 119, 87, 0.08);
}
.dark-card::before {
content: "";
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
pointer-events: none;
border-radius: var(--radius-featured) var(--radius-featured) 0 0;
}
.dark-card .eyebrow { color: var(--color-cloud-medium); }
.dark-card .body-lg { color: var(--color-ivory-dark); }
/* ============================================================
9. AUTHENTICITY SECTION
============================================================ */
.auth-headline {
font-family: var(--font-sans);
font-size: clamp(42px, 6vw, 72px);
font-weight: 500;
line-height: 1.05;
letter-spacing: -1.8px;
color: var(--color-slate-dark);
max-width: 1080px;
hyphens: auto;
overflow-wrap: break-word;
}
:lang(ru) .auth-headline,
:lang(es) .auth-headline {
font-size: clamp(36px, 5vw, 60px);
letter-spacing: -1.2px;
}
:lang(ru) .pricing-h2,
:lang(es) .pricing-h2 {
font-size: clamp(32px, 4vw, 48px);
letter-spacing: -1px;
hyphens: auto;
overflow-wrap: break-word;
}
:lang(ru) .hero__brand-wordmark,
:lang(es) .hero__brand-wordmark {
font-size: clamp(64px, 9.5vw, 138px);
}
:lang(ru) .sel-hero__lede,
:lang(es) .sel-hero__lede {
font-size: clamp(20px, 2.2vw, 28px);
hyphens: auto;
overflow-wrap: break-word;
}
.auth-headline div { display: block; }
.auth-pillars {
margin-top: var(--spacing-61);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--color-slate-dark);
border-bottom: 1px solid var(--color-slate-dark);
}
.auth-pillar {
padding: var(--spacing-32) var(--spacing-24);
border-right: 1px solid var(--color-cloud-light);
display: flex;
flex-direction: column;
gap: var(--spacing-16);
transition: background-color 0.2s ease;
}
.auth-pillar:last-child { border-right: none; }
.auth-pillar:hover { background: var(--color-ivory-medium); }
.auth-pillar__icon {
width: 44px;
height: 44px;
color: var(--color-clay);
flex-shrink: 0;
}
/* Animated stroke-draw on viewport entry — Stripe/Linear pattern */
.auth-pillar__icon path,
.auth-pillar__icon line,
.auth-pillar__icon rect,
.auth-pillar__icon circle {
stroke-dasharray: 220;
stroke-dashoffset: 220;
transition: stroke-dashoffset 1.3s var(--ease-spring);
}
.auth-pillar.is-icon-drawn .auth-pillar__icon path,
.auth-pillar.is-icon-drawn .auth-pillar__icon line,
.auth-pillar.is-icon-drawn .auth-pillar__icon rect,
.auth-pillar.is-icon-drawn .auth-pillar__icon circle {
stroke-dashoffset: 0;
}
/* Stagger child elements so the icon "draws itself" */
.auth-pillar.is-icon-drawn .auth-pillar__icon > *:nth-child(1) { transition-delay: 0s; }
.auth-pillar.is-icon-drawn .auth-pillar__icon > *:nth-child(2) { transition-delay: 0.16s; }
.auth-pillar.is-icon-drawn .auth-pillar__icon > *:nth-child(3) { transition-delay: 0.32s; }
.auth-pillar.is-icon-drawn .auth-pillar__icon > *:nth-child(4) { transition-delay: 0.48s; }
.auth-pillar.is-icon-drawn .auth-pillar__icon > *:nth-child(5) { transition-delay: 0.62s; }
.auth-pillar.is-icon-drawn .auth-pillar__icon > *:nth-child(6) { transition-delay: 0.74s; }
.auth-pillar.is-icon-drawn .auth-pillar__icon > *:nth-child(7) { transition-delay: 0.84s; }
/* Filled elements (e.g. iris dot) fade in after the stroke is drawn */
.auth-pillar__icon [fill="currentColor"] {
opacity: 0;
transition: opacity 0.4s ease 0.9s;
}
.auth-pillar.is-icon-drawn .auth-pillar__icon [fill="currentColor"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.auth-pillar__icon path,
.auth-pillar__icon line,
.auth-pillar__icon rect,
.auth-pillar__icon circle {
stroke-dasharray: none !important;
stroke-dashoffset: 0 !important;
transition: none !important;
}
.auth-pillar__icon [fill="currentColor"] { opacity: 1 !important; }
}
.auth-pillar__title {
font-family: var(--font-sans);
font-size: var(--text-heading-sm);
font-weight: 600;
letter-spacing: -0.3px;
color: var(--color-slate-dark);
line-height: 1.2;
}
.auth-pillar__title small {
display: block;
font-family: var(--font-mono);
font-size: var(--text-caption);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-cloud-dark);
margin-bottom: var(--spacing-8);
}
.auth-pillar__desc {
font-size: var(--text-body);
line-height: 1.55;
color: var(--color-slate-medium);
}
.auth-callout {
margin-top: var(--spacing-48);
padding: var(--spacing-32);
background: var(--color-slate-dark);
color: var(--color-ivory-light);
border-radius: var(--radius-cards);
display: grid;
grid-template-columns: auto 1fr;
gap: var(--spacing-24);
align-items: center;
}
.auth-callout__icon {
width: 36px;
height: 36px;
color: var(--color-clay);
flex-shrink: 0;
}
.auth-callout__text {
font-family: var(--font-serif);
font-size: var(--text-heading);
font-weight: 400;
font-style: italic;
letter-spacing: -0.3px;
line-height: 1.4;
color: var(--color-ivory-light);
}
/* Silver award — premium editorial showcase */
.silver-feature {
margin-top: var(--spacing-48);
background: var(--color-slate-dark);
color: var(--color-ivory-light);
border-radius: var(--radius-featured);
padding: var(--spacing-48);
display: grid;
grid-template-columns: 280px 1fr;
gap: var(--spacing-48);
align-items: center;
position: relative;
overflow: hidden;
}
.silver-feature::before {
content: "";
position: absolute;
top: -120px;
left: -120px;
width: 480px;
height: 480px;
background: radial-gradient(circle, rgba(217, 119, 87, 0.18) 0%, transparent 60%);
pointer-events: none;
}
.silver-feature__visual {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.silver-feature__visual img {
max-width: 100%;
filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.4));
}
.silver-feature__text {
position: relative;
z-index: 1;
}
.silver-feature__eyebrow {
display: block;
font-family: var(--font-mono);
font-size: var(--text-caption);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-clay);
margin-bottom: var(--spacing-16);
}
.silver-feature__headline {
font-family: var(--font-serif);
font-size: clamp(32px, 4vw, 44px);
font-weight: 400;
letter-spacing: -1px;
color: var(--color-ivory-light);
line-height: 1.1;
margin-bottom: var(--spacing-16);
}
.silver-feature__lede {
font-size: var(--text-body);
line-height: 1.55;
color: var(--color-ivory-dark);
margin-bottom: var(--spacing-32);
max-width: 520px;
}
.silver-feature__meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-24);
border-top: 1px solid var(--color-slate-medium);
padding-top: var(--spacing-24);
margin: 0;
}
.silver-feature__meta > div { margin: 0; }
.silver-feature__meta dt {
font-family: var(--font-mono);
font-size: var(--text-caption);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-cloud-medium);
margin-bottom: 4px;
}
.silver-feature__meta dd {
font-family: var(--font-sans);
font-size: var(--text-body);
font-weight: 500;
color: var(--color-ivory-light);
margin: 0;
}
/* ============================================================
10. ABOUT SECTION
============================================================ */
.about-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: var(--spacing-76);
align-items: center;
}
.about-photo {
aspect-ratio: 0.6 / 1;
background: transparent;
position: relative;
max-height: 700px;
align-self: center;
overflow: visible;
}
.about-photo::before {
content: "";
position: absolute;
inset: -20% -25% -15% -25%;
background:
radial-gradient(ellipse at 50% 45%, rgba(245, 240, 230, 0.65) 0%, transparent 55%),
radial-gradient(ellipse at 55% 50%, rgba(217, 119, 87, 0.45) 0%, rgba(217, 119, 87, 0.15) 30%, transparent 65%);
filter: blur(60px);
pointer-events: none;
z-index: 0;
}
.about-photo picture {
display: block;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
.about-photo img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
display: block;
filter: drop-shadow(0 24px 48px rgba(20, 20, 19, 0.20));
}
.about-photo::after {
content: "MARIA · FOUNDER";
position: absolute;
left: 18px;
bottom: 18px;
background: var(--color-slate-dark);
color: var(--color-ivory-light);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
}
.about-photo::after {
padding: 6px 10px;
z-index: 2;
}
:lang(ru) .about-photo::after { content: "МАРИЯ · ОСНОВАТЕЛЬ"; }
:lang(es) .about-photo::after { content: "MARIA · FUNDADORA"; }
.about-content .headline-md { margin-bottom: var(--spacing-12); }
.about-byline {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-cloud-dark);
margin-bottom: var(--spacing-16);
padding-bottom: var(--spacing-16);
border-bottom: 1px solid var(--color-cloud-light);
}
.about-byline strong {
font-family: var(--font-sans);
font-weight: 600;
text-transform: none;
letter-spacing: -0.2px;
font-size: var(--text-body);
color: var(--color-slate-dark);
margin-right: 10px;
}
.about-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-8);
margin-bottom: var(--spacing-24);
}
.about-stat {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--spacing-12);
background: var(--color-ivory-light);
border-radius: var(--radius-cards);
border-left: 2px solid var(--color-clay);
}
.about-stat__num {
font-family: var(--font-serif);
font-size: 28px;
font-weight: 400;
letter-spacing: -0.8px;
color: var(--color-slate-dark);
line-height: 1;
}
.about-stat__label {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-cloud-dark);
}
.about-bio {
display: flex;
flex-direction: column;
gap: var(--spacing-12);
margin-bottom: var(--spacing-24);
}
.about-bio p {
font-size: 15px;
line-height: 1.55;
color: var(--color-slate-medium);
margin: 0;
}
.about-bio p:first-child {
font-family: var(--font-serif);
font-size: 19px;
font-weight: 400;
font-style: italic;
letter-spacing: -0.2px;
line-height: 1.35;
color: var(--color-slate-dark);
}
.about-tier1 {
padding-top: var(--spacing-16);
border-top: 1px solid var(--color-cloud-light);
}
.about-tier1__label {
display: block;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-cloud-dark);
margin-bottom: var(--spacing-8);
}
.about-tier1__strip {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-16);
align-items: center;
}
.about-tier1__strip img {
height: 18px;
width: auto;
filter: grayscale(100%) brightness(0);
opacity: 0.55;
transition: opacity 0.2s ease;
}
.about-tier1__strip img:hover { opacity: 1; }
/* ============================================================
11. MARKETS — 3-col release-card grid + subtle dot-pattern bg
============================================================ */
#markets {
position: relative;
isolation: isolate;
}
#markets::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle at center, var(--color-oat) 1px, transparent 1.5px);
background-size: 28px 28px;
opacity: 0.55;
pointer-events: none;
z-index: -1;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, black 18%, black 82%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, black 18%, black 82%, transparent 100%);
}
.markets-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-24);
}
.market-card {
background: var(--color-ivory-medium);
border-radius: var(--radius-cards);
padding: var(--spacing-32);
display: flex;
flex-direction: column;
box-shadow:
rgba(20, 20, 19, 0.025) 0px 32px 40px -20px,
rgba(20, 20, 19, 0.03) 0px 16px 24px -12px,
rgba(20, 20, 19, 0.03) 0px 4px 8px -4px,
rgba(20, 20, 19, 0.04) 0px 0px 0px 1px;
}
.market-card .label-mono { display: block; margin-bottom: var(--spacing-12); }
.market-card h3 {
font-family: var(--font-sans);
font-size: var(--text-heading);
font-weight: 600;
letter-spacing: -0.3px;
margin-bottom: 6px;
color: var(--color-slate-dark);
}
.market-card .channel {
font-family: var(--font-mono);
font-size: var(--text-body);
color: var(--color-slate-light);
margin-bottom: var(--spacing-16);
}
.market-card .tagline {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 400;
font-style: italic;
letter-spacing: -0.3px;
line-height: 1.3;
color: var(--color-slate-dark);
margin-bottom: var(--spacing-24);
padding-bottom: var(--spacing-16);
border-bottom: 1px solid var(--color-cloud-light);
min-height: auto;
}
.market-card .desc {
font-size: var(--text-body-sm);
line-height: 1.5;
color: var(--color-slate-medium);
margin-bottom: var(--spacing-16);
}
.market-card .market-screens {
display: flex;
flex-direction: column;
gap: var(--spacing-16);
margin-bottom: var(--spacing-24);
}
.market-screen-block {
display: flex;
flex-direction: column;
gap: 8px;
}
.market-screen-block .label-mono {
display: block;
font-size: 11px;
letter-spacing: 0.08em;
}
.market-card .market-screens img {
width: 100%;
border-radius: 6px;
border: 1px solid var(--color-cloud-light);
cursor: zoom-in;
background: var(--color-ivory-light);
transition: border-color 0.15s ease;
}
.market-card .market-screens img:hover {
border-color: var(--color-clay);
}
.market-card .tone {
margin-top: auto;
padding-top: var(--spacing-16);
border-top: 1px solid var(--color-cloud-light);
font-size: var(--text-body-sm);
color: var(--color-slate-light);
font-style: italic;
}
/* ============================================================
12. PROOF SECTION — DARK feature card with dashboards
============================================================ */
.proof-card .eyebrow { display: block; margin-bottom: var(--spacing-16); }
.proof-card .headline-serif {
font-size: clamp(42px, 6vw, 72px);
margin-bottom: var(--spacing-16);
}
.proof-card .body-lg { max-width: 760px; margin-bottom: var(--spacing-48); }
.proof-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-32);
}
.proof-item {
background: var(--color-ivory-light);
border-radius: var(--radius-cards);
padding: var(--spacing-24);
}
.proof-item .label-mono { display: block; margin-bottom: var(--spacing-8); }
.proof-item img {
width: 100%;
border-radius: 6px;
margin-bottom: var(--spacing-12);
cursor: zoom-in;
border: 1px solid var(--color-cloud-light);
}
.proof-item .caption {
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.55;
letter-spacing: -0.01em;
color: var(--color-cloud-medium);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
/* Browser-frame mockup wrapper for proof screenshots — Dialog/macOS pattern */
.proof-frame {
background: var(--color-ivory-light);
border-radius: 10px;
overflow: hidden;
margin-bottom: var(--spacing-12);
box-shadow:
rgba(0, 0, 0, 0.18) 0px 24px 48px -16px,
rgba(0, 0, 0, 0.12) 0px 8px 16px -8px,
rgba(255, 255, 255, 0.04) 0px 0px 0px 1px inset;
transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease;
}
.proof-frame:hover {
transform: translateY(-2px);
box-shadow:
rgba(0, 0, 0, 0.22) 0px 32px 56px -16px,
rgba(0, 0, 0, 0.14) 0px 12px 20px -8px,
rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
}
.proof-frame__chrome {
display: flex;
align-items: center;
gap: 6px;
padding: 9px 14px;
background: var(--color-ivory-medium);
border-bottom: 1px solid var(--color-cloud-light);
}
.proof-frame__dot {
display: inline-block;
width: 11px;
height: 11px;
border-radius: 50%;
flex-shrink: 0;
}
.proof-frame__dot--red { background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08); }
.proof-frame__dot--yellow { background: #febc2e; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08); }
.proof-frame__dot--green { background: #28c840; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08); }
.proof-frame__url {
margin-left: auto;
font-family: var(--font-mono);
font-size: 11px;
color: var(--color-cloud-medium);
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 60%;
opacity: 0.65;
}
.proof-frame img {
display: block;
width: 100%;
height: auto;
margin: 0;
border-radius: 0;
cursor: zoom-in;
}
@media (max-width: 540px) {
.proof-frame__chrome { padding: 7px 12px; }
.proof-frame__dot { width: 9px; height: 9px; }
.proof-frame__url { font-size: 10px; max-width: 50%; }
}
/* ============================================================
13. WORKFLOW — horizontal roadmap
============================================================ */
.wf-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--spacing-32);
margin-bottom: var(--spacing-48);
padding-bottom: var(--spacing-24);
border-bottom: 1px solid var(--color-cloud-light);
flex-wrap: wrap;
}
.wf-header__title {
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
}
.wf-header__title h2 {
margin-bottom: 0;
hyphens: auto;
overflow-wrap: break-word;
}
.wf-header__turnaround {
text-align: right;
flex-shrink: 0;
flex: 0 0 auto;
}
.wf-header__turnaround .label-mono {
display: block;
margin-bottom: var(--spacing-4);
}
.wf-header__turnaround .turnaround {
font-family: var(--font-serif);
font-size: 56px;
font-weight: 400;
line-height: 1;
letter-spacing: -1.8px;
color: var(--color-slate-dark);
margin-bottom: 6px;
}
.wf-header__turnaround .turnaround-sub {
font-size: var(--text-body-sm);
color: var(--color-slate-light);
max-width: 240px;
}
.wf-roadmap {
list-style: none;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--spacing-12);
position: relative;
}
.wf-roadmap::before {
content: "";
position: absolute;
top: 28px;
left: 24px;
right: 24px;
height: 1px;
background-image: linear-gradient(to right, var(--color-cloud-medium) 50%, transparent 50%);
background-size: 8px 1px;
background-repeat: repeat-x;
z-index: 0;
}
.wf-stop {
position: relative;
z-index: 1;
background: var(--color-ivory-light);
border-radius: var(--radius-cards);
padding: var(--spacing-16);
display: flex;
flex-direction: column;
gap: var(--spacing-8);
border: 1px solid var(--color-cloud-light);
transition: border-color 0.15s ease, transform 0.15s ease;
}
.wf-stop:hover {
border-color: var(--color-clay);
transform: translateY(-2px);
}
.wf-stop__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: var(--color-slate-dark);
color: var(--color-ivory-light);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
border-radius: 50%;
margin-bottom: var(--spacing-8);
}
.wf-stop:hover .wf-stop__num { background: var(--color-clay); }
.wf-stop__name {
font-family: var(--font-sans);
font-size: var(--text-body);
font-weight: 600;
letter-spacing: -0.2px;
color: var(--color-slate-dark);
line-height: 1.25;
}
.wf-stop__desc {
font-size: 13px;
line-height: 1.45;
color: var(--color-slate-light);
}
/* ============================================================
14. SELECTIVITY — magazine pull-quote + comparison cards
============================================================ */
.sel-hero {
display: grid;
grid-template-columns: minmax(320px, 1fr) 1.4fr;
gap: var(--spacing-61);
align-items: end;
margin-bottom: var(--spacing-61);
padding-bottom: var(--spacing-48);
border-bottom: 1px solid var(--color-slate-dark);
}
.sel-stat {
display: flex;
align-items: baseline;
gap: var(--spacing-12);
line-height: 0.9;
}
.sel-stat__num {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(140px, 18vw, 220px);
letter-spacing: -8px;
color: var(--color-clay);
line-height: 0.85;
}
.sel-stat__suffix {
font-family: var(--font-sans);
font-size: clamp(20px, 2.5vw, 32px);
font-weight: 600;
color: var(--color-slate-dark);
letter-spacing: -0.5px;
padding-bottom: 14px;
}
.sel-hero__lede {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(22px, 2.4vw, 32px);
font-weight: 400;
line-height: 1.3;
letter-spacing: -0.5px;
color: var(--color-slate-dark);
max-width: 600px;
}
.sel-hero__lede strong {
font-style: normal;
font-family: var(--font-sans);
font-weight: 600;
background: linear-gradient(transparent 60%, rgba(217, 119, 87, 0.25) 60%);
padding: 0 4px;
}
.sel-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-24);
}
.sel-card {
border-radius: var(--radius-cards);
padding: var(--spacing-32);
display: flex;
flex-direction: column;
box-shadow:
rgba(20, 20, 19, 0.025) 0px 32px 40px -20px,
rgba(20, 20, 19, 0.03) 0px 16px 24px -12px,
rgba(20, 20, 19, 0.03) 0px 4px 8px -4px,
rgba(20, 20, 19, 0.04) 0px 0px 0px 1px;
}
.sel-card--no {
background: var(--color-slate-dark);
color: var(--color-ivory-light);
}
.sel-card--no .label-mono { color: var(--color-cloud-medium); }
.sel-card--yes {
background: var(--color-ivory-medium);
color: var(--color-slate-dark);
}
.sel-card .label-mono { display: block; margin-bottom: var(--spacing-12); }
.sel-card__title {
font-family: var(--font-serif);
font-size: 32px;
font-weight: 400;
letter-spacing: -0.5px;
line-height: 1.15;
margin-bottom: var(--spacing-24);
padding-bottom: var(--spacing-16);
border-bottom: 1px solid currentColor;
border-bottom-color: var(--color-slate-medium);
}
.sel-card--yes .sel-card__title { border-bottom-color: var(--color-cloud-light); }
.sel-card__list {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--spacing-12);
font-size: var(--text-body);
line-height: 1.5;
}
.sel-card__list li {
display: grid;
grid-template-columns: 22px 1fr;
gap: var(--spacing-12);
align-items: baseline;
}
.sel-card--no .sel-card__list li::before {
content: "✕";
font-family: var(--font-sans);
font-weight: 500;
color: var(--color-clay);
font-size: 16px;
}
.sel-card--no .sel-card__list li {
color: var(--color-ivory-dark);
}
.sel-card--yes .sel-card__list li::before {
content: "→";
font-family: var(--font-mono);
color: var(--color-clay);
font-weight: 500;
}
.sel-card--yes .sel-card__list li {
color: var(--color-slate-medium);
}
/* ============================================================
15. PRICING
============================================================ */
.pricing-h2 {
font-family: var(--font-sans);
font-size: clamp(36px, 4.5vw, 56px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -1.2px;
color: var(--color-slate-dark);
max-width: 1080px;
margin-bottom: var(--spacing-32);
}
/* Three-tier pricing layout */
.pricing-tiers {
display: grid;
grid-template-columns: 1fr 1fr 1.3fr;
gap: var(--spacing-16);
margin-bottom: var(--spacing-32);
}
/* Inline NEW badge — Factory.ai-style mono accent, no background */
.pricing-new-badge {
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-clay);
margin-left: 8px;
vertical-align: middle;
position: relative;
top: -2px;
}
.pricing-tier {
background: var(--color-ivory-light);
border: 1px solid var(--color-cloud-light);
border-radius: var(--radius-featured);
padding: var(--spacing-32) var(--spacing-24);
display: flex;
flex-direction: column;
position: relative;
transition: transform 0.2s ease, border-color 0.2s ease;
box-shadow:
rgba(20, 20, 19, 0.04) 0px 1px 2px 0px,
rgba(20, 20, 19, 0.04) 0px 4px 8px -4px;
}
.pricing-tier:hover { transform: translateY(-2px); border-color: var(--color-clay); }
.pricing-tier--featured {
background: var(--color-slate-dark);
color: var(--color-ivory-light);
border: 2px solid var(--color-clay);
transform: translateY(-12px);
box-shadow:
0 32px 64px rgba(217, 119, 87, 0.18),
0 12px 24px rgba(20, 20, 19, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 -1px 0 rgba(0, 0, 0, 0.4);
z-index: 2;
}
/* Soft clay halo behind the featured tier */
.pricing-tier--featured::before {
content: "";
position: absolute;
inset: -40px;
background: radial-gradient(
ellipse at center,
rgba(217, 119, 87, 0.18) 0%,
rgba(217, 119, 87, 0.06) 30%,
transparent 65%
);
filter: blur(40px);
z-index: -1;
pointer-events: none;
opacity: 0.9;
animation: featuredHaloPulse 8s ease-in-out infinite;
}
@keyframes featuredHaloPulse {
0%, 100% { opacity: 0.85; transform: scale(1); }
50% { opacity: 1; transform: scale(1.04); }
}
.pricing-tier--featured:hover {
transform: translateY(-16px);
box-shadow:
0 40px 72px rgba(217, 119, 87, 0.24),
0 16px 32px rgba(20, 20, 19, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.1),
inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}
@media (prefers-reduced-motion: reduce) {
.pricing-tier--featured::before { animation: none; }
}
@media (max-width: 980px) {
.pricing-tier--featured { transform: none; }
.pricing-tier--featured:hover { transform: translateY(-4px); }
.pricing-tier--featured::before { display: none; }
}
.pricing-tier__label {
font-family: var(--font-mono);
font-size: var(--text-caption);
text-transform: uppercase;
letter-spacing: 0.10em;
color: var(--color-clay);
text-align: center;
display: block;
margin-bottom: var(--spacing-32);
padding-bottom: var(--spacing-16);
border-bottom: 1px solid var(--color-cloud-light);
}
.pricing-tier--featured .pricing-tier__label {
color: var(--color-clay);
border-bottom-color: var(--color-slate-medium);
}
.pricing-tier__best {
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%) rotate(-2deg);
background: linear-gradient(135deg, var(--color-clay) 0%, var(--color-accent-ember) 100%);
color: var(--color-ivory-light);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 8px 18px;
border-radius: 999px;
box-shadow:
0 8px 20px rgba(217, 119, 87, 0.45),
0 2px 4px rgba(20, 20, 19, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
z-index: 3;
white-space: nowrap;
}
.pricing-tier__best::before,
.pricing-tier__best::after {
content: "";
position: absolute;
top: 50%;
width: 4px;
height: 4px;
background: var(--color-clay);
border-radius: 50%;
transform: translateY(-50%);
}
.pricing-tier__best::before { left: -10px; }
.pricing-tier__best::after { right: -10px; }
.pricing-tier__items {
display: flex;
flex-direction: column;
gap: var(--spacing-24);
flex: 1;
}
.pricing-item {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}
.pricing-item__name {
font-family: var(--font-sans);
font-size: var(--text-body);
font-weight: 600;
color: var(--color-clay);
margin: 0;
}
.pricing-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 0;
border-bottom: 1px dashed var(--color-cloud-light);
font-size: var(--text-body-sm);
}
.pricing-tier--featured .pricing-row { border-bottom-color: var(--color-slate-medium); }
.pricing-row:last-child { border-bottom: none; }
.pricing-row span { color: var(--color-slate-medium); }
.pricing-tier--featured .pricing-row span { color: var(--color-cloud-medium); }
.pricing-row strong {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 400;
color: var(--color-slate-dark);
letter-spacing: -0.3px;
}
.pricing-tier--featured .pricing-row strong { color: var(--color-ivory-light); }
/* Featured tier — hero rows with bigger price */
.pricing-item__hero {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--spacing-16);
padding-bottom: var(--spacing-12);
margin-bottom: var(--spacing-12);
border-bottom: 1px solid var(--color-slate-medium);
}
.pricing-item__hero .pricing-item__name {
font-size: var(--text-heading-sm);
color: var(--color-slate-dark);
}
.pricing-tier--featured .pricing-item__hero .pricing-item__name {
color: var(--color-ivory-light);
}
.pricing-item__price {
font-family: var(--font-serif);
font-size: 36px;
font-weight: 400;
letter-spacing: -0.8px;
color: var(--color-clay);
line-height: 1;
}
/* Featured tier price — bigger, more prominent */
.pricing-tier--featured .pricing-item__price {
font-size: 48px;
letter-spacing: -1.2px;
}
.pricing-includes {
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.pricing-includes li {
display: grid;
grid-template-columns: 14px 1fr;
gap: 6px;
font-size: var(--text-body-sm);
color: var(--color-slate-dark);
align-items: baseline;
line-height: 1.4;
}
.pricing-tier--featured .pricing-includes li {
color: var(--color-ivory-dark);
}
.pricing-includes li::before {
content: "·";
font-family: var(--font-mono);
color: var(--color-clay);
font-weight: 700;
}
.pricing-tier__footer {
margin-top: var(--spacing-24);
padding-top: var(--spacing-16);
border-top: 1px solid var(--color-cloud-light);
font-family: var(--font-serif);
font-size: var(--text-body-sm);
font-style: italic;
color: var(--color-slate-light);
text-align: center;
}
.pricing-tier--featured .pricing-tier__footer {
border-top-color: var(--color-slate-medium);
color: var(--color-cloud-medium);
}
/* Compact hero for Trial tier (smaller card) */
.pricing-item__hero--compact .pricing-item__name {
font-size: var(--text-body);
}
.pricing-tier--trial .pricing-item__price {
font-size: 32px;
}
/* View guarantee badge — trust signal on Spotlight and Premier */
.view-guarantee {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
margin-top: 12px;
background: linear-gradient(135deg, rgba(34, 134, 58, 0.10), rgba(34, 134, 58, 0.03));
border: 1px solid rgba(34, 134, 58, 0.35);
border-radius: 8px;
}
.view-guarantee__icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: #16a34a;
color: white;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
line-height: 1;
}
.view-guarantee__text {
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 500;
color: #14532d;
line-height: 1.45;
}
.pricing-tier--featured .view-guarantee {
background: linear-gradient(135deg, rgba(74, 222, 128, 0.14), rgba(74, 222, 128, 0.04));
border-color: rgba(74, 222, 128, 0.45);
}
.pricing-tier--featured .view-guarantee__text { color: #d1fae5; }
.pricing-tier--featured .view-guarantee__icon { background: #22c55e; }
/* Universal blog inclusion note — Growth tier (all markets get blog article free) */
.growth-blog-note {
margin-top: 12px;
padding: 10px 12px;
background: linear-gradient(135deg, rgba(72, 101, 70, 0.06), rgba(72, 101, 70, 0.02));
border: 1px dashed rgba(72, 101, 70, 0.4);
border-radius: 8px;
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 500;
color: var(--color-slate-dark);
line-height: 1.45;
}
/* EN amplification bundle badge — free with EN package on Growth+ tiers */
.en-bundle {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 10px 12px;
margin-top: 12px;
background: linear-gradient(135deg, rgba(217,119,6,0.08), rgba(217,119,6,0.025));
border: 1px dashed rgba(217,119,6,0.55);
border-radius: 8px;
}
.en-bundle__flag {
font-size: 18px;
line-height: 1.2;
flex-shrink: 0;
}
.en-bundle__body {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1;
min-width: 0;
}
.en-bundle__title {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 700;
color: #d97706;
letter-spacing: -0.1px;
line-height: 1.3;
}
.en-bundle__list {
font-family: var(--font-sans);
font-size: 12px;
color: var(--color-slate-medium);
line-height: 1.4;
}
.pricing-tier--featured .en-bundle {
background: linear-gradient(135deg, rgba(245,158,11,0.14), rgba(245,158,11,0.04));
border-color: rgba(245,158,11,0.5);
}
.pricing-tier--featured .en-bundle__title { color: #f59e0b; }
.pricing-tier--featured .en-bundle__list { color: var(--color-cloud-medium); }
/* Progression bar */
/* Trust pill — single soft pill below pricing tiers */
.pricing-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: var(--spacing-48) auto var(--spacing-32);
padding: 12px 22px;
background: var(--color-ivory-light);
border: 1px solid var(--color-cloud-light);
border-radius: 999px;
font-family: var(--font-sans);
font-size: 14px;
color: var(--color-slate-medium);
width: fit-content;
max-width: 100%;
box-shadow:
rgba(20, 20, 19, 0.04) 0px 1px 2px 0px,
inset rgba(255, 255, 255, 0.7) 0px 1px 0px 0px;
}
.pricing-trust__icon {
width: 20px;
height: 20px;
color: var(--color-clay);
flex-shrink: 0;
display: inline-flex;
}
.pricing-trust__icon svg { width: 100%; height: 100%; }
.pricing-progression {
display: flex;
justify-content: center;
align-items: center;
gap: var(--spacing-12);
flex-wrap: wrap;
margin-bottom: var(--spacing-32);
font-family: var(--font-mono);
font-size: var(--text-caption);
text-transform: uppercase;
letter-spacing: 0.10em;
color: var(--color-cloud-dark);
}
.pricing-progression__arrow {
color: var(--color-clay);
}
/* Secondary blocks (B2B + Accepted) */
.pricing-secondary {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: var(--spacing-16);
}
.pricing-aux {
background: var(--color-ivory-light);
border: 1px solid var(--color-cloud-light);
border-radius: var(--radius-cards);
padding: var(--spacing-24);
}
.pricing-aux .pricing-tier__label {
text-align: left;
margin-bottom: var(--spacing-16);
padding-bottom: var(--spacing-12);
}
.pricing-aux__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-16) var(--spacing-24);
}
.pricing-aux__grid--3 {
grid-template-columns: repeat(3, 1fr);
}
.pricing-aux__grid > div {
display: flex;
flex-direction: column;
gap: 4px;
padding-bottom: var(--spacing-12);
border-bottom: 1px dashed var(--color-cloud-light);
}
.pricing-aux__grid > div strong {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 400;
color: var(--color-slate-dark);
letter-spacing: -0.3px;
line-height: 1;
}
.pricing-aux__grid > div strong small {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 400;
color: var(--color-cloud-dark);
margin-left: 4px;
letter-spacing: 0.04em;
}
.pricing-aux__grid > div > span:not(.b2b-desc) {
font-size: var(--text-body-sm);
font-weight: 600;
color: var(--color-slate-dark);
}
.b2b-desc {
font-family: var(--font-serif);
font-style: italic;
font-size: 12px;
color: var(--color-slate-light) !important;
font-weight: 400 !important;
line-height: 1.4;
}
.b2b-note {
margin: 8px 0 var(--spacing-16);
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
color: var(--color-slate-medium);
line-height: 1.5;
}
.custom-note {
margin: 8px 0 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
color: var(--color-slate-medium);
line-height: 1.55;
}
.custom-note a {
color: var(--color-clay);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color 200ms ease;
}
.custom-note a:hover {
color: var(--color-slate-dark);
}
.payment-terms {
margin-top: var(--spacing-12);
padding-top: var(--spacing-12);
border-top: 1px dashed var(--color-cloud-light);
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-cloud-dark);
}
.payment-chips {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-8);
align-items: center;
}
.payment-chips span {
font-family: var(--font-mono);
font-size: var(--text-body-sm);
font-weight: 500;
background: var(--color-ivory-medium);
padding: 6px 12px;
border-radius: 4px;
color: var(--color-slate-dark);
letter-spacing: 0.04em;
}
.payment-chips__sep {
background: transparent !important;
color: var(--color-cloud-medium) !important;
padding: 6px 0 !important;
font-weight: 300 !important;
}
/* ============================================================
16. PARTNERS — DARK feature card with logo grids
============================================================ */
.partners-card .eyebrow { display: block; margin-bottom: var(--spacing-16); }
.partners-card .headline-serif {
font-size: clamp(42px, 6vw, 72px);
margin-bottom: var(--spacing-16);
}
.partners-card .body-lg { max-width: 760px; margin-bottom: var(--spacing-48); }
.partners-tier {
margin-bottom: var(--spacing-48);
}
.partners-tier:last-child { margin-bottom: 0; }
.partners-tier__label {
display: block;
font-family: var(--font-mono);
font-size: var(--text-caption);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-cloud-medium);
margin-bottom: var(--spacing-16);
padding-bottom: var(--spacing-8);
border-bottom: 1px solid var(--color-slate-medium);
}
.tier1-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--spacing-12);
}
.tier2-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--spacing-12);
}
.tier-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-12);
}
.tier-cards-grid--4 {
grid-template-columns: repeat(4, 1fr);
}
.tier-defi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-12);
}
.partner-cell {
background: var(--color-ivory-light);
border-radius: var(--radius-cards);
padding: var(--spacing-16) var(--spacing-12);
display: flex;
align-items: center;
justify-content: center;
min-height: 80px;
transition: transform 0.15s ease, background-color 0.15s ease;
}
.partner-cell--lg { min-height: 100px; padding: var(--spacing-24) var(--spacing-16); }
.partner-cell:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(20, 20, 19, 0.10), 0 0 0 1px var(--color-clay);
}
.partner-cell img {
max-height: 32px;
max-width: 100%;
object-fit: contain;
filter: grayscale(100%) brightness(0);
opacity: 0.75;
transition: filter 0.3s ease, opacity 0.3s ease;
}
.partner-cell--lg img { max-height: 44px; }
.partner-cell:hover img {
filter: none;
opacity: 1;
}
/* Per-logo size overrides — some logos render small/large at default sizes */
.partner-cell--lg img[alt="Gate.io"] { max-height: 60px; }
.partner-cell--lg img[alt="BingX"] { max-height: 50px; }
.partner-cell--lg img[alt="MEXC"] { max-height: 46px; }
.partner-cell--lg img[alt="OKX"] { max-height: 40px; }
.partner-cell img[alt="Hyperliquid"] { max-height: 28px; }
.partner-cell img[alt="BestChange"] {
max-height: 28px;
filter: none !important;
opacity: 1 !important;
}
.partner-cell img[alt="ProxyLine"] { max-height: 28px; }
.partner-cell img[alt="Bitrue"] { max-height: 38px; }
.partner-cell img[alt="Toobit"] { max-height: 56px; }
.partner-cell img[alt="Diamante"] { max-height: 38px; }
.partner-cell img[alt="Cifra Markets"] {
max-height: 28px;
filter: grayscale(100%) contrast(1.1) !important;
opacity: 0.85 !important;
}
.partner-cell:hover img[alt="Cifra Markets"] {
filter: none !important;
opacity: 1 !important;
}
.partner-cell img[alt="EVEDEX"] { max-height: 26px; }
/* ============================================================
17. TOOLS
============================================================ */
.tools-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-16);
margin-top: var(--spacing-32);
}
.tools-cell {
background: var(--color-ivory-medium);
min-height: 100px;
padding: var(--spacing-24) var(--spacing-16);
border: 1px solid var(--color-cloud-light);
}
.tools-cell img { max-height: 36px; }
.tools-cell img[alt="BestChange"] {
max-height: 32px;
filter: none !important;
opacity: 1 !important;
}
.tools-cell img[alt="ProxyLine"] { max-height: 32px; }
.tools-cell img[alt="NodeMaven"] { max-height: 30px; }
.tools-cell img[alt="NordVPN"] { max-height: 32px; }
.tools-cell:hover { border-color: var(--color-clay); }
/* ============================================================
17b. CHANNELS — light editorial grid
============================================================ */
.channels-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-24);
}
.channel-card {
background: var(--color-ivory-light);
border-radius: var(--radius-cards);
padding: var(--spacing-32);
box-shadow:
rgba(20, 20, 19, 0.025) 0px 32px 40px -20px,
rgba(20, 20, 19, 0.03) 0px 16px 24px -12px,
rgba(20, 20, 19, 0.03) 0px 4px 8px -4px,
rgba(20, 20, 19, 0.04) 0px 0px 0px 1px;
}
.channel-card .label-mono { display: block; margin-bottom: var(--spacing-12); }
.channel-card__name {
font-family: var(--font-serif);
font-size: 28px;
font-weight: 400;
letter-spacing: -0.5px;
color: var(--color-slate-dark);
margin-bottom: var(--spacing-24);
line-height: 1.2;
}
.channel-list {
list-style: none;
display: flex;
flex-direction: column;
}
.channel-list li {
border-top: 1px solid var(--color-cloud-light);
}
.channel-list li:last-child { border-bottom: 1px solid var(--color-cloud-light); }
.channel-list a {
display: grid;
grid-template-columns: 24px 110px 1fr auto;
gap: var(--spacing-16);
align-items: center;
padding: var(--spacing-16) 0;
font-family: var(--font-sans);
font-size: var(--text-body);
color: var(--color-slate-dark);
transition: color 0.15s ease;
}
.channel-list a::after {
content: "↗";
font-family: var(--font-mono);
color: var(--color-cloud-medium);
transition: color 0.15s ease;
}
.channel-list a:hover { color: var(--color-clay); }
.channel-list a:hover::after { color: var(--color-clay); }
.ch-icon {
width: 22px;
height: 22px;
color: var(--color-slate-dark);
transition: color 0.15s ease;
flex-shrink: 0;
}
.channel-list a:hover .ch-icon { color: var(--color-clay); }
.ch-tag {
font-family: var(--font-mono);
font-size: var(--text-caption);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-cloud-dark);
}
.ch-handle {
font-family: var(--font-sans);
font-size: var(--text-body);
font-weight: 500;
color: var(--color-slate-dark);
}
/* ============================================================
18. CONTACT — dark feature card
============================================================ */
.contact-card {
text-align: left;
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: var(--spacing-61);
align-items: center;
background: transparent;
color: var(--color-slate-dark);
border-radius: 0;
padding: 0;
position: relative;
overflow: visible;
}
.contact-card .eyebrow { color: var(--color-cloud-dark); }
.contact-card .body-lg {
color: #000000 !important;
font-weight: 700 !important;
font-size: var(--text-subheading);
}
.contact-card .headline-serif { color: var(--color-slate-dark); }
.contact-card__text { position: relative; z-index: 2; }
.contact-card__text .label-mono { color: var(--color-cloud-dark); }
.contact-card__text .contact-block a { color: var(--color-slate-dark); font-weight: 500; }
.contact-card__text .contact-block a:hover { border-bottom-color: var(--color-clay); color: var(--color-clay); }
.contact-channels { border-top-color: var(--color-cloud-light) !important; }
.contact-status {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: var(--spacing-16);
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-slate-medium);
}
.contact-status__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #2ea043;
box-shadow: 0 0 0 0 rgba(46, 160, 67, 0.6);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(46, 160, 67, 0.45); }
70% { box-shadow: 0 0 0 8px rgba(46, 160, 67, 0); }
100% { box-shadow: 0 0 0 0 rgba(46, 160, 67, 0); }
}
.contact-card__photo {
position: relative;
aspect-ratio: 4 / 5;
max-height: 860px;
align-self: center;
z-index: 1;
overflow: visible;
}
.contact-card__photo::before {
content: "";
position: absolute;
inset: -15% -20% -8% -20%;
background:
radial-gradient(ellipse at 50% 40%, rgba(245, 240, 230, 0.70) 0%, transparent 55%),
radial-gradient(ellipse at 55% 50%, rgba(217, 119, 87, 0.45) 0%, rgba(217, 119, 87, 0.16) 30%, transparent 65%);
filter: blur(60px);
pointer-events: none;
z-index: 0;
}
.contact-card__photo picture {
display: block;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
.contact-card__photo img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
display: block;
filter: drop-shadow(0 24px 56px rgba(20, 20, 19, 0.22));
}
.contact-card .eyebrow { display: block; margin-bottom: var(--spacing-12); }
.contact-card .headline-serif {
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.05;
letter-spacing: -1.5px;
margin-bottom: var(--spacing-16);
}
.contact-card .body-lg {
max-width: 720px;
margin-bottom: var(--spacing-24);
font-size: var(--text-body);
color: var(--color-ivory-dark);
}
.contact-channels {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-16) var(--spacing-24);
margin-top: var(--spacing-32);
padding-top: var(--spacing-24);
border-top: 1px solid var(--color-slate-medium);
}
.contact-block .label-mono { display: block; margin-bottom: 6px; color: var(--color-cloud-medium); }
.contact-block a {
display: block;
font-family: var(--font-sans);
font-size: var(--text-body);
font-weight: 500;
color: var(--color-ivory-light);
margin-bottom: 4px;
border-bottom: 1px solid transparent;
transition: border-color 0.15s ease;
width: fit-content;
}
.contact-block a:hover { border-bottom-color: var(--color-ivory-light); }
/* ============================================================
19. FOOTER
============================================================ */
.footer {
padding: var(--spacing-48) var(--spacing-32) var(--spacing-32);
border-top: 1px solid var(--color-cloud-light);
background: var(--color-ivory-light);
}
.footer__inner {
max-width: var(--page-max-width);
margin: 0 auto;
}
.footer__top {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--spacing-24);
flex-wrap: wrap;
padding-bottom: var(--spacing-32);
border-bottom: 1px solid var(--color-cloud-light);
}
.footer__bottom {
padding-top: var(--spacing-24);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--spacing-16);
flex-wrap: wrap;
}
.footer__brand {
display: flex;
align-items: center;
gap: var(--spacing-16);
}
.footer__brand img {
height: 44px;
width: auto;
display: block;
flex-shrink: 0;
}
.footer__brand-text {
display: flex;
flex-direction: column;
}
.footer__brand-text strong {
font-family: var(--font-sans);
font-size: var(--text-body);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--color-slate-dark);
}
.footer__brand-text span {
font-weight: 400;
font-size: var(--text-body-sm);
letter-spacing: -0.002em;
color: var(--color-slate-light);
margin-top: 4px;
}
.footer__socials {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: var(--spacing-8);
}
.footer__social {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-decoration: none;
}
.footer__social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid var(--color-cloud-light);
color: var(--color-slate-dark);
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.footer__social:hover .footer__social-icon {
background: var(--color-slate-dark);
border-color: var(--color-slate-dark);
color: var(--color-ivory-light);
}
.footer__social-icon svg {
width: 16px;
height: 16px;
}
.footer__social-tag {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.08em;
color: var(--color-cloud-dark);
text-transform: uppercase;
height: 12px;
display: flex;
align-items: center;
}
.footer__social:hover .footer__social-tag { color: var(--color-slate-dark); }
.footer__copyright {
font-family: var(--font-sans);
font-size: var(--text-body-sm);
color: var(--color-slate-light);
}
.footer__copyright strong {
color: var(--color-slate-dark);
font-weight: 600;
margin-right: 8px;
}
.footer__legal {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: var(--spacing-24);
font-family: var(--font-sans);
font-size: var(--text-body-sm);
color: var(--color-slate-light);
flex-wrap: wrap;
}
.footer__legal a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.footer__legal a:hover {
color: var(--color-slate-dark);
border-bottom-color: var(--color-clay);
}
/* ============================================================
20. LIGHTBOX
============================================================ */
.lightbox {
display: none;
position: fixed;
inset: 0;
background: rgba(20, 20, 19, 0.92);
z-index: 100;
align-items: center;
justify-content: center;
padding: 32px;
cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox img {
max-width: 95vw;
max-height: 95vh;
border-radius: 8px;
}
/* ============================================================
20.4 ACCESSIBILITY — focus, skip-to-content, mobile drawer
============================================================ */
/* Skip-to-content link — appears on first Tab */
.skip-link {
position: absolute;
top: -100px;
left: 16px;
z-index: 200;
padding: 12px 18px;
background: var(--color-slate-dark);
color: var(--color-ivory-light);
text-decoration: none;
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
border-radius: 0 0 8px 8px;
transition: top 0.18s ease;
}
.skip-link:focus {
top: 0;
outline: 2px solid var(--color-clay);
outline-offset: 2px;
}
/* Universal focus-visible — branded accent ring */
:focus-visible {
outline: 2px solid var(--color-clay);
outline-offset: 3px;
border-radius: 2px;
}
.btn:focus-visible {
outline-offset: 4px;
}
img:focus-visible {
outline-offset: 4px;
}
/* Mobile nav drawer */
.nav__menu-toggle {
display: none;
appearance: none;
border: 0;
background: transparent;
width: 44px;
height: 44px;
padding: 0;
cursor: pointer;
align-items: center;
justify-content: center;
color: var(--color-slate-dark);
border-radius: 4px;
}
.nav__menu-toggle:hover {
background: var(--color-ivory-medium);
}
.nav__menu-toggle svg {
width: 24px;
height: 24px;
display: block;
}
.nav__menu-toggle .icon-close { display: none; }
.nav__menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav__menu-toggle[aria-expanded="true"] .icon-close { display: block; }
.drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(20, 20, 19, 0.45);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity 0.28s ease;
z-index: 90;
}
.drawer-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
.drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(360px, 88vw);
background: var(--color-ivory-light);
border-left: 1px solid var(--color-cloud-light);
z-index: 95;
transform: translateX(100%);
transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
display: flex;
flex-direction: column;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.drawer.is-open {
transform: translateX(0);
}
.drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
border-bottom: 1px solid var(--color-cloud-light);
}
.drawer__head img {
height: 32px;
width: auto !important; /* override HTML width=1454 attribute that breaks aspect */
max-width: 60%;
flex: 0 0 auto;
object-fit: contain;
display: block;
}
.drawer__close {
appearance: none;
border: 0;
background: transparent;
width: 40px;
height: 40px;
padding: 0;
cursor: pointer;
color: var(--color-slate-dark);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.drawer__close:hover { background: var(--color-ivory-medium); }
.drawer__nav {
list-style: none;
padding: 12px 0;
margin: 0;
border-bottom: 1px solid var(--color-cloud-light);
}
.drawer__nav li a {
display: block;
padding: 14px 22px;
font-family: var(--font-sans);
font-size: 16px;
font-weight: 500;
color: var(--color-slate-dark);
text-decoration: none;
border-left: 3px solid transparent;
transition: background 0.15s ease, border-color 0.15s ease;
}
.drawer__nav li a:hover,
.drawer__nav li a:focus {
background: var(--color-ivory-medium);
border-left-color: var(--color-clay);
}
.drawer__lang {
display: flex;
gap: 4px;
padding: 18px 22px;
border-bottom: 1px solid var(--color-cloud-light);
}
.drawer__lang button {
flex: 1;
appearance: none;
border: 1px solid var(--color-cloud-light);
background: transparent;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.06em;
padding: 10px 0;
border-radius: 4px;
color: var(--color-slate-medium);
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.drawer__lang button.is-active {
background: var(--color-slate-dark);
border-color: var(--color-slate-dark);
color: var(--color-ivory-light);
}
.drawer__cta {
padding: 22px;
}
.drawer__cta .btn {
display: block;
width: 100%;
text-align: center;
}
.drawer__socials {
display: flex;
gap: 14px;
padding: 8px 22px 28px;
flex-wrap: wrap;
}
.drawer__socials a {
display: inline-flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border: 1px solid var(--color-cloud-light);
border-radius: 50%;
color: var(--color-slate-dark);
text-decoration: none;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.drawer__socials a:hover {
background: var(--color-slate-dark);
color: var(--color-ivory-light);
border-color: var(--color-slate-dark);
}
.drawer__socials svg {
width: 16px;
height: 16px;
}
@media (max-width: 980px) {
.nav__menu-toggle { display: inline-flex; }
.nav__actions .btn { display: none; } /* nav CTA hidden on mobile (drawer + sticky CTA cover it) */
}
/* Lock body scroll when drawer is open */
body.drawer-open {
overflow: hidden;
}
/* ============================================================
20.5 BRAND POLISH — selection, scrollbar, page-load fade,
sticky mobile CTA, 3D tilt cards
============================================================ */
/* Custom selection — clay accent everywhere */
::selection {
background: var(--color-clay);
color: var(--color-ivory-light);
}
::-moz-selection {
background: var(--color-clay);
color: var(--color-ivory-light);
}
/* Custom scrollbar — thin, branded, subtle */
* {
scrollbar-width: thin;
scrollbar-color: var(--color-cloud-medium) transparent;
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: var(--color-cloud-medium);
border-radius: 6px;
border: 2px solid var(--color-ivory-light);
}
*::-webkit-scrollbar-thumb:hover {
background: var(--color-clay);
}
/* Page-load fade — body starts hidden, JS removes class once ready */
body {
opacity: 1;
transition: opacity 0.45s ease;
}
/* NOTE 2026-05-12 — removed opacity:0 hack on body.is-preload.
It blocked Lighthouse First Contentful Paint measurement
(NO_FCP error) and added 1-2s visible delay for real users
waiting on DOMContentLoaded + fonts.ready. Reveal-on-scroll
animations on individual sections still handle the polish.
Keeping the class on for JS that may reference it. */
body.is-preload {
opacity: 1;
}
/* LQIP — blur-up placeholder for portraits while the AVIF/WebP loads.
Inline data:image LQIP is set via background-image on the ![]()
;
JS clears it once the real image fires the load event. */
.has-lqip {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(0); /* needed so descendants don't inherit anything weird */
}
.has-lqip:not(.is-loaded) {
/* While loading, soften the colour halo so the LQIP feels intentional */
}
.has-lqip.is-loaded {
background-image: none !important;
}
/* Per-image fade-in — image starts at 0 opacity, fades when load fires */
.has-lqip {
opacity: 0;
transition: opacity 0.55s ease;
}
.has-lqip.is-loaded {
opacity: 1;
}
/* Language switch crossfade — i18n-bound text briefly dims while swapping */
[data-i18n] {
transition: opacity 0.18s ease;
}
body.is-lang-switching [data-i18n] {
opacity: 0;
}
/* 3D tilt cards — apply via .tilt class */
.tilt {
transform-style: preserve-3d;
transform: perspective(900px) rotateX(0) rotateY(0);
transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}
.tilt > * {
transform: translateZ(0);
}
/* ============================================================
CONTACT FORM — standalone section, centered, editorial
============================================================ */
.contact-form-section {
padding-top: var(--spacing-48);
padding-bottom: var(--spacing-120);
background: var(--color-ivory-light);
}
.contact-form-shell {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.contact-form-shell__head {
margin-bottom: var(--spacing-48);
}
.contact-form-shell__title {
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(32px, 4.4vw, 48px);
line-height: 1.1;
letter-spacing: -1.2px;
color: var(--color-slate-dark);
margin: var(--spacing-16) 0 var(--spacing-16);
}
.contact-form-shell__title .emph {
text-decoration: underline;
text-decoration-color: var(--color-clay);
text-decoration-thickness: 4px;
text-underline-offset: 6px;
}
.contact-form-shell__lede {
font-size: 17px;
line-height: 1.55;
color: var(--color-slate-light);
max-width: 520px;
margin: 0 auto;
}
.contact-form-shell .contact-form {
text-align: left;
margin: 0;
padding: var(--spacing-48);
background: white;
border: 1px solid var(--color-cloud-light);
border-radius: var(--radius-panels);
box-shadow: 0 1px 0 rgba(20, 20, 19, 0.04), 0 8px 24px rgba(20, 20, 19, 0.04);
}
@media (max-width: 720px) {
.contact-form-section { padding-bottom: var(--spacing-84); }
.contact-form-shell .contact-form { padding: var(--spacing-24); }
.contact-form-shell__head { margin-bottom: var(--spacing-32); }
}
/* ============================================================
CONTACT FORM — editorial style, AJAX submit to Formspree
============================================================ */
.contact-form {
/* Used inside .contact-form-shell — no border/padding by default,
the shell wraps it. */
}
.contact-form__eyebrow {
display: inline-block;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-clay);
margin-bottom: var(--spacing-12);
}
.contact-form__head {
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(22px, 2.6vw, 28px);
line-height: 1.2;
color: var(--color-slate-dark);
margin: 0 0 var(--spacing-24);
letter-spacing: -0.4px;
}
.contact-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-16);
margin-bottom: var(--spacing-16);
}
.contact-form__field {
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
}
.contact-form__field--full {
grid-column: 1 / -1;
}
.contact-form__label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-slate-light);
}
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
width: 100%;
font-family: var(--font-sans);
font-size: 15px;
color: var(--color-slate-dark);
background: var(--color-ivory-light);
border: 1px solid var(--color-cloud-light);
border-radius: 0;
padding: 12px 14px;
outline: none;
transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
appearance: none;
-webkit-appearance: none;
}
.contact-form__textarea {
min-height: 120px;
resize: vertical;
font-family: var(--font-sans);
line-height: 1.55;
}
.contact-form__select {
background: var(--color-ivory-light) url("data:image/svg+xml;utf8,") no-repeat right 14px center;
background-size: 12px 8px;
padding-right: 36px;
cursor: pointer;
}
.contact-form__input:hover,
.contact-form__select:hover,
.contact-form__textarea:hover {
border-color: var(--color-cloud-medium);
}
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
border-color: var(--color-clay);
background: white;
box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.12);
}
.contact-form__field.has-error .contact-form__input,
.contact-form__field.has-error .contact-form__select,
.contact-form__field.has-error .contact-form__textarea {
border-color: var(--color-accent-ember);
background: #fdf6f2;
}
.contact-form__error {
font-family: var(--font-sans);
font-size: 12px;
color: var(--color-accent-ember);
margin-top: 2px;
min-height: 1em;
}
/* Honeypot — hidden from users, visible to bots */
.contact-form__honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
}
.contact-form__actions {
display: flex;
align-items: center;
gap: var(--spacing-16);
margin-top: var(--spacing-24);
flex-wrap: wrap;
}
.contact-form__submit {
font-family: var(--font-sans);
font-weight: 600;
font-size: 15px;
background: var(--color-slate-dark);
color: var(--color-ivory-light);
border: 0;
padding: 13px 26px;
border-radius: var(--radius-cta-asymmetric);
cursor: pointer;
transition: background 0.2s ease, transform 0.18s ease, opacity 0.2s ease;
position: relative;
min-width: 180px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.contact-form__submit:hover:not(:disabled) {
background: var(--color-clay);
transform: translateY(-1px);
}
.contact-form__submit:disabled {
opacity: 0.65;
cursor: not-allowed;
}
.contact-form__submit-spinner {
width: 14px;
height: 14px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: cf-spin 0.8s linear infinite;
display: none;
}
.contact-form.is-submitting .contact-form__submit-spinner { display: inline-block; }
.contact-form.is-submitting .contact-form__submit-text { display: none; }
@keyframes cf-spin { to { transform: rotate(360deg); } }
.contact-form__hint {
font-family: var(--font-sans);
font-size: 13px;
color: var(--color-slate-light);
line-height: 1.5;
}
/* Success state — replace form on submit */
.contact-form__success {
display: none;
padding: var(--spacing-32);
background: var(--color-ivory-medium);
border-left: 3px solid var(--color-clay);
border-radius: 0 8px 8px 0;
}
.contact-form.is-submitted .contact-form__success { display: block; }
.contact-form.is-submitted .contact-form__form { display: none; }
.contact-form__success-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-clay);
display: block;
margin-bottom: 8px;
}
.contact-form__success-title {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 600;
color: var(--color-slate-dark);
margin: 0 0 12px;
line-height: 1.2;
}
.contact-form__success-body {
color: var(--color-slate-medium);
font-size: 15px;
line-height: 1.6;
margin: 0;
}
/* Network-error banner */
.contact-form__network-error {
display: none;
margin-top: var(--spacing-16);
padding: 12px 16px;
background: #fdf3ee;
border-left: 3px solid var(--color-accent-ember);
font-size: 14px;
color: var(--color-slate-dark);
}
.contact-form.has-network-error .contact-form__network-error { display: block; }
@media (max-width: 720px) {
.contact-form__row { grid-template-columns: 1fr; gap: 0; }
.contact-form__field { margin-bottom: var(--spacing-16); }
}
/* Featured Partner — Premier-tier banner above hero (30-day campaign).
Hidden via [hidden] attribute by default; JS unhides if window.cryptoLadyPartner
is set and not dismissed and not past endDate. */
.featured-partner {
display: block;
padding: var(--spacing-24) var(--spacing-16) 0;
}
.featured-partner[hidden] { display: none !important; }
.featured-partner__inner {
max-width: 1080px;
margin: 0 auto;
background: linear-gradient(90deg, rgba(217, 119, 87, 0.10) 0%, rgba(255, 215, 130, 0.10) 100%);
border: 1px solid rgba(217, 119, 87, 0.32);
border-radius: 14px;
padding: 14px 20px;
display: flex;
align-items: center;
gap: 16px;
}
.featured-partner__badge {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.4px;
color: var(--color-clay);
background: rgba(217, 119, 87, 0.12);
padding: 5px 10px;
border-radius: 6px;
white-space: nowrap;
flex-shrink: 0;
}
.featured-partner__link {
display: flex;
align-items: center;
gap: 14px;
flex: 1;
min-width: 0;
text-decoration: none;
color: inherit;
transition: opacity 200ms ease;
}
.featured-partner__link:hover { opacity: 0.82; }
.featured-partner__logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: white;
border: 1px solid rgba(217, 119, 87, 0.18);
border-radius: 8px;
flex-shrink: 0;
font-family: var(--font-mono);
font-size: 10px;
color: var(--color-slate-medium);
overflow: hidden;
}
.featured-partner__logo img {
max-width: 80%;
max-height: 80%;
object-fit: contain;
}
.featured-partner__text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.featured-partner__name {
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
color: var(--color-slate-dark);
line-height: 1.2;
letter-spacing: -0.2px;
}
.featured-partner__tagline {
font-family: var(--font-serif);
font-size: 13px;
color: var(--color-slate-medium);
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.featured-partner__cta {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--color-slate-dark);
color: var(--color-ivory-light);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
padding: 8px 14px;
border-radius: 8px;
white-space: nowrap;
flex-shrink: 0;
}
.featured-partner__cta::after {
content: "→";
margin-left: 2px;
}
.featured-partner__close {
background: transparent;
border: 0;
cursor: pointer;
color: var(--color-slate-medium);
padding: 8px;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: background-color 200ms ease, color 200ms ease;
flex-shrink: 0;
}
.featured-partner__close:hover {
background: rgba(217, 119, 87, 0.08);
color: var(--color-slate-dark);
}
.featured-partner__close svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
.featured-partner__inner {
flex-wrap: wrap;
padding: 12px 14px;
gap: 10px;
}
.featured-partner__link {
width: 100%;
flex-wrap: wrap;
}
.featured-partner__cta {
margin-left: auto;
}
.featured-partner__tagline {
white-space: normal;
}
}
/* Floating announcement pill — soft white pill with shadow ring + chip
Sits centered above the hero, links to a target section. */
.announce {
display: flex;
justify-content: center;
padding: var(--spacing-24) var(--spacing-16) 0;
}
.announce__pill {
display: inline-flex;
align-items: center;
gap: 12px;
background: white;
padding: 8px 8px 8px 16px;
border-radius: 999px;
text-decoration: none;
color: var(--color-slate-dark);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01em;
box-shadow:
rgba(255, 255, 255, 0.88) 0px 1px 1px 0px inset,
rgba(20, 20, 19, 0.04) 0px 8px 18px 0px,
rgba(20, 20, 19, 0.04) 0px 0px 0px 1px;
transition: transform 0.3s var(--ease-spring), box-shadow 0.25s ease;
max-width: 100%;
}
.announce__pill:hover {
transform: translateY(-1px);
box-shadow:
rgba(255, 255, 255, 0.88) 0px 1px 1px 0px inset,
rgba(20, 20, 19, 0.06) 0px 12px 24px 0px,
rgba(217, 119, 87, 0.30) 0px 0px 0px 1px;
}
.announce__chip {
display: inline-flex;
align-items: center;
background: var(--color-slate-dark);
color: var(--color-ivory-light);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
}
.announce__text {
display: inline-flex;
align-items: center;
gap: 6px;
}
.announce__text-sep {
color: var(--color-cloud-medium);
margin: 0 4px;
}
.announce__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--color-ivory-medium);
color: var(--color-slate-dark);
margin-left: 4px;
transition: background 0.2s ease, transform 0.2s ease;
flex-shrink: 0;
}
.announce__pill:hover .announce__arrow {
background: var(--color-clay);
color: white;
transform: translateX(2px);
}
.announce__arrow svg { width: 12px; height: 12px; }
@media (max-width: 640px) {
.announce__pill {
padding: 6px 6px 6px 12px;
font-size: 13px;
gap: 8px;
}
.announce__chip { font-size: 10px; padding: 3px 8px; }
}
/* Scroll progress — thin clay strip at the very top showing reading progress */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--color-clay);
transform: scaleX(0);
transform-origin: left center;
z-index: 100;
pointer-events: none;
will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
.scroll-progress { display: none; }
}
/* Sticky mobile CTA — appears after user scrolls past hero on small screens */
.sticky-cta {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 80;
display: none; /* hidden by default; JS toggles is-visible on mobile */
padding: 14px 22px;
background: var(--color-slate-dark);
color: var(--color-ivory-light);
text-decoration: none;
text-align: center;
font-family: var(--font-sans);
font-weight: 600;
font-size: 15px;
letter-spacing: 0.01em;
border-radius: 0 0 8px 8px;
box-shadow: 0 8px 32px rgba(20, 20, 19, 0.28), 0 2px 6px rgba(20, 20, 19, 0.12);
opacity: 0;
transform: translateY(20px);
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.sticky-cta.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
@media (max-width: 760px) {
.sticky-cta { display: block; }
}
/* Reduced-motion guards for new behaviors */
@media (prefers-reduced-motion: reduce) {
body, .tilt, .sticky-cta {
transition: none !important;
transform: none !important;
}
}
/* ============================================================
21. REVEAL ON SCROLL + STAGGER + PARALLAX + MAGNETIC
============================================================ */
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.7s ease, transform 0.7s var(--ease-spring);
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
/* Staggered children — each direct child springs in with incremental delay */
.reveal.stagger > * {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.6s ease, transform 0.65s var(--ease-spring);
}
.reveal.stagger.is-visible > *:nth-child(1) { transition-delay: 0.00s; }
.reveal.stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal.stagger.is-visible > *:nth-child(3) { transition-delay: 0.16s; }
.reveal.stagger.is-visible > *:nth-child(4) { transition-delay: 0.24s; }
.reveal.stagger.is-visible > *:nth-child(5) { transition-delay: 0.32s; }
.reveal.stagger.is-visible > *:nth-child(6) { transition-delay: 0.40s; }
.reveal.stagger.is-visible > *:nth-child(7) { transition-delay: 0.46s; }
.reveal.stagger.is-visible > *:nth-child(8) { transition-delay: 0.50s; }
.reveal.stagger.is-visible > *:nth-child(9) { transition-delay: 0.54s; }
.reveal.stagger.is-visible > * {
opacity: 1;
transform: none;
}
/* Stat counter — keep tabular alignment so width doesn't jump */
.about-stat__num,
.sel-stat__num {
font-variant-numeric: tabular-nums;
}
/* Parallax — softened on hero photo, JS-driven via --parallax-y */
.hero__photo picture,
.hero__photo img {
will-change: transform;
}
/* Magnetic CTA — JS sets --mx/--my on hover */
.btn.is-magnetic {
transform: translate(var(--mx, 0), var(--my, 0));
transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.btn.is-magnetic:active {
transform: translate(var(--mx, 0), var(--my, 0)) scale(0.98);
}
/* Honour reduced-motion across the board */
@media (prefers-reduced-motion: reduce) {
.reveal,
.reveal.stagger > *,
.btn.is-magnetic,
.hero__photo picture,
.hero__photo img {
transition: none !important;
transform: none !important;
}
}
/* ============================================================
22. RESPONSIVE
============================================================ */
@media (max-width: 1380px) and (min-width: 981px) {
.nav__links { gap: 14px; }
.nav__link { font-size: 13px; padding: 6px 8px; }
.nav__inner { padding: 0 var(--spacing-16); }
.nav__actions .btn { padding: 9px 16px; font-size: 13px; }
}
@media (max-width: 1240px) and (min-width: 981px) {
.nav__links { gap: 10px; }
.nav__link { font-size: 12px; padding: 6px 6px; }
.nav__actions .btn { padding: 8px 14px; font-size: 12px; }
}
@media (max-width: 1120px) and (min-width: 981px) {
/* Hide low-priority items on narrow desktop — keep critical ones */
.nav__links li:nth-child(4), /* Authenticity */
.nav__links li:nth-child(6) /* Selectivity */ { display: none; }
}
@media (max-width: 980px) {
:root {
--section-gap: 61px;
}
.hero { padding-top: var(--spacing-48); padding-bottom: var(--spacing-84); }
.hero__grid { grid-template-columns: 1fr; gap: var(--spacing-48); }
.hero__photo { max-width: 480px; }
.nav__links { display: none; }
.auth-pillars { grid-template-columns: 1fr; }
.auth-pillar { border-right: none; border-bottom: 1px solid var(--color-cloud-light); }
.auth-pillar:last-child { border-bottom: none; }
.auth-callout { grid-template-columns: 1fr; gap: var(--spacing-16); padding: var(--spacing-24); }
.auth-callout__text { font-size: 18px; }
.silver-feature { grid-template-columns: 1fr; gap: var(--spacing-32); padding: var(--spacing-32); text-align: center; }
.silver-feature__visual img { max-width: 200px; }
.silver-feature__lede { margin-left: auto; margin-right: auto; }
.silver-feature__meta { grid-template-columns: 1fr; gap: var(--spacing-16); text-align: left; }
.sel-hero { grid-template-columns: 1fr; gap: var(--spacing-24); align-items: start; }
.sel-stat__num { font-size: 120px; }
.sel-comparison { grid-template-columns: 1fr; }
.sel-card { padding: var(--spacing-24); }
.sel-card__title { font-size: 26px; }
.about-grid { grid-template-columns: 1fr; gap: var(--spacing-32); }
.about-photo { aspect-ratio: 4 / 5; max-width: 480px; margin: 0 auto; }
.about-stats { grid-template-columns: 1fr; gap: var(--spacing-8); }
.about-stat__num { font-size: 32px; }
.about-tier1__strip { gap: var(--spacing-16); }
.about-tier1__strip img { height: 18px; }
.markets-grid { grid-template-columns: 1fr; }
.proof-grid { grid-template-columns: 1fr; }
.wf-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-24); }
.wf-header__turnaround { text-align: left; }
.wf-roadmap {
display: grid;
grid-template-columns: repeat(7, minmax(220px, 1fr));
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
padding-bottom: var(--spacing-16);
-webkit-overflow-scrolling: touch;
}
.wf-roadmap::before { display: none; }
.wf-stop { scroll-snap-align: start; }
.pricing-tiers { grid-template-columns: 1fr; }
.pricing-secondary { grid-template-columns: 1fr; }
.pricing-aux__grid { grid-template-columns: 1fr; }
.tier1-grid { grid-template-columns: repeat(3, 1fr); }
.tier2-grid { grid-template-columns: repeat(2, 1fr); }
.tier-cards-grid { grid-template-columns: repeat(2, 1fr); }
.tier-cards-grid--4 { grid-template-columns: repeat(2, 1fr); }
.tier-defi-grid { grid-template-columns: repeat(2, 1fr); }
.tools-grid { grid-template-columns: repeat(2, 1fr); }
.contact-channels { grid-template-columns: 1fr; gap: var(--spacing-16); }
.contact-card { grid-template-columns: 1fr; gap: var(--spacing-24); padding: var(--spacing-32); }
.contact-card__photo { max-height: 420px; order: 2; }
.channels-grid { grid-template-columns: 1fr; }
.channel-list a { grid-template-columns: 22px 80px 1fr auto; gap: 12px; }
.hero__text { padding-left: 0; }
.dark-card { padding: var(--spacing-48) var(--spacing-24); }
.container { padding: 0 var(--spacing-16); }
.section { padding-top: var(--spacing-61); padding-bottom: var(--spacing-61); }
}
/* ============================================================
22.5 TABLET PORTRAIT — restore 2-column layouts (761-1100px)
Overrides .max-980 mobile-stack rules above
============================================================ */
@media (min-width: 761px) and (max-width: 1100px) {
/* Hero — side by side, smaller photo */
.hero__grid {
grid-template-columns: 1.1fr 1fr;
gap: var(--spacing-32);
align-items: center;
}
.hero__photo {
max-width: 380px;
max-height: 480px;
margin: 0;
}
.hero__brand-wordmark {
font-size: clamp(56px, 9vw, 96px);
letter-spacing: -3px;
}
/* About — 2 columns */
.about-grid {
grid-template-columns: 360px 1fr;
gap: var(--spacing-48);
align-items: start;
}
.about-photo {
max-width: 360px;
max-height: 460px;
margin: 0;
}
.about-stats { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-12); }
.about-stat__num { font-size: 40px; }
/* Markets — keep all 3 in one row on tablet portrait */
.markets-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-16);
}
.market-card {
padding: var(--spacing-20);
}
/* Channels — 2 cols */
.channels-grid { grid-template-columns: repeat(2, 1fr); }
/* Pricing — 2 cols, featured spans full width */
.pricing-tiers {
grid-template-columns: 1fr 1fr;
gap: var(--spacing-24);
}
.pricing-tier--featured {
grid-column: 1 / -1;
transform: none; /* no translateY on tablet */
}
.pricing-tier--featured::before { opacity: 0.5; }
.pricing-secondary { grid-template-columns: 1fr 1fr; }
/* Authenticity — keep 3 columns, restore right border */
.auth-pillars { grid-template-columns: repeat(3, 1fr); }
.auth-pillar {
border-right: 1px solid var(--color-cloud-light);
border-bottom: none;
}
.auth-pillar:last-child { border-right: none; }
/* Selectivity — 2 cols comparison */
.sel-comparison { grid-template-columns: 1fr 1fr; }
/* Proof — 2 cols (already 2-col in base) */
.proof-grid { grid-template-columns: repeat(2, 1fr); }
/* Tools — 3 cols */
.tools-grid { grid-template-columns: repeat(3, 1fr); }
/* Contact card — 2 cols with smaller photo */
.contact-card {
grid-template-columns: 1fr 320px;
gap: var(--spacing-48);
padding: var(--spacing-48);
}
/* Match container aspect to image natural aspect (1400/2376) so no letterboxing.
Width 280px → height ~475px. */
.contact-card__photo {
width: 280px !important;
max-width: 280px !important;
height: auto !important;
max-height: none !important;
aspect-ratio: 1400 / 2376 !important;
margin: 0 auto;
order: 0;
overflow: visible;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
z-index: auto !important;
position: static !important;
isolation: auto !important;
}
.contact-card__photo::before { display: none !important; }
.contact-card__photo picture {
display: block;
width: 100%;
height: 100%;
background: transparent !important;
}
.contact-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
filter: none !important;
mix-blend-mode: multiply;
background: transparent !important;
}
/* Ensure parent stacking contexts don't isolate the blend */
.contact-card,
.contact-card__text {
background: transparent !important;
z-index: auto !important;
isolation: auto !important;
}
.contact-channels { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-16); }
/* Nav — on tablet portrait, hide inline links to prevent overflow
(10 links + lang switcher + CTA + logo doesn't fit reliably,
especially on EN where "Launch a campaign" CTA is longest).
Use hamburger drawer instead — drawer has full nav + CTA. */
.nav__links { display: none; }
.nav__menu-toggle { display: inline-flex; }
.nav__actions .btn { display: inline-flex; padding: 10px 18px; font-size: 14px; }
/* Hero CTAs — fit RU long button text in one row on tablet portrait.
"Запустить кампанию →" + "Смотреть цены" doesn't fit with default padding,
because the text column is narrower than full viewport (2-col layout). */
.hero__ctas {
flex-wrap: nowrap;
gap: var(--spacing-8);
}
.hero__ctas .btn {
padding: 12px 16px;
font-size: 14px;
white-space: nowrap;
flex: 0 1 auto;
min-width: 0;
}
}
/* ============================================================
22.6 PHONE — compact photos, integrated with text (< 760px)
Overrides for actual mobile phones
============================================================ */
@media (max-width: 760px) {
/* Hero — compact photo, less aggressive padding */
.hero {
padding-top: var(--spacing-24);
padding-bottom: var(--spacing-48);
}
.hero__grid { gap: var(--spacing-24); }
/* Hero CTAs — force both buttons into one row on iPhone 13 Pro (390pt) */
.hero__ctas {
flex-wrap: nowrap;
gap: var(--spacing-8);
width: 100%;
}
.hero__ctas .btn {
padding: 12px 16px;
font-size: 14px;
white-space: nowrap;
flex: 0 1 auto;
min-width: 0;
}
.hero__photo {
max-width: 280px;
max-height: 340px;
margin: var(--spacing-24) auto;
align-self: center;
}
/* When JS moves photo inside .hero__text on mobile */
.hero__text .hero__photo {
margin: var(--spacing-12) auto var(--spacing-24);
display: block;
}
.hero__photo-caption { display: none; }
.hero__photo::before {
inset: -10% -12% -6% -12%;
filter: blur(36px);
}
.hero__brand-wordmark {
font-size: clamp(56px, 18vw, 96px);
letter-spacing: -2.5px;
margin-bottom: var(--spacing-24);
}
.hero__tagline { font-size: clamp(22px, 6vw, 32px); }
/* About — compact integrated photo */
.about-grid {
grid-template-columns: 1fr;
gap: var(--spacing-24);
place-items: center;
}
.about-photo {
max-width: 280px;
max-height: 340px;
margin: 0 auto;
order: 1;
}
/* When JS moves photo inside .about-content on mobile (before stats) */
.about-content .about-photo {
margin: var(--spacing-16) auto var(--spacing-16);
display: block;
}
.about-photo::after { display: none; } /* hide "MARIA · FOUNDER" badge to reduce visual noise */
.about-text { order: 2; text-align: left; width: 100%; }
.about-stats { grid-template-columns: 1fr; gap: var(--spacing-8); margin-top: var(--spacing-24); }
.about-stat {
flex-direction: row;
align-items: baseline;
justify-content: flex-start;
gap: var(--spacing-16);
padding: var(--spacing-16);
}
.about-stat__num { font-size: 36px; margin: 0; }
/* Contact — compact photo inside card */
.contact-card {
padding: var(--spacing-24);
gap: var(--spacing-16);
}
/* Container matches image's natural aspect (1400×2376) so no crop + no letterboxing.
Width 280px → height ~475px. mix-blend-mode: multiply blends photo's white background
with the page's cream bg so no visible "card" — Maria appears to stand on the page. */
.contact-card__photo {
width: 280px !important;
max-width: 280px !important;
height: auto !important;
max-height: none !important;
aspect-ratio: 1400 / 2376 !important;
margin: 0 auto;
order: 2;
overflow: visible;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
/* Critical: remove stacking context so mix-blend-mode can reach page bg */
z-index: auto !important;
position: static !important;
isolation: auto !important;
}
/* When JS moves photo inside .contact-card__text on mobile (after headline) */
.contact-card__text .contact-card__photo {
width: 280px !important;
max-width: 280px !important;
height: auto !important;
max-height: none !important;
aspect-ratio: 1400 / 2376 !important;
margin: var(--spacing-24) auto var(--spacing-32) !important;
display: block;
order: initial;
overflow: visible;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
z-index: auto !important;
position: static !important;
isolation: auto !important;
}
/* Picture/img: blend white background into the cream page bg */
.contact-card__text .contact-card__photo picture,
.contact-card__photo picture {
display: block;
width: 100%;
height: 100%;
background: transparent !important;
}
.contact-card__text .contact-card__photo img,
.contact-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
filter: none !important;
mix-blend-mode: multiply;
background: transparent !important;
}
/* Remove stacking context from .contact-card and .contact-card__text on mobile
so mix-blend-mode on img can blend with the page section background */
.contact-card,
.contact-card__text {
background: transparent !important;
z-index: auto !important;
isolation: auto !important;
}
.contact-card__photo::before {
/* Remove halo glow on phone — was overflowing into adjacent text */
display: none !important;
}
/* Force body-lg below photo to start cleanly */
.contact-card__text .contact-card__photo + .body-lg {
margin-top: var(--spacing-8);
clear: both;
}
.contact-channels { gap: var(--spacing-12); }
/* Section paddings — tighter on phone */
.section { padding-top: var(--spacing-48); padding-bottom: var(--spacing-48); }
:root { --section-gap: 48px; }
/* Authenticity headlines — smaller */
.auth-headline { font-size: clamp(32px, 8vw, 44px); letter-spacing: -0.8px; }
/* Markets — 1 col stays */
.markets-grid { grid-template-columns: 1fr; }
/* Pricing — restore featured tier centered */
.pricing-tier--featured {
transform: none;
margin: var(--spacing-24) 0;
}
.pricing-tier--featured::before { opacity: 0.4; }
/* Hide hero glow animation pulse on phone to save battery */
.hero__photo::before { animation: none; }
/* A) Hide announcement pill entirely on phone — frees vertical space before hero */
.announce { display: none; }
/* B) Compact partner cells on phone — denser grid, smaller logos */
.partner-cell {
padding: var(--spacing-12) var(--spacing-8);
min-height: 60px;
}
.partner-cell--lg {
min-height: 72px;
padding: var(--spacing-16) var(--spacing-12);
}
.partner-cell img { max-height: 24px; }
.partner-cell--lg img { max-height: 32px; }
/* Override per-logo sizes on phone — proportional reduction */
.partner-cell--lg img[alt="Gate.io"] { max-height: 42px; }
.partner-cell--lg img[alt="BingX"] { max-height: 36px; }
.partner-cell--lg img[alt="MEXC"] { max-height: 32px; }
.partner-cell--lg img[alt="OKX"] { max-height: 28px; }
.partner-cell img[alt="Toobit"] { max-height: 40px; }
.partner-cell img[alt="Bitrue"] { max-height: 26px; }
.partner-cell img[alt="Diamante"] { max-height: 26px; }
.tier1-grid { gap: var(--spacing-8); }
.tier2-grid { gap: var(--spacing-8); grid-template-columns: repeat(2, 1fr); }
.tier-cards-grid { gap: var(--spacing-8); }
.tier-cards-grid--4 { gap: var(--spacing-8); }
.tier-defi-grid { gap: var(--spacing-8); }
.tools-grid { gap: var(--spacing-8); }
/* D) Hide scroll progress bar on phone — competes visually with sticky CTA */
.scroll-progress { display: none; }
/* E) Compact pricing tier cards — generous padding, room around text */
.pricing-tier {
padding: var(--spacing-32) var(--spacing-24) !important;
overflow: visible; /* allow BEST VALUE badge to extend above card */
}
/* Add breathing room above featured card so badge has space */
.pricing-tier--featured {
margin-top: var(--spacing-32) !important;
}
.pricing-tier__best {
top: -12px !important;
z-index: 4;
}
.pricing-tier__label {
font-size: 11px;
margin-bottom: var(--spacing-20);
padding-bottom: var(--spacing-12);
word-break: break-word;
}
.pricing-tier__items { gap: var(--spacing-16); }
.pricing-item {
min-width: 0;
}
.pricing-item__hero {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-6);
padding-bottom: var(--spacing-10);
margin-bottom: var(--spacing-10);
}
.pricing-item__name {
font-size: 15px;
line-height: 1.3;
word-wrap: break-word;
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
max-width: 100%;
}
.pricing-item__hero .pricing-item__name {
font-size: 16px;
}
.pricing-item__price { font-size: 24px !important; line-height: 1.1; }
.pricing-tier--featured .pricing-item__price { font-size: 28px !important; }
/* Merge: keep top/z-index from earlier rule, override font/padding here */
.pricing-tier__best {
font-size: 10px !important;
padding: 6px 14px !important;
letter-spacing: 0.12em !important;
}
.pricing-tier__footer {
font-size: 12px;
padding-top: var(--spacing-16);
word-break: break-word;
}
.pricing-row {
padding: var(--spacing-8) 0;
gap: var(--spacing-12);
flex-wrap: wrap;
}
.pricing-row span {
flex: 1 1 auto;
min-width: 0;
word-wrap: break-word;
overflow-wrap: anywhere;
}
.pricing-row strong {
font-size: 15px;
white-space: nowrap;
flex-shrink: 0;
}
.pricing-progression {
flex-direction: column;
gap: var(--spacing-8);
text-align: center;
}
.pricing-progression__arrow { transform: rotate(90deg); }
/* G) Compact footer on phone — tighter socials grid, smaller text */
.footer__top {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-24);
}
.footer__brand img { height: 36px; }
.footer__brand-text strong { font-size: 16px; }
.footer__brand-text span { font-size: 13px; }
.footer__socials {
display: flex;
flex-wrap: nowrap;
gap: 4px;
width: 100%;
justify-content: space-between;
}
.footer__social {
flex: 1 1 0;
min-width: 0;
height: 44px;
flex-direction: column;
gap: 2px;
padding: 4px 2px;
}
.footer__social-icon { width: 14px; height: 14px; }
.footer__social-tag {
font-size: 8px;
line-height: 1;
letter-spacing: 0.05em;
}
.footer__bottom {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-12);
padding-top: var(--spacing-16);
}
.footer__copyright { font-size: 13px; }
.footer__legal { gap: var(--spacing-12); font-size: 13px; }
.footer__copy { padding: var(--spacing-24) 0; }
}
/* ============================================================
23. PRINT — Cmd+P / Ctrl+P friendly
============================================================ */
@media print {
/* Page setup — A4 with comfortable margins */
@page {
size: A4;
margin: 18mm 16mm 22mm 16mm;
}
@page :first {
margin-top: 16mm;
}
/* Base typography for print */
html, body {
background: white !important;
color: #111 !important;
font-size: 10.5pt;
line-height: 1.5;
}
body.is-preload { opacity: 1 !important; }
/* Hide all non-essential UI chrome */
.nav,
.nav__switcher,
.nav__menu-toggle,
.nav__actions,
.lightbox,
.skip-link,
.sticky-cta,
.drawer,
.drawer-backdrop,
.hero__photo-caption,
.footer__socials,
.nav__inner { display: none !important; }
/* Show URL after every link so they remain useful when printed */
a[href^="http"]:after {
content: " (" attr(href) ")";
font-size: 9pt;
color: #555;
word-break: break-all;
}
/* But not for in-page anchor links — too noisy */
a[href^="#"]:after,
a[href^="mailto:"]:after,
a[href^="tel:"]:after { content: ""; }
/* Sections — keep together where possible */
.hero, .section {
padding-top: 18px;
padding-bottom: 18px;
page-break-inside: avoid;
break-inside: avoid;
}
h1, h2, h3 {
page-break-after: avoid;
break-after: avoid;
color: #111 !important;
}
/* Hero — flatten and shrink */
.hero {
padding-top: 0 !important;
padding-bottom: 24px;
}
.hero__grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.hero__photo { display: none; } /* photo is decorative for print */
.hero__brand-wordmark { font-size: 36pt !important; line-height: 1 !important; }
.hero__tagline { font-size: 18pt !important; }
.hero__sub { font-size: 11pt !important; }
.hero__ctas .btn { display: none; } /* CTAs make no sense on paper */
/* Featured cards — remove dark theme */
.dark-card {
background: white !important;
color: black !important;
border: 1px solid #ccc !important;
padding: 18px !important;
page-break-inside: avoid;
}
.dark-card .eyebrow,
.dark-card .body-lg,
.partners-tier__label,
.contact-block .label-mono { color: #555 !important; }
.dark-card .headline-serif { color: #111 !important; }
/* Partner grid — neutralize */
.partner-cell {
background: white !important;
border: 1px solid #ddd !important;
box-shadow: none !important;
transform: none !important;
}
.partner-cell img { filter: none !important; opacity: 1 !important; }
.partners-tier {
page-break-inside: avoid;
break-inside: avoid;
}
/* Pills, badges, buttons */
.btn {
display: none; /* no clickable buttons on paper */
}
.contact-block a { color: black !important; }
/* Cards and grids — encourage page-break friendliness */
.channel-card,
.market-card,
.sel-card,
.pricing-tier,
.tools-cell,
.proof-item,
.wf-stop {
page-break-inside: avoid;
break-inside: avoid;
box-shadow: none !important;
transform: none !important;
}
/* Reveal/animation states — flatten */
.reveal,
.reveal.stagger > *,
.tilt {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* Footer — minimal */
.footer {
border-color: #ccc !important;
padding: 16px 0 !important;
}
.footer__legal a {
color: #555 !important;
border-bottom: none !important;
}
/* Generic links */
a { color: inherit; text-decoration: none; }
/* Print-only footer note — small "visit cryptolady.pro" reminder */
body:after {
content: "cryptolady.pro · info@cryptolady.pro · @cryptomilady";
display: block;
margin-top: 24px;
padding-top: 12px;
border-top: 1px solid #ddd;
font-family: var(--font-mono);
font-size: 9pt;
color: #777;
text-align: center;
letter-spacing: 0.05em;
}
}
/* ===== DESIGN UPGRADE 2026-06-04 · Block 1: hero entrance + tactile buttons ===== */
@media (prefers-reduced-motion: no-preference) {
.hero__brand-wordmark,
.hero__tagline,
.hero__sub,
.hero__ctas,
.hero__price-anchor {
opacity: 0;
animation: heroRise 0.75s var(--ease-spring) forwards;
}
.hero__brand-wordmark { animation-delay: 0.05s; }
.hero__tagline { animation-delay: 0.18s; }
.hero__sub { animation-delay: 0.30s; }
.hero__ctas { animation-delay: 0.42s; }
.hero__price-anchor { animation-delay: 0.54s; }
@keyframes heroRise {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
}
/* Tactile press on every button (ghost included) */
.btn:active { transform: translateY(1px) scale(0.985); }
.btn--ghost:active { background: var(--color-ivory-medium); }
/* ===== /Block 1 ===== */
/* ===== DESIGN UPGRADE 2026-06-04 · Block 2: pricing tier hover states ===== */
.pricing-tier {
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.25s ease,
box-shadow 0.3s ease;
}
.pricing-tier:hover {
transform: translateY(-6px);
border-color: var(--color-clay);
box-shadow:
0 16px 32px -8px rgba(20, 20, 19, 0.14),
0 4px 12px rgba(217, 119, 87, 0.10);
}
.pricing-tier--featured:hover {
transform: translateY(-18px);
box-shadow:
0 40px 72px rgba(217, 119, 87, 0.24),
0 16px 32px rgba(20, 20, 19, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
@media (prefers-reduced-motion: reduce) {
.pricing-tier:hover, .pricing-tier--featured:hover { transform: none; }
}
/* ===== /Block 2 ===== */
/* ===== DESIGN UPGRADE 2026-06-04 · Block 3: card hover accents (works WITH 3D tilt) ===== */
/* Tilt JS owns transform; hover here touches only shadow + border, no conflicts. */
.channel-card, .market-card {
transition: box-shadow 0.35s ease, border-color 0.3s ease;
}
.channel-card:hover, .market-card:hover {
box-shadow:
0 20px 40px -12px rgba(20, 20, 19, 0.16),
0 6px 16px rgba(217, 119, 87, 0.08);
}
/* Partner logos: gentle lift, keeps click-through affordance obvious */
.partner-cell {
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
.partner-cell:hover { transform: translateY(-3px) scale(1.04); }
@media (prefers-reduced-motion: reduce) {
.partner-cell:hover { transform: none; }
}
/* ===== /Block 3 ===== */
/* ===== FAQ section (2026-06-04) ===== */
.faq-list { margin-top: var(--spacing-32); display: flex; flex-direction: column; gap: var(--spacing-12); }
.faq-item {
background: var(--color-ivory-light);
border: 1px solid var(--color-cloud-light);
border-radius: var(--radius-cards);
transition: border-color 0.25s ease, box-shadow 0.3s ease;
}
.faq-item[open] { border-color: var(--color-clay); box-shadow: 0 8px 24px -8px rgba(20,20,19,0.10); }
.faq-item summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-16);
padding: var(--spacing-20) var(--spacing-24);
font-weight: 600;
font-size: var(--text-subheading);
color: var(--color-slate-dark);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
flex: 0 0 auto;
font-size: 22px;
line-height: 1;
color: var(--color-clay);
transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
margin: 0;
padding: 0 var(--spacing-24) var(--spacing-24);
color: var(--color-slate-light);
font-size: var(--text-body);
line-height: 1.65;
max-width: 70ch;
}