/* =========================================================
Analytics Arena — Marketing site
Extends system.css tokens with marketing-specific styles.
========================================================= */
/* ----- Marketing-only token tweaks ----- */
:root {
--m-container: 1240px;
--m-section: 120px;
--m-section-sm: 80px;
/* Editorial type scale on top of the system */
--m-display: clamp(48px, 6.5vw, 96px);
--m-h1: clamp(36px, 4.4vw, 64px);
--m-h2: clamp(28px, 3.2vw, 44px);
--m-h3: clamp(22px, 2vw, 28px);
}
/* Hero color treatments via [data-treatment] on */
[data-treatment="midnight"] {
--bg: #03081C;
--bg-subtle: #060E2C;
--bg-muted: #0B1640;
--bg-inset: #02061A;
--surface: #0A1230;
--surface-raised: #0F1840;
--border: #1A2455;
--border-strong: #283366;
--chart-grid: #14205A;
--chart-axis: #6E7BA0;
}
[data-treatment="midnight"] .m-topbar { background: rgba(3, 8, 28, 0.7); }
/* ----- Reset stickiness from system topbar in marketing context ----- */
body {
background: var(--bg);
color: var(--text);
}
/* ----- Container ----- */
.m-container {
max-width: var(--m-container);
margin: 0 auto;
padding: 0 32px;
}
@media (max-width: 768px) {
.m-container { padding: 0 20px; }
}
/* ----- Topbar (marketing) ----- */
.m-topbar {
position: sticky;
top: 0;
z-index: 100;
background: rgba(15, 17, 21, 0.7);
backdrop-filter: saturate(180%) blur(16px);
-webkit-backdrop-filter: saturate(180%) blur(16px);
border-bottom: 1px solid var(--border);
}
.m-topbar-inner {
display: flex;
align-items: center;
gap: 32px;
height: 64px;
max-width: var(--m-container);
margin: 0 auto;
padding: 0 32px;
}
.m-brand {
display: flex; align-items: center;
gap: 10px;
flex-shrink: 0;
}
.m-brand img { height: 24px; width: auto; display: block; }
.m-nav {
display: flex; gap: 4px;
flex: 1;
}
.m-nav > a, .m-nav-item {
font-size: 14px;
font-weight: 500;
color: var(--text-muted);
padding: 8px 12px;
border-radius: var(--r-md);
position: relative;
transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
cursor: pointer;
text-decoration: none;
display: inline-flex; align-items: center; gap: 4px;
}
.m-nav > a:hover, .m-nav-item:hover {
color: var(--text);
background: var(--bg-muted);
text-decoration: none;
}
.m-nav .chev {
width: 12px; height: 12px;
opacity: 0.6;
}
.m-topbar-cta {
display: flex; align-items: center; gap: 8px;
flex-shrink: 0;
}
/* ----- Mega menu ----- */
.m-mega-host { position: relative; }
.m-mega {
position: absolute;
top: calc(100% + 8px);
left: -16px;
min-width: 480px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-xl);
padding: 16px;
box-shadow: var(--shadow-xl);
display: none;
z-index: 200;
}
.m-mega-host:hover .m-mega { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.m-mega a {
display: flex; align-items: flex-start; gap: 12px;
padding: 10px 12px;
border-radius: var(--r-md);
color: var(--text);
text-decoration: none;
transition: background var(--dur) var(--ease);
}
.m-mega a:hover { background: var(--bg-muted); text-decoration: none; }
.m-mega .mega-icon {
width: 32px; height: 32px;
flex-shrink: 0;
background: var(--primary-subtle);
color: var(--primary);
border-radius: var(--r-md);
display: grid; place-items: center;
}
.m-mega .mega-icon svg { width: 16px; height: 16px; }
.m-mega .mega-title { font-size: 13.5px; font-weight: 600; }
.m-mega .mega-desc { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
/* ----- Marketing buttons ----- */
.m-btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px;
height: 40px;
padding: 0 18px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
border-radius: var(--r-md);
background: transparent;
color: var(--text);
border: 1px solid transparent;
cursor: pointer;
transition: all var(--dur) var(--ease);
text-decoration: none;
white-space: nowrap;
}
.m-btn:hover { text-decoration: none; }
.m-btn-primary {
background: var(--primary);
color: white;
box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 1px 3px rgba(0,71,255,0.4);
}
.m-btn-primary:hover {
background: var(--primary-hover);
color: white;
transform: translateY(-1px);
box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 4px 12px rgba(0,71,255,0.5);
}
.m-btn-secondary {
background: transparent;
border-color: var(--border-strong);
color: var(--text);
}
.m-btn-secondary:hover {
background: var(--bg-muted);
border-color: var(--text-subtle);
color: var(--text);
}
.m-btn-ghost {
color: var(--text-muted);
}
.m-btn-ghost:hover { color: var(--text); background: var(--bg-muted); }
.m-btn-lg {
height: 48px;
padding: 0 22px;
font-size: 15px;
}
/* ----- Section scaffolding ----- */
.m-section {
padding: var(--m-section) 0;
position: relative;
}
.m-section-sm { padding: var(--m-section-sm) 0; }
.m-section-head {
text-align: center;
max-width: 720px;
margin: 0 auto 64px;
}
.m-section-head.align-left {
text-align: left;
margin-left: 0;
}
.m-eyebrow {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: 16px;
display: inline-flex; align-items: center; gap: 8px;
}
.m-eyebrow::before {
content: '';
width: 6px; height: 6px;
background: var(--primary);
border-radius: 1px;
}
.m-h1 {
font-family: var(--font-heading);
font-size: var(--m-h1);
line-height: 1.05;
letter-spacing: -0.025em;
font-weight: 700;
margin: 0 0 20px;
color: var(--text);
text-wrap: balance;
}
.m-display {
font-family: var(--font-heading);
font-size: var(--m-display);
line-height: 1.0;
letter-spacing: -0.03em;
font-weight: 700;
margin: 0 0 24px;
text-wrap: balance;
}
.m-h2 {
font-family: var(--font-heading);
font-size: var(--m-h2);
line-height: 1.1;
letter-spacing: -0.02em;
font-weight: 700;
margin: 0 0 20px;
text-wrap: balance;
}
.m-h3 {
font-family: var(--font-heading);
font-size: var(--m-h3);
line-height: 1.2;
letter-spacing: -0.015em;
font-weight: 600;
margin: 0 0 12px;
text-wrap: balance;
}
.m-lead {
font-family: var(--font-sans);
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.55;
color: var(--text-muted);
text-wrap: pretty;
max-width: 56ch;
}
.m-section-head .m-lead { margin-left: auto; margin-right: auto; }
/* ----- Hero ----- */
.m-hero {
position: relative;
padding: 80px 0 100px;
overflow: hidden;
}
.m-hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.m-hero-copy {
position: relative;
z-index: 2;
}
.m-hero h1 {
font-family: var(--font-heading);
font-size: clamp(40px, 5.2vw, 76px);
line-height: 1.02;
letter-spacing: -0.03em;
font-weight: 700;
margin: 0 0 24px;
text-wrap: balance;
}
.m-hero h1 .accent {
color: var(--primary);
font-style: italic;
font-family: var(--font-heading);
}
.m-hero p {
font-size: 19px;
line-height: 1.55;
color: var(--text-muted);
max-width: 52ch;
margin: 0 0 32px;
}
.m-hero-ctas {
display: flex; gap: 12px;
margin-bottom: 28px;
}
.m-hero-meta {
display: flex; gap: 20px; align-items: center;
font-size: 13px;
color: var(--text-subtle);
font-family: var(--font-mono);
}
.m-hero-meta .check {
display: inline-flex; align-items: center; gap: 6px;
}
.m-hero-meta .check::before {
content: '';
width: 14px; height: 14px;
background: var(--success-subtle);
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-position: center; background-repeat: no-repeat; background-size: 9px;
}
/* Hero variant: centered */
[data-hero="centered"] .m-hero-grid { grid-template-columns: 1fr; text-align: center; }
[data-hero="centered"] .m-hero-copy { max-width: 820px; margin: 0 auto; }
[data-hero="centered"] .m-hero p { margin-left: auto; margin-right: auto; }
[data-hero="centered"] .m-hero-ctas { justify-content: center; }
[data-hero="centered"] .m-hero-meta { justify-content: center; }
[data-hero="centered"] .m-hero-art {
margin-top: 64px;
grid-column: 1 / -1;
max-width: 100%;
}
[data-hero="centered"] .m-hero-bg-dots {
opacity: 0.6;
}
/* Hero art / dashboard mock area */
.m-hero-art {
position: relative;
z-index: 2;
}
.m-hero-bg-dots {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.4;
}
.m-hero-bg-glow {
position: absolute;
z-index: 0;
width: 800px;
height: 800px;
border-radius: 50%;
background: radial-gradient(circle at center, rgba(0, 71, 255, 0.35) 0%, transparent 60%);
top: -200px;
right: -200px;
filter: blur(60px);
pointer-events: none;
}
/* ----- Logo strip ----- */
.m-logo-strip {
padding: 40px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--bg-subtle);
}
.m-logo-strip-inner {
display: flex; align-items: center;
gap: 56px;
flex-wrap: wrap;
justify-content: center;
}
.m-logo-strip .label {
font-size: 12px;
font-family: var(--font-mono);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-subtle);
margin-right: 16px;
}
.m-logo-strip .placeholder-logo {
font-family: var(--font-heading);
font-weight: 700;
font-size: 22px;
color: var(--text-muted);
letter-spacing: -0.02em;
opacity: 0.75;
transition: opacity var(--dur) var(--ease);
white-space: nowrap;
}
.m-logo-strip .placeholder-logo:hover { opacity: 1; }
.m-logo-strip .placeholder-logo .dot {
width: 8px; height: 8px;
display: inline-block;
background: currentColor;
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
margin-top: -3px;
}
/* ----- Feature grid ----- */
.m-feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--r-xl);
overflow: hidden;
}
.m-feature {
background: var(--surface);
padding: 36px 32px 32px;
display: flex;
flex-direction: column;
gap: 14px;
transition: background var(--dur) var(--ease);
position: relative;
}
.m-feature:hover { background: var(--surface-raised); }
.m-feature-icon {
width: 44px; height: 44px;
background: var(--primary-subtle);
color: var(--primary);
border-radius: var(--r-md);
display: grid; place-items: center;
margin-bottom: 12px;
position: relative;
}
.m-feature-icon::after {
content: '';
position: absolute;
inset: -1px;
border-radius: var(--r-md);
background: linear-gradient(135deg, rgba(0,71,255,0.3), transparent);
z-index: -1;
opacity: 0.6;
}
.m-feature-icon svg { width: 20px; height: 20px; }
.m-feature h3 {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0;
color: var(--text);
}
.m-feature p {
font-size: 14px;
line-height: 1.55;
color: var(--text-muted);
margin: 0;
}
.m-feature-bullets {
margin-top: 8px;
display: flex; flex-direction: column;
gap: 6px;
font-size: 13px;
color: var(--text-on-muted);
}
.m-feature-bullets li {
display: flex; gap: 8px; align-items: flex-start;
list-style: none;
padding: 0;
}
.m-feature-bullets li::before {
content: '';
width: 16px; height: 16px;
flex-shrink: 0;
margin-top: 2px;
background-image: url("data:image/svg+xml;utf8,");
background-position: center; background-repeat: no-repeat; background-size: 14px;
}
.m-feature ul { padding: 0; margin: 0; }
/* ----- Big product showcase ----- */
.m-showcase {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 64px;
align-items: center;
}
.m-showcase.reverse { grid-template-columns: 7fr 5fr; }
.m-showcase.reverse .m-showcase-copy { order: 2; }
.m-showcase-copy h2 {
font-family: var(--font-heading);
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.1;
letter-spacing: -0.02em;
font-weight: 700;
margin: 0 0 18px;
text-wrap: balance;
}
.m-showcase-copy p {
font-size: 17px;
line-height: 1.6;
color: var(--text-muted);
margin: 0 0 24px;
max-width: 50ch;
}
.m-showcase-points {
list-style: none;
padding: 0;
margin: 0 0 28px;
display: flex; flex-direction: column;
gap: 12px;
}
.m-showcase-points li {
display: flex; gap: 12px;
font-size: 15px;
line-height: 1.5;
color: var(--text-on-muted);
}
.m-showcase-points li::before {
content: '';
width: 20px; height: 20px;
flex-shrink: 0;
margin-top: 2px;
background: var(--primary-subtle);
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-position: center; background-repeat: no-repeat; background-size: 12px;
}
.m-showcase-cta {
display: inline-flex; align-items: center; gap: 8px;
font-size: 14px;
font-weight: 600;
color: var(--primary);
text-decoration: none;
}
.m-showcase-cta:hover { color: var(--primary-hover); text-decoration: none; gap: 12px; }
/* ----- Dashboard mock card ----- */
.m-dash-mock {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-xl);
box-shadow: var(--shadow-xl);
overflow: hidden;
position: relative;
}
.m-dash-mock::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 40%);
pointer-events: none;
}
.m-dash-mock-bar {
height: 32px;
background: var(--bg-inset);
border-bottom: 1px solid var(--border);
display: flex; align-items: center;
padding: 0 12px;
gap: 6px;
}
.m-dash-mock-bar .dot {
width: 9px; height: 9px;
border-radius: 50%;
background: var(--border-strong);
}
.m-dash-mock-bar .url {
margin-left: 12px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-subtle);
}
/* ----- KPI cards within showcases ----- */
.m-kpi-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 16px;
}
.m-mini-kpi {
background: var(--bg-subtle);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 14px;
}
.m-mini-kpi-label {
font-size: 11px;
color: var(--text-subtle);
margin-bottom: 4px;
font-weight: 500;
}
.m-mini-kpi-value {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 500;
color: var(--text);
letter-spacing: -0.02em;
}
.m-mini-kpi-meta {
font-family: var(--font-mono);
font-size: 11px;
margin-top: 4px;
}
/* ----- Stats band ----- */
.m-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--r-xl);
overflow: hidden;
}
.m-stat {
background: var(--surface);
padding: 40px 24px;
text-align: center;
}
.m-stat-value {
font-family: var(--font-mono);
font-size: clamp(32px, 4vw, 56px);
font-weight: 500;
color: var(--primary);
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 8px;
}
.m-stat-label {
font-size: 14px;
color: var(--text-muted);
font-weight: 500;
}
/* ----- Customer quote ----- */
.m-quote {
background: linear-gradient(135deg, var(--primary-subtle), transparent);
border: 1px solid var(--primary-subtle-2);
border-radius: var(--r-2xl);
padding: 56px 64px;
text-align: center;
position: relative;
overflow: hidden;
}
.m-quote::before {
content: '"';
position: absolute;
top: -20px;
left: 32px;
font-family: var(--font-heading);
font-size: 200px;
color: var(--primary);
opacity: 0.18;
line-height: 1;
}
.m-quote-text {
font-family: var(--font-heading);
font-size: clamp(20px, 2.2vw, 28px);
line-height: 1.35;
letter-spacing: -0.015em;
font-weight: 500;
color: var(--text);
margin: 0 0 28px;
text-wrap: balance;
position: relative;
}
.m-quote-author {
display: flex; align-items: center;
justify-content: center;
gap: 14px;
}
.m-quote-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--primary);
display: grid; place-items: center;
font-family: var(--font-sans);
font-weight: 600;
color: white;
font-size: 14px;
letter-spacing: 0.02em;
}
.m-quote-name {
font-size: 14px;
font-weight: 600;
text-align: left;
}
.m-quote-title {
font-size: 12.5px;
color: var(--text-muted);
}
/* ----- Pricing ----- */
.m-pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.m-tier {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-xl);
padding: 36px 32px;
display: flex; flex-direction: column;
position: relative;
transition: all var(--dur) var(--ease);
}
.m-tier:hover {
border-color: var(--border-strong);
transform: translateY(-2px);
}
.m-tier.featured {
border-color: var(--primary);
background: linear-gradient(180deg, var(--primary-subtle), var(--surface) 30%);
box-shadow: var(--shadow-lg);
}
.m-tier-badge {
position: absolute;
top: -12px; left: 50%; transform: translateX(-50%);
background: var(--primary);
color: white;
font-size: 11px;
font-weight: 600;
font-family: var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: var(--r-pill);
}
.m-tier-name {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
color: var(--primary);
margin-bottom: 8px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.m-tier-price {
display: flex; align-items: flex-end; gap: 8px;
margin-bottom: 6px;
}
.m-tier-price .amount {
font-family: var(--font-mono);
font-size: 48px;
font-weight: 500;
letter-spacing: -0.03em;
line-height: 1;
color: var(--text);
}
.m-tier-price .period {
font-size: 14px;
color: var(--text-muted);
padding-bottom: 6px;
}
.m-tier-desc {
font-size: 14px;
color: var(--text-muted);
margin-bottom: 24px;
min-height: 2.8em;
}
.m-tier-features {
list-style: none;
padding: 0;
margin: 0 0 28px;
display: flex; flex-direction: column;
gap: 10px;
flex: 1;
}
.m-tier-features li {
display: flex; gap: 10px;
font-size: 13.5px;
line-height: 1.45;
color: var(--text-on-muted);
}
.m-tier-features li::before {
content: '';
width: 16px; height: 16px;
flex-shrink: 0;
margin-top: 2px;
background-image: url("data:image/svg+xml;utf8,");
background-position: center; background-repeat: no-repeat; background-size: 14px;
}
.m-tier-cta { margin-top: auto; }
/* ----- Final CTA band ----- */
.m-cta-band {
background: linear-gradient(135deg, var(--primary), var(--primary-active));
border-radius: var(--r-2xl);
padding: 72px 64px;
text-align: center;
position: relative;
overflow: hidden;
}
.m-cta-band::after {
content: '';
position: absolute;
inset: 0;
background: url("assets/icon-white.png") no-repeat right -100px bottom -100px;
background-size: 600px auto;
opacity: 0.07;
pointer-events: none;
}
.m-cta-band h2 {
font-family: var(--font-heading);
font-size: clamp(32px, 3.6vw, 52px);
line-height: 1.1;
letter-spacing: -0.025em;
font-weight: 700;
color: white;
margin: 0 0 20px;
text-wrap: balance;
position: relative;
}
.m-cta-band p {
font-size: 18px;
color: rgba(255,255,255,0.85);
max-width: 56ch;
margin: 0 auto 32px;
position: relative;
}
.m-cta-band .m-btn-primary {
background: white;
color: var(--primary);
border-color: white;
}
.m-cta-band .m-btn-primary:hover {
background: rgba(255,255,255,0.92);
color: var(--primary-active);
}
.m-cta-band .m-btn-secondary {
background: transparent;
border-color: rgba(255,255,255,0.4);
color: white;
}
.m-cta-band .m-btn-secondary:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.7);
color: white;
}
/* ----- Footer ----- */
.m-footer {
background: var(--bg-inset);
border-top: 1px solid var(--border);
padding: 80px 0 32px;
}
.m-footer-grid {
display: grid;
grid-template-columns: 2fr repeat(4, 1fr);
gap: 48px;
margin-bottom: 64px;
}
.m-footer-brand img { height: 28px; margin-bottom: 16px; }
.m-footer-brand p {
font-size: 13px;
color: var(--text-muted);
max-width: 32ch;
margin: 0 0 20px;
}
.m-footer-social {
display: flex; gap: 8px;
}
.m-footer-social a {
width: 32px; height: 32px;
display: grid; place-items: center;
border: 1px solid var(--border);
border-radius: var(--r-md);
color: var(--text-muted);
transition: all var(--dur) var(--ease);
}
.m-footer-social a:hover {
color: var(--text);
border-color: var(--border-strong);
text-decoration: none;
}
.m-footer-col h5 {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-subtle);
margin: 0 0 16px;
font-family: var(--font-sans);
}
.m-footer-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex; flex-direction: column;
gap: 10px;
}
.m-footer-col ul a {
font-size: 13.5px;
color: var(--text-muted);
text-decoration: none;
transition: color var(--dur) var(--ease);
}
.m-footer-col ul a:hover { color: var(--text); text-decoration: none; }
.m-footer-bottom {
display: flex; align-items: center;
justify-content: space-between;
padding-top: 32px;
border-top: 1px solid var(--border);
font-size: 12.5px;
color: var(--text-subtle);
font-family: var(--font-mono);
}
.m-footer-bottom .badges { display: flex; gap: 16px; align-items: center; }
.m-footer-bottom .badge-soc {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px;
background: var(--bg-muted);
border: 1px solid var(--border);
border-radius: var(--r-sm);
}
/* ----- Page heros (smaller, for non-home) ----- */
.m-page-hero {
padding: 80px 0 40px;
text-align: center;
}
.m-page-hero .m-eyebrow { display: inline-flex; }
.m-page-hero h1 {
font-family: var(--font-heading);
font-size: clamp(40px, 5vw, 72px);
line-height: 1.05;
letter-spacing: -0.025em;
font-weight: 700;
margin: 0 0 20px;
text-wrap: balance;
}
.m-page-hero p {
font-size: 19px;
color: var(--text-muted);
max-width: 64ch;
margin: 0 auto 32px;
line-height: 1.55;
}
/* ----- Article card (resources) ----- */
.m-article-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.m-article {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-xl);
overflow: hidden;
display: flex; flex-direction: column;
transition: all var(--dur) var(--ease);
}
.m-article:hover {
border-color: var(--border-strong);
transform: translateY(-2px);
}
.m-article-image {
height: 180px;
background: var(--bg-muted);
position: relative;
overflow: hidden;
}
.m-article-image .pattern {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: var(--primary);
}
.m-article-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.m-article-meta {
display: flex; gap: 12px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-subtle);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 12px;
}
.m-article-meta .tag {
color: var(--primary);
}
.m-article h3 {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.3;
margin: 0 0 8px;
color: var(--text);
}
.m-article p {
font-size: 14px;
color: var(--text-muted);
margin: 0 0 16px;
flex: 1;
}
.m-article-read {
font-size: 13px;
font-weight: 600;
color: var(--primary);
}
/* ----- Customer / case study card ----- */
.m-case-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.m-case {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-xl);
padding: 32px;
display: flex; flex-direction: column;
gap: 18px;
transition: all var(--dur) var(--ease);
}
.m-case:hover { border-color: var(--border-strong); }
.m-case-logo {
font-family: var(--font-heading);
font-weight: 700;
font-size: 24px;
color: var(--text);
letter-spacing: -0.02em;
display: flex; align-items: center; gap: 8px;
}
.m-case-logo .dot {
width: 10px; height: 10px;
background: var(--primary);
border-radius: 50%;
}
.m-case-results {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--border);
border-radius: var(--r-md);
overflow: hidden;
border: 1px solid var(--border);
}
.m-case-result {
background: var(--bg-subtle);
padding: 14px;
text-align: center;
}
.m-case-result .val {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 500;
color: var(--primary);
letter-spacing: -0.015em;
}
.m-case-result .lbl {
font-size: 11px;
color: var(--text-subtle);
margin-top: 2px;
}
.m-case h3 {
font-family: var(--font-heading);
font-size: 22px;
line-height: 1.25;
letter-spacing: -0.015em;
font-weight: 600;
margin: 0;
}
.m-case p {
font-size: 14px;
color: var(--text-muted);
margin: 0;
flex: 1;
}
/* ----- Solutions tabs / role nav ----- */
.m-roles {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 48px;
padding: 6px;
background: var(--bg-subtle);
border: 1px solid var(--border);
border-radius: var(--r-lg);
}
.m-roles button {
border: 0;
background: transparent;
padding: 12px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--text-muted);
cursor: pointer;
border-radius: var(--r-md);
transition: all var(--dur) var(--ease);
text-align: left;
}
.m-roles button:hover { background: var(--bg-muted); color: var(--text); }
.m-roles button.active {
background: var(--surface);
color: var(--text);
box-shadow: var(--shadow-sm);
}
.m-roles button .role-name { display: block; font-weight: 600; }
.m-roles button .role-desc { display: block; font-size: 12px; color: var(--text-subtle); margin-top: 2px; }
.m-roles button.active .role-desc { color: var(--text-muted); }
/* ----- Form (demo page) ----- */
.m-form-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-xl);
padding: 40px;
}
.m-form-row {
display: grid; grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.m-form-row.full { grid-template-columns: 1fr; }
/* ----- Animated dot pattern (logo motif) ----- */
.dot-grid {
display: grid;
gap: 6px;
width: 100%;
height: 100%;
}
.dot-grid .dot-cell {
width: 8px; height: 8px;
background: var(--primary);
border-radius: 1px;
opacity: 0;
animation: dotIn 1.4s var(--ease) forwards;
}
@keyframes dotIn {
0% { opacity: 0; transform: scale(0.5); }
60% { opacity: var(--dot-opacity, 0.4); transform: scale(1.05); }
100% { opacity: var(--dot-opacity, 0.4); transform: scale(1); }
}
/* Hero dot field — full-bleed behind hero copy */
.hero-dot-field {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(40, 1fr);
grid-template-rows: repeat(16, 1fr);
gap: 16px;
padding: 32px;
pointer-events: none;
z-index: 0;
opacity: 0.3;
}
.hero-dot-field span {
width: 4px; height: 4px;
background: var(--primary);
border-radius: 1px;
}
/* ----- FAQ list (pricing page) ----- */
.m-faq { display: flex; flex-direction: column; gap: 12px; max-width: 800px; margin: 0 auto; }
.m-faq-item {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 20px 24px;
}
.m-faq-item summary {
cursor: pointer;
list-style: none;
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-sans);
font-size: 16px;
font-weight: 600;
color: var(--text);
}
.m-faq-item summary::-webkit-details-marker { display: none; }
.m-faq-item summary::after {
content: '+';
font-family: var(--font-mono);
font-size: 22px;
color: var(--primary);
font-weight: 300;
line-height: 1;
}
.m-faq-item[open] summary::after { content: '–'; }
.m-faq-item p {
margin: 14px 0 0;
font-size: 14.5px;
line-height: 1.6;
color: var(--text-muted);
}
/* ----- Reveal on scroll ----- */
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in {
opacity: 1;
transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 0.08s; }
.reveal.delay-2 { transition-delay: 0.16s; }
.reveal.delay-3 { transition-delay: 0.24s; }
.reveal.delay-4 { transition-delay: 0.32s; }
/* ----- Misc utilities ----- */
.m-bg-subtle { background: var(--bg-subtle); }
.m-bg-inset { background: var(--bg-inset); }
.m-divider { height: 1px; background: var(--border); margin: 0; }
/* ----- Responsive ----- */
@media (max-width: 980px) {
.m-hero-grid, .m-showcase, .m-showcase.reverse { grid-template-columns: 1fr; }
.m-showcase.reverse .m-showcase-copy { order: 0; }
.m-feature-grid { grid-template-columns: 1fr; }
.m-stats { grid-template-columns: repeat(2, 1fr); }
.m-pricing-grid { grid-template-columns: 1fr; }
.m-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.m-article-grid, .m-case-grid { grid-template-columns: 1fr; }
.m-roles { grid-template-columns: 1fr 1fr; }
.m-nav { display: none; }
.m-section { padding: 72px 0; }
.m-cta-band, .m-quote { padding: 40px 28px; }
.m-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.m-hero-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
.m-hero-ctas { flex-direction: column; }
.m-hero-ctas .m-btn { width: 100%; }
}