/* =============================================================
insured.io — landing page styles
Design tokens live at the top. Override there to retheme.
============================================================= */
:root {
/* ---------- color ---------- */
--color-bg: #ffffff;
--color-bg-soft: #f5f7fb;
--color-bg-softer: #eef2f9;
--color-bg-dark: #0b1e3f; /* deep navy */
--color-bg-darker: #07142b; /* near-black navy */
--color-bg-feature: #0b1e3f;
--color-footer: #171717;
--color-text: #0a1628;
--color-text-muted: #5a6b7e;
--color-text-subtle: #8a98ab;
--color-text-on-dark: #ffffff;
--color-text-on-dark-muted: #a8b8cc;
--color-primary: #1e5bff; /* vibrant blue */
--color-primary-hover: #154ae0;
--color-accent: #ff7a59; /* warm coral */
--color-accent-2: #2ec4b6; /* teal */
--color-accent-yellow: #ffd166;
--color-border: #e5e9f0;
--color-border-strong: #d2d8e3;
--color-border-dark: rgba(255,255,255,0.10);
--gradient-hero: linear-gradient(135deg, #ff7a59 0%, #ff6b9d 35%, #6a5cff 70%, #1e5bff 100%);
--gradient-soft: linear-gradient(180deg, #fff7f3 0%, #f3f5ff 100%);
--gradient-dark: linear-gradient(160deg, #0b1e3f 0%, #07142b 100%);
/* ---------- type ---------- */
--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--fs-xs: 0.8125rem;
--fs-sm: 0.9375rem;
--fs-base: 1rem;
--fs-md: 1.125rem;
--fs-lg: 1.25rem;
--fs-xl: 1.5rem;
--fs-2xl: 2rem;
--fs-3xl: 2.5rem;
--fs-4xl: 3.25rem;
--fs-5xl: 4.25rem;
--lh-tight: 1.1;
--lh-snug: 1.25;
--lh-base: 1.55;
/* ---------- spacing ---------- */
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-5: 1.25rem;
--sp-6: 1.5rem;
--sp-8: 2rem;
--sp-10: 2.5rem;
--sp-12: 3rem;
--sp-16: 4rem;
--sp-20: 5rem;
--sp-24: 6rem;
/* ---------- radii / shadow ---------- */
--radius-sm: 8px;
--radius: 14px;
--radius-lg: 22px;
--radius-xl: 32px;
--shadow-sm: 0 1px 2px rgba(10,22,40,0.06), 0 2px 6px rgba(10,22,40,0.04);
--shadow: 0 6px 16px rgba(10,22,40,0.08), 0 2px 4px rgba(10,22,40,0.05);
--shadow-lg: 0 24px 60px rgba(10,22,40,0.18), 0 6px 16px rgba(10,22,40,0.08);
/* ---------- layout ---------- */
--container-max: 1200px;
--container-pad: 1.25rem;
--header-h: 72px;
--t-fast: 140ms ease;
--t-base: 220ms ease;
}
/* =============================================================
Discotron — synthwave palette override.
Apply with to swap accents,
gradients, and dark module surfaces to a magenta/cyan/violet
neon vibe. The page background stays white intentionally —
this is a "neon accents on a light page" treatment, not a
full dark mode.
============================================================= */
.theme-discotron {
/* accents */
--color-primary: #00d4ff; /* electric cyan */
--color-primary-hover: #00b0d8;
--color-accent: #ff2bd6; /* hot magenta */
--color-accent-2: #b855ff; /* electric purple */
--color-accent-yellow: #ffd166;
/* dark module surfaces — deep purple instead of navy */
--color-bg-dark: #1a0838;
--color-bg-darker: #0d0420;
--color-bg-feature: #1a0838;
--color-footer: #0d0420;
--color-text-on-dark-muted: #c5a8e0;
/* gradients */
--gradient-hero: linear-gradient(135deg, #ff2bd6 0%, #b855ff 35%, #6b4dff 70%, #00d4ff 100%);
--gradient-soft: linear-gradient(180deg, #fff3fb 0%, #f0f4ff 100%);
--gradient-dark: linear-gradient(160deg, #1a0838 0%, #0d0420 100%);
/* shadows tinted purple instead of navy */
--shadow-sm: 0 1px 2px rgba(26,8,56,0.08), 0 2px 6px rgba(26,8,56,0.05);
--shadow: 0 6px 16px rgba(26,8,56,0.10), 0 2px 4px rgba(26,8,56,0.06);
--shadow-lg: 0 24px 60px rgba(26,8,56,0.22), 0 6px 16px rgba(26,8,56,0.10);
}
/* hero radial-gradient overrides — magenta + cyan glows */
.theme-discotron .hero {
background:
radial-gradient(1200px 600px at 90% -10%, rgba(255,43,214,0.22), transparent 60%),
radial-gradient(900px 600px at -10% 10%, rgba(0,212,255,0.18), transparent 60%),
var(--color-bg);
}
.theme-discotron .about-hero,
.theme-discotron .news-hero,
.theme-discotron .ai-hero,
.theme-discotron .contact-hero {
background:
radial-gradient(1100px 520px at 90% -10%, rgba(255,43,214,0.22), transparent 60%),
radial-gradient(900px 520px at -10% 10%, rgba(0,212,255,0.18), transparent 60%),
var(--color-bg);
}
/* AI band internal glow */
/* small chips & tags — recolor to cyan / magenta / violet */
.theme-discotron .eyebrow {
color: var(--color-primary);
background: rgba(0,212,255,0.10);
}
.theme-discotron .eyebrow-dark,
.theme-discotron .ai-tag,
.theme-discotron .ai-product-tag {
color: var(--color-accent);
background: rgba(255,43,214,0.16);
}
.theme-discotron .news-tag {
color: var(--color-primary);
background: rgba(0,212,255,0.12);
}
.theme-discotron .resource-tag-case { color: var(--color-primary); background: rgba(0,212,255,0.12); }
.theme-discotron .resource-tag-research { color: var(--color-primary); background: rgba(0,212,255,0.12); }
.theme-discotron .resource-tag-ebook { color: var(--color-accent); background: rgba(255,43,214,0.16); }
.theme-discotron .resource-tag-insights { color: var(--color-accent-2); background: rgba(184,85,255,0.16); }
/* support band shield */
.theme-discotron .support-icon {
background: rgba(255,43,214,0.18);
color: var(--color-accent);
}
/* outcome stat numbers, ai cap icon backdrop, etc — already use vars */
/* portfolio gradient marks (still SVG fallback in place) */
.theme-discotron .portfolio-mark-shield { background: linear-gradient(135deg, #00d4ff, #b855ff); }
.theme-discotron .portfolio-mark-backpack { background: linear-gradient(135deg, #ff2bd6, #b855ff); }
/* book cover treatment uses --gradient-hero — auto */
/* ai-cap icon tile recolor (was primary-blue tinted) */
.theme-discotron .ai-cap-icon {
background: rgba(0,212,255,0.12);
color: var(--color-primary);
}
/* form field focus ring */
.theme-discotron .field input:focus,
.theme-discotron .field select:focus,
.theme-discotron .field textarea:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(0,212,255,0.25);
}
/* nav-item hover background */
.theme-discotron .nav-item > a:hover {
color: var(--color-primary);
background: rgba(0,212,255,0.08);
}
/* dropdown feature card hover link */
.theme-discotron .dd-feature-card:hover .dd-feature-link {
color: var(--color-primary);
}
/* feature-card learn-more arrow color (was accent already) — auto via var */
/* =============================================================
Discotron-2 — synthwave palette with the missing blue.
Adds an electric blue-violet brand color between cyan and
purple, plus tinted soft backgrounds (blue + lavender) so
alternating sections feel cohesive without going pink.
Apply via .
============================================================= */
.theme-discotron-2 {
/* core ramp — blue is now the primary, cyan demoted to accent-2 */
--color-primary: #5a4cea; /* electric blue-violet */
--color-primary-hover: #4636d8;
--color-accent: #ff2bd6; /* hot magenta */
--color-accent-2: #00d4ff; /* electric cyan */
--color-accent-yellow: #ffd166;
/* page surfaces — body picks up a barely-there cool tint */
--color-bg: #ffffff;
--color-bg-soft: #eef1fc; /* soft electric-blue wash */
--color-bg-softer: #f3edfa; /* soft lavender wash */
/* dark module surfaces — same deep purple as discotron */
--color-bg-dark: #1a0838;
--color-bg-darker: #0d0420;
--color-bg-feature: #1a0838;
--color-footer: #0d0420;
--color-text-on-dark-muted: #c5a8e0;
/* 4-color gradient: magenta → purple → blue → cyan */
--gradient-hero: linear-gradient(135deg, #ff2bd6 0%, #b855ff 28%, #5a4cea 62%, #00d4ff 100%);
--gradient-soft: linear-gradient(180deg, #eef1fc 0%, #f3edfa 100%);
--gradient-dark: linear-gradient(160deg, #1a0838 0%, #0d0420 100%);
/* shadows tinted blue-purple */
--shadow-sm: 0 1px 2px rgba(26,8,56,0.08), 0 2px 6px rgba(26,8,56,0.05);
--shadow: 0 6px 16px rgba(26,8,56,0.10), 0 2px 4px rgba(26,8,56,0.06);
--shadow-lg: 0 24px 60px rgba(26,8,56,0.22), 0 6px 16px rgba(26,8,56,0.10);
}
/* page body picks up the cool tint so white sections "lift" off it */
body.theme-discotron-2 { background: #fafbfe; }
/* hero radial-gradient overrides — magenta + electric-blue glows */
.theme-discotron-2 .hero {
background:
radial-gradient(1200px 600px at 90% -10%, rgba(255,43,214,0.20), transparent 60%),
radial-gradient(900px 600px at -10% 10%, rgba(90,76,234,0.22), transparent 60%),
var(--color-bg);
}
.theme-discotron-2 .about-hero,
.theme-discotron-2 .news-hero,
.theme-discotron-2 .ai-hero,
.theme-discotron-2 .contact-hero,
.theme-discotron-2 .product-hero {
background:
radial-gradient(1100px 520px at 90% -10%, rgba(255,43,214,0.20), transparent 60%),
radial-gradient(900px 520px at -10% 10%, rgba(90,76,234,0.22), transparent 60%),
var(--color-bg);
}
/* alternating tinted sections — Semrush-style variety */
.theme-discotron-2 .stats { background: var(--color-bg-soft); }
.theme-discotron-2 .news { background: var(--color-bg-softer); }
.theme-discotron-2 .release-notes-section { background: var(--color-bg-soft); }
.theme-discotron-2 .resources-list-section { background: var(--color-bg-soft); }
/* small chips & tags — recolor to blue / magenta / cyan */
.theme-discotron-2 .eyebrow {
color: var(--color-primary);
background: rgba(90,76,234,0.10);
}
.theme-discotron-2 .eyebrow-dark,
.theme-discotron-2 .ai-tag,
.theme-discotron-2 .ai-product-tag,
.theme-discotron-2 .product-hero-tag {
color: var(--color-accent);
background: rgba(255,43,214,0.16);
}
.theme-discotron-2 .news-tag {
color: var(--color-primary);
background: rgba(90,76,234,0.10);
}
.theme-discotron-2 .resource-tag-case { color: var(--color-primary); background: transparent; }
.theme-discotron-2 .resource-tag-research { color: var(--color-accent-2); background: transparent; }
.theme-discotron-2 .resource-tag-ebook { color: var(--color-accent); background: transparent; }
.theme-discotron-2 .resource-tag-insights { color: #b855ff; background: transparent; }
/* support shield, ai-cap tile, focus ring, nav hover */
.theme-discotron-2 .support-icon {
background: rgba(255,43,214,0.18);
color: var(--color-accent);
}
.theme-discotron-2 .ai-cap-icon,
.theme-discotron-2 .product-feature-icon {
background: rgba(90,76,234,0.12);
color: var(--color-primary);
}
.theme-discotron-2 .field input:focus,
.theme-discotron-2 .field select:focus,
.theme-discotron-2 .field textarea:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(90,76,234,0.22);
}
.theme-discotron-2 .nav-item > a:hover {
color: var(--color-primary);
background: rgba(90,76,234,0.08);
}
.theme-discotron-2 .dd-feature-card:hover .dd-feature-link {
color: var(--color-primary);
}
/* portfolio mark gradients — refresh with the new ramp */
.theme-discotron-2 .portfolio-mark-shield { background: linear-gradient(135deg, #5a4cea, #00d4ff); }
.theme-discotron-2 .portfolio-mark-backpack { background: linear-gradient(135deg, #ff2bd6, #5a4cea); }
/* =============================================================
base
============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: var(--lh-base);
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-primary); }
h1, h2, h3, h4 {
font-weight: 700;
line-height: var(--lh-tight);
letter-spacing: -0.02em;
margin: 0 0 var(--sp-4) 0;
color: var(--color-text);
}
h1 { font-size: clamp(2.25rem, 5vw + 0.5rem, var(--fs-5xl)); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.75rem, 3vw + 0.5rem, var(--fs-3xl)); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-md); }
p { margin: 0 0 var(--sp-4) 0; color: var(--color-text-muted); }
ul { padding: 0; margin: 0; list-style: none; }
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--color-primary); color: #fff;
padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); z-index: 999; }
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding-left: var(--container-pad);
padding-right: var(--container-pad);
}
.section { padding: var(--sp-24) 0; }
@media (max-width: 768px) { .section { padding: var(--sp-16) 0; } }
.section-head {
max-width: 760px;
margin: 0 auto var(--sp-12) auto;
text-align: center;
}
.section-head p {
font-size: var(--fs-md);
color: var(--color-text-muted);
}
.section-head-light h2 { color: var(--color-text-on-dark); }
.section-head-light p { color: var(--color-text-on-dark-muted); }
.eyebrow {
display: inline-block;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0;
color: var(--color-primary);
background: rgba(30,91,255,0.08);
padding: 6px 12px;
border-radius: 999px;
margin-bottom: var(--sp-5);
}
.eyebrow-dark {
color: var(--color-accent);
background: rgba(255,122,89,0.14);
}
.grad-text {
background: var(--gradient-hero);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* =============================================================
buttons
============================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
font-family: inherit;
font-weight: 600;
font-size: var(--fs-sm);
line-height: 1;
padding: 0.75rem 1.15rem;
border-radius: 999px;
border: 1px solid transparent;
cursor: pointer;
transition: transform var(--t-fast), background var(--t-base), color var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
background: var(--color-text);
color: #fff;
}
.btn-primary:hover { background: #1a2a45; color: #fff; }
.btn-outline {
background: transparent;
color: var(--color-text);
border-color: var(--color-border-strong);
}
.btn-outline:hover { border-color: var(--color-text); color: var(--color-text); }
.btn-ghost {
background: transparent;
color: var(--color-text);
}
.btn-ghost:hover { color: var(--color-primary); }
.btn-lg {
padding: 0.95rem 1.5rem;
font-size: var(--fs-base);
}
.btn-block { display: flex; width: 100%; }
/* =============================================================
top banner (event announcement)
============================================================= */
.top-banner {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-3);
padding: 10px var(--sp-5);
background: #b855ff;
color: #fff;
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: -0.01em;
text-align: center;
transition: background var(--t-fast);
}
.top-banner:hover { background: #b855ff; color: #fff; filter: brightness(1.06); }
.top-banner-tag {
display: inline-block;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
background: rgba(255,255,255,0.22);
color: #fff;
padding: 3px 10px;
border-radius: 999px;
}
.top-banner-msg { color: #fff; }
.top-banner-cta {
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 4px;
}
.top-banner-cta span { transition: transform var(--t-fast); }
.top-banner:hover .top-banner-cta span { transform: translateX(3px); }
@media (max-width: 600px) {
.top-banner { font-size: var(--fs-xs); gap: var(--sp-2); padding: 8px var(--sp-3); flex-wrap: wrap; }
}
/* =============================================================
header / nav
============================================================= */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255,255,255,0.85);
backdrop-filter: saturate(150%) blur(12px);
-webkit-backdrop-filter: saturate(150%) blur(12px);
border-bottom: 1px solid var(--color-border);
}
.nav {
display: flex;
align-items: center;
gap: var(--sp-6);
height: var(--header-h);
}
.brand {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-weight: 800;
font-size: 1.0625rem;
letter-spacing: -0.02em;
color: var(--color-text);
}
.brand:hover { color: var(--color-text); }
.brand-mark { color: var(--color-primary); display: inline-flex; }
.brand-dot { color: var(--color-accent); }
.brand-light { color: #fff; }
.brand-light:hover { color: #fff; }
.brand-light .brand-mark { color: var(--color-accent); }
.nav-links {
margin-left: var(--sp-8);
}
.nav-list {
display: flex;
gap: var(--sp-2);
margin: 0;
padding: 0;
list-style: none;
}
.nav-item { position: relative; }
.nav-item > a {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--color-text);
padding: 10px 12px;
border-radius: 8px;
transition: color var(--t-fast), background var(--t-fast);
}
.nav-item > a:hover { color: var(--color-primary); background: rgba(30,91,255,0.06); }
.nav-caret { transition: transform var(--t-base); opacity: 0.65; }
.has-dropdown:hover > a .nav-caret,
.has-dropdown:focus-within > a .nav-caret { transform: rotate(180deg); opacity: 1; }
/* dropdown panel */
.dropdown {
position: absolute;
top: calc(100% + 12px);
left: 0;
min-width: 280px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: 60;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
pointer-events: none;
}
/* invisible hover bridge so the cursor can cross the gap
between trigger and panel without losing :hover */
.dropdown::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: -14px;
height: 14px;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.dropdown-list {
list-style: none;
margin: 0;
padding: var(--sp-3);
display: flex;
flex-direction: column;
}
.dropdown-list a,
.dropdown-grid a {
display: block;
padding: 12px 14px;
border-radius: 10px;
transition: background var(--t-fast);
color: var(--color-text);
}
.dropdown-list a:hover,
.dropdown-grid a:hover { background: var(--color-bg-soft); color: var(--color-text); }
.dd-title {
display: block;
font-weight: 600;
font-size: var(--fs-sm);
color: var(--color-text);
margin-bottom: 2px;
}
.dd-desc {
display: block;
font-size: var(--fs-xs);
color: var(--color-text-muted);
line-height: 1.4;
}
.dd-tag {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0;
color: var(--color-accent);
background: rgba(255,122,89,0.14);
padding: 3px 8px;
border-radius: 999px;
margin-bottom: 6px;
}
.dd-feature {
background: var(--gradient-soft);
border: 1px solid var(--color-border);
}
.dd-feature:hover { background: var(--gradient-soft); }
.dd-feature .dd-title { color: var(--color-text); }
/* mega dropdown for Platform — featured Insights card + 2x2 menu + AI card */
.dropdown-mega { min-width: 820px; left: -40px; }
.dropdown-mega-inner {
display: grid;
grid-template-columns: 1fr 1.25fr;
gap: var(--sp-3);
padding: var(--sp-3);
}
.dropdown-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
}
/* left featured card (Insights) */
.dd-feature-card {
display: flex;
flex-direction: column;
gap: var(--sp-4);
background: var(--color-bg-soft);
border-radius: var(--radius);
padding: var(--sp-4);
color: var(--color-text);
transition: background var(--t-fast);
}
.dd-feature-card:hover {
background: var(--color-bg-softer);
color: var(--color-text);
}
.dd-feature-image {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
aspect-ratio: 5 / 4;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: var(--sp-3);
}
.dd-feature-image img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.dd-feature-body {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.dd-feature-title {
display: block;
font-size: var(--fs-md);
font-weight: 700;
line-height: 1.2;
color: var(--color-text);
letter-spacing: -0.02em;
}
.dd-feature-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--fs-xs);
font-weight: 600;
color: var(--color-text);
transition: color var(--t-fast);
}
.dd-feature-card:hover .dd-feature-link { color: var(--color-primary); }
/* right column wrapper (2x2 menu + AI card) */
.dropdown-mega-right {
display: flex;
flex-direction: column;
padding-top: var(--sp-3);
}
/* small section title above the 2x2 menu grid */
.dropdown-mega-title {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-subtle);
margin: 0 var(--sp-3) var(--sp-3);
padding: 0 0 var(--sp-3);
border-bottom: 1px solid var(--color-border);
}
/* simple (non-mega) dropdown: align title underline with mega pattern */
.dropdown > .dropdown-mega-title {
margin: var(--sp-3) calc(var(--sp-3) * 2) 0;
padding-bottom: var(--sp-3);
}
.dropdown > .dropdown-mega-title + .dropdown-list {
padding-top: 0;
}
/* AI feature card (gradient) — pinned to bottom of right column */
.dd-feature-ai {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
background: var(--gradient-soft);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: var(--sp-4) var(--sp-5);
margin-top: auto;
color: var(--color-text);
transition: border-color var(--t-fast);
}
.dd-feature-ai:hover {
background: var(--gradient-soft);
color: var(--color-text);
border-color: var(--color-border-strong);
}
.dd-feature-ai-body { display: flex; flex-direction: column; gap: 4px; }
.dd-feature-ai .dd-title { font-size: var(--fs-md); }
.dd-feature-ai-arrow {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text);
transition: transform var(--t-fast);
flex-shrink: 0;
}
.dd-feature-ai:hover .dd-feature-ai-arrow { transform: translateX(3px); }
/* Resources mega — book card pinned to bottom of right column (mirrors Platform's AI card) */
.dd-feature-book {
display: flex;
align-items: center;
gap: var(--sp-4);
background: var(--gradient-soft);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: var(--sp-3) var(--sp-5);
margin-top: auto;
color: var(--color-text);
transition: border-color var(--t-fast);
}
.dd-feature-book:hover {
background: var(--gradient-soft);
color: var(--color-text);
border-color: var(--color-border-strong);
}
.dd-feature-book-cover {
width: 44px;
height: auto;
aspect-ratio: 5 / 8;
object-fit: cover;
border-radius: 3px;
box-shadow: 0 4px 12px rgba(0,0,0,0.18);
flex-shrink: 0;
}
.dd-feature-book-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.dd-feature-book .dd-title { font-size: var(--fs-md); }
.dd-feature-book:hover .dd-feature-ai-arrow { transform: translateX(3px); }
/* mobile menu groupings */
.m-group {
border-bottom: 1px solid var(--color-border);
}
.m-group > summary {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--sp-3) 0;
font-weight: 500;
cursor: pointer;
}
.m-group > summary::-webkit-details-marker { display: none; }
.m-group > summary svg { transition: transform var(--t-base); opacity: 0.6; }
.m-group[open] > summary svg { transform: rotate(180deg); opacity: 1; }
.m-sub {
display: flex;
flex-direction: column;
padding: 2px 0 var(--sp-3) var(--sp-4);
}
.m-sub a {
padding: var(--sp-2) 0;
font-size: var(--fs-sm);
color: var(--color-text-muted);
border-bottom: 0;
}
.m-sub a:hover { color: var(--color-primary); }
.nav-cta {
margin-left: auto;
display: flex;
gap: var(--sp-2);
align-items: center;
}
.nav-toggle {
display: none;
margin-left: auto;
background: none;
border: 0;
width: 40px; height: 40px;
cursor: pointer;
flex-direction: column;
align-items: center; justify-content: center;
gap: 5px;
}
.nav-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--color-text);
border-radius: 2px;
transition: transform var(--t-base), opacity var(--t-base);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
display: none;
flex-direction: column;
gap: var(--sp-3);
padding: var(--sp-4) var(--container-pad) var(--sp-6);
background: #fff;
border-bottom: 1px solid var(--color-border);
max-height: calc(100vh - var(--header-h));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-shadow: var(--shadow);
}
.mobile-menu a {
padding: var(--sp-3) 0;
border-bottom: 1px solid var(--color-border);
font-weight: 500;
font-size: var(--fs-md);
}
.mobile-menu a.btn { border-bottom: 0; padding: 0.85rem 1.25rem; }
.mobile-menu .btn-block + .btn-block { margin-top: var(--sp-2); }
@media (max-width: 960px) {
.nav-links, .nav-cta { display: none; }
.nav-toggle { display: flex; }
.mobile-menu { display: flex; }
.mobile-menu[hidden] { display: none; }
}
/* prevent body scroll when mobile menu is open */
body.menu-open { overflow: hidden; }
/* =============================================================
hero
============================================================= */
.hero {
position: relative;
padding: clamp(3rem, 8vw, 6rem) 0 clamp(3.5rem, 8vw, 6.5rem);
background:
radial-gradient(1200px 600px at 90% -10%, rgba(255,122,89,0.18), transparent 60%),
radial-gradient(900px 600px at -10% 10%, rgba(30,91,255,0.14), transparent 60%),
var(--color-bg);
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--sp-12);
align-items: center;
}
/* ----- centered hero variant ----- */
.hero-center {
padding-top: clamp(3.5rem, 8vw, 6rem);
padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
}
.hero-copy-center {
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.hero-copy-center .lede {
margin-left: auto;
margin-right: auto;
}
.hero-ctas-center {
justify-content: center;
margin-bottom: var(--sp-12);
}
.hero-visual-center {
position: relative;
max-width: 980px;
margin: 0 auto;
min-height: 0;
}
.hero-visual-center .device-stack {
aspect-ratio: 16 / 10;
}
.hero-image {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.hero-meta-center {
justify-content: center;
text-align: center;
border-top: 1px solid var(--color-border);
padding-top: var(--sp-8);
margin: var(--sp-16) auto 0;
max-width: 720px;
}
@media (max-width: 720px) {
.hero-visual-center .device-stack { aspect-ratio: 5 / 4; }
.hero-meta-center { gap: var(--sp-5); margin-top: var(--sp-10); padding-top: var(--sp-6); }
}
.hero-copy h1 {
margin-bottom: var(--sp-6);
}
.lede {
font-size: var(--fs-md);
color: var(--color-text-muted);
max-width: 36em;
margin-bottom: var(--sp-8);
}
.hero-ctas {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
margin-bottom: var(--sp-10);
}
.hero-meta {
display: flex;
flex-wrap: wrap;
gap: var(--sp-8);
padding-top: var(--sp-6);
border-top: 1px solid var(--color-border);
font-size: var(--fs-sm);
color: var(--color-text-muted);
}
.hero-meta strong {
display: block;
font-size: var(--fs-lg);
color: var(--color-text);
letter-spacing: -0.02em;
}
/* hero visual: stylized device stack */
.hero-visual { position: relative; min-height: 420px; }
.device-stack {
position: relative;
width: 100%;
aspect-ratio: 5 / 4;
}
.device {
position: absolute;
background: #fff;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-border);
overflow: hidden;
}
.device-desktop {
inset: 0;
}
.device-bar {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: #f5f7fb;
border-bottom: 1px solid var(--color-border);
}
.device-bar > span {
width: 10px; height: 10px; border-radius: 50%;
background: #d2d8e3;
}
.device-bar > span:nth-child(1) { background: #ff7a59; }
.device-bar > span:nth-child(2) { background: #ffd166; }
.device-bar > span:nth-child(3) { background: #2ec4b6; }
.device-url {
margin-left: auto;
font-size: 12px;
color: var(--color-text-subtle);
background: #fff;
border: 1px solid var(--color-border);
border-radius: 999px;
padding: 3px 10px;
}
.device-screen { padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--color-bg-soft); height: calc(100% - 41px); }
.screen-row { display: flex; gap: 12px; }
.screen-card {
flex: 1;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 14px;
font-size: 13px;
}
.screen-card-wide { flex: 1; }
.screen-card-pill {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px; font-size: 12.5px;
color: var(--color-text-muted);
}
.screen-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-subtle);
margin-bottom: 4px;
}
.screen-value {
font-weight: 700;
font-size: 18px;
color: var(--color-text);
letter-spacing: -0.02em;
}
.screen-value span { font-weight: 500; color: var(--color-text-subtle); font-size: 12px; }
.screen-bar {
margin-top: 10px;
height: 6px;
background: var(--color-bg-softer);
border-radius: 999px;
overflow: hidden;
}
.screen-bar > span {
display: block;
height: 100%;
background: var(--color-primary);
border-radius: 999px;
}
.screen-pill {
display: inline-block;
margin-top: 8px;
font-size: 11px;
background: rgba(46,196,182,0.12);
color: #15877c;
padding: 3px 8px;
border-radius: 999px;
font-weight: 600;
}
.screen-steps {
display: flex; gap: 6px; flex-wrap: wrap;
margin-top: 8px; font-size: 11px;
}
.screen-steps span {
padding: 4px 9px;
background: var(--color-bg-softer);
color: var(--color-text-subtle);
border-radius: 999px;
font-weight: 600;
}
.screen-steps .done { background: rgba(46,196,182,0.15); color: #15877c; }
.screen-steps .active { background: rgba(30,91,255,0.12); color: var(--color-primary); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-green { background: var(--color-accent-2); }
.dot-blue { background: var(--color-primary); }
.device-phone {
width: 36%;
aspect-ratio: 9 / 18;
bottom: 0;
right: 0;
border-radius: 28px;
border: 8px solid #0a1628;
background: #fff;
box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,0.05);
padding: 12px;
}
.phone-notch {
width: 38%;
height: 14px;
background: #0a1628;
border-radius: 0 0 10px 10px;
margin: -12px auto 10px;
}
.phone-screen { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.phone-greeting {
font-weight: 700;
font-size: 16px;
letter-spacing: -0.01em;
margin-bottom: 4px;
}
.phone-tile {
display: flex; justify-content: space-between; align-items: center;
background: var(--color-text);
color: #fff;
border-radius: var(--radius);
padding: 12px 14px;
font-size: 13px;
font-weight: 600;
}
.phone-tile-soft {
background: var(--color-bg-softer);
color: var(--color-text);
}
@media (max-width: 960px) {
.hero-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
.hero-visual { min-height: 360px; }
}
@media (max-width: 520px) {
.hero-visual { display: none; }
}
/* =============================================================
platform feature grid
============================================================= */
.platform { background: var(--color-bg); }
.feature-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-5);
}
.feature-card {
display: flex;
flex-direction: column;
background: var(--color-bg-feature);
color: var(--color-text-on-dark);
border-radius: var(--radius-lg);
overflow: hidden;
position: relative;
transition: transform var(--t-base), box-shadow var(--t-base);
}
.feature-card:hover {
transform: translateY(-3px);
color: var(--color-text-on-dark);
box-shadow: var(--shadow-lg);
}
.feature-card:hover .link-arrow span { transform: translateX(3px); }
/* tilted grid accent in the bottom-right corner */
.feature-card::after {
content: '';
position: absolute;
bottom: -189px;
right: -120px;
width: 570px;
height: 337px;
background: url('img/bg/grid-1.png') center / cover no-repeat;
transform: rotate(-21deg);
pointer-events: none;
opacity: 0.22;
z-index: 0;
}
.feature-body { position: relative; z-index: 1; }
.feature-card-wide .feature-art { z-index: 1; }
/* wide / featured card spans both columns */
.feature-card-wide {
grid-column: 1 / -1;
flex-direction: row;
align-items: stretch;
}
.feature-card-wide .feature-body {
flex: 1 1 auto;
padding: var(--sp-10) var(--sp-12);
}
.feature-card-wide .feature-body h3 {
font-size: clamp(1.5rem, 2.4vw + 0.5rem, 2rem);
max-width: 18ch;
}
.feature-card-wide .feature-body p {
font-size: var(--fs-md);
max-width: 60ch;
}
.feature-card-wide .feature-art {
flex: 0 0 46%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-8) var(--sp-10) var(--sp-8) 0;
overflow: hidden;
}
.feature-card-wide .feature-art img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
border-radius: var(--radius);
box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
@media (max-width: 880px) {
.feature-card-wide { flex-direction: column; }
.feature-card-wide .feature-body { padding: var(--sp-8); }
.feature-card-wide .feature-art {
flex: none;
padding: 0 var(--sp-8) var(--sp-8);
width: 100%;
}
}
.feature-visual {
position: relative;
padding: var(--sp-8);
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--sp-3);
min-height: 180px;
}
.feature-body {
padding: var(--sp-8);
}
.feature-body h3 {
color: var(--color-text-on-dark);
font-size: var(--fs-xl);
margin-bottom: var(--sp-3);
}
.feature-body p {
color: var(--color-text-on-dark-muted);
font-size: var(--fs-sm);
margin-bottom: var(--sp-5);
}
.feature-eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0;
color: var(--color-accent);
margin-bottom: var(--sp-3);
}
.feature-body .link-arrow { color: var(--color-accent); }
/* mini visual primitives */
.mini-card {
background: rgba(255,255,255,0.06);
border: 1px solid var(--color-border-dark);
border-radius: var(--radius);
padding: 16px;
width: 80%;
display: flex; flex-direction: column; gap: 8px;
}
.mini-row {
height: 8px; border-radius: 4px;
background: rgba(255,255,255,0.16);
width: 100%;
}
.mini-row-short { width: 60%; }
.mini-bar {
margin-top: 4px;
height: 8px; border-radius: 4px;
background: rgba(255,255,255,0.10);
overflow: hidden;
}
.mini-bar > span {
display: block; height: 100%; width: 65%;
background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
}
.mini-cta {
align-self: flex-start;
margin-top: 6px;
padding: 6px 12px;
border-radius: 999px;
background: var(--color-accent);
color: #fff;
font-size: 12px;
font-weight: 700;
}
/* IVR wave */
.wave { display: flex; align-items: center; gap: 4px; height: 60px; }
.wave span {
display: block;
width: 6px;
border-radius: 3px;
background: linear-gradient(180deg, var(--color-accent), var(--color-primary));
}
.wave span:nth-child(1) { height: 20%; }
.wave span:nth-child(2) { height: 60%; }
.wave span:nth-child(3) { height: 90%; }
.wave span:nth-child(4) { height: 45%; }
.wave span:nth-child(5) { height: 75%; }
.wave span:nth-child(6) { height: 30%; }
.wave span:nth-child(7) { height: 95%; }
.wave span:nth-child(8) { height: 55%; }
.wave span:nth-child(9) { height: 70%; }
.wave span:nth-child(10) { height: 35%; }
/* SMS bubbles */
.bubble {
font-size: 13px;
padding: 10px 14px;
border-radius: 16px;
max-width: 80%;
font-weight: 500;
}
.bubble-them {
background: rgba(255,255,255,0.10);
color: var(--color-text-on-dark);
border-bottom-left-radius: 4px;
align-self: flex-start;
}
.bubble-you {
background: var(--color-accent);
color: #fff;
border-bottom-right-radius: 4px;
align-self: flex-end;
font-weight: 700;
}
/* claim track */
.claim-track {
display: flex; gap: 8px; align-items: center;
margin-bottom: 12px;
}
.claim-track .step {
flex: 1;
height: 8px;
border-radius: 999px;
background: rgba(255,255,255,0.12);
}
.claim-track .step.done { background: var(--color-accent-2); }
.claim-track .step.active {
background: linear-gradient(90deg, var(--color-accent-2), rgba(255,255,255,0.12));
}
/* AI virtual agent badge + bubble */
.ai-badge {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: rgba(30,91,255,0.16);
color: var(--color-primary);
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0;
}
.bubble-ai {
background: linear-gradient(135deg, var(--color-primary), #6a5cff);
color: #fff;
border-bottom-left-radius: 4px;
align-self: flex-start;
font-weight: 500;
box-shadow: 0 8px 24px rgba(30,91,255,0.25);
}
/* analytics bars */
.bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; }
.bars span {
flex: 1;
border-radius: 6px 6px 2px 2px;
background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-primary) 100%);
opacity: 0.95;
}
/* link arrow */
.link-arrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
font-size: var(--fs-sm);
color: var(--color-primary);
}
.link-arrow span { transition: transform var(--t-base); }
.link-arrow:hover span { transform: translateX(3px); }
.link-arrow-light { color: var(--color-accent); }
@media (max-width: 880px) {
.feature-grid { grid-template-columns: 1fr; }
}
/* =============================================================
AI band
============================================================= */
.ai-band {
position: relative;
overflow: hidden;
background: var(--color-bg);
}
.ai-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-5);
position: relative;
max-width: 920px;
margin: 0 auto;
}
/* AI cards match the dark feature-card style, keep 2-col grid width */
.ai-card {
background: var(--color-bg-feature);
border-radius: var(--radius-lg);
padding: var(--sp-8);
display: flex;
flex-direction: column;
color: var(--color-text-on-dark);
position: relative;
overflow: hidden;
transition: transform var(--t-base), box-shadow var(--t-base);
}
.ai-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
color: var(--color-text-on-dark);
}
.ai-card::after {
content: '';
position: absolute;
bottom: -189px;
right: -120px;
width: 570px;
height: 337px;
background: url('img/bg/grid-1.png') center / cover no-repeat;
transform: rotate(-21deg);
pointer-events: none;
opacity: 0.22;
z-index: 0;
}
.ai-card > * { position: relative; z-index: 1; }
.ai-card .link-arrow {
margin-top: auto;
color: var(--color-accent);
}
.ai-card:hover .link-arrow span { transform: translateX(3px); }
.ai-card h3 { color: var(--color-text-on-dark); font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
.ai-card p { color: var(--color-text-on-dark-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-5); flex: 1; }
.ai-tag {
display: inline-block;
align-self: flex-start;
font-size: 12px;
font-weight: 700;
letter-spacing: 0;
color: var(--color-accent);
background: rgba(255,122,89,0.14);
padding: 4px 10px;
border-radius: 999px;
margin-bottom: var(--sp-5);
}
@media (max-width: 560px) { .ai-grid { grid-template-columns: 1fr; } }
/* =============================================================
stats
============================================================= */
.stats { background: var(--color-bg); }
.stats-box { padding: var(--sp-12) 0; }
.stats-lede {
text-align: center;
color: var(--color-text);
margin-bottom: var(--sp-12);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-10) var(--sp-12);
max-width: 880px;
margin: 0 auto;
}
.stat {
text-align: center;
padding: 0;
background: none;
border: none;
opacity: 0.22;
transform: translateY(8px);
transition: opacity 600ms ease, transform 600ms ease;
}
.stat.is-active {
opacity: 1;
transform: translateY(0);
}
.stat-num {
font-size: clamp(3.5rem, 8vw, 6.5rem);
font-weight: 800;
letter-spacing: -0.05em;
background: var(--gradient-hero);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: var(--sp-3);
line-height: 1;
}
.stat-label {
font-size: var(--fs-sm);
color: var(--color-text-muted);
font-weight: 600;
letter-spacing: 0.02em;
}
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; gap: var(--sp-8); } }
@media (prefers-reduced-motion: reduce) {
.stat { opacity: 1; transform: none; transition: none; }
}
/* =============================================================
outcomes (logos + metric cards)
============================================================= */
.outcomes { background: var(--color-bg); padding-bottom: var(--sp-10); }
/* top split: heading/CTA on left, customer logos on right */
.outcomes-head {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--sp-12);
align-items: center;
margin-bottom: var(--sp-12);
}
.outcomes-copy h2 {
font-size: clamp(1.875rem, 3vw + 0.5rem, var(--fs-3xl));
margin-bottom: var(--sp-4);
}
.outcomes-copy p {
font-size: var(--fs-md);
color: var(--color-text-muted);
margin-bottom: var(--sp-6);
max-width: 36ch;
}
.outcomes-logos {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-4);
}
.logo-cell {
display: flex;
align-items: center;
justify-content: center;
height: 88px;
padding: var(--sp-4) var(--sp-6);
}
.logo-cell img {
max-height: 40px;
max-width: 100%;
width: auto;
height: auto;
object-fit: contain;
}
/* bottom row: photo-style outcome cards */
.outcome-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-5);
}
.outcome-photo-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
aspect-ratio: 1 / 1;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-bg-feature);
color: var(--color-text-on-dark);
padding: var(--sp-6);
transition: transform var(--t-base), box-shadow var(--t-base);
}
.outcome-photo-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
color: var(--color-text-on-dark);
}
.outcome-photo-card-bg {
position: absolute;
inset: 0;
z-index: 1;
background: var(--gradient-hero);
opacity: 0.55;
transition: opacity var(--t-base), transform var(--t-base);
}
.outcome-photo-card-1 .outcome-photo-card-bg { background-position: 0 0; }
.outcome-photo-card-2 .outcome-photo-card-bg { background-position: 50% 50%; transform: rotate(180deg); }
.outcome-photo-card-3 .outcome-photo-card-bg { background-position: 100% 100%; transform: scaleX(-1); }
.outcome-photo-card::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%);
pointer-events: none;
}
.outcome-photo-card:hover .outcome-photo-card-bg { opacity: 0.7; }
.outcome-photo-card-body {
position: relative;
z-index: 2;
max-width: 28ch;
}
.outcome-photo-num {
font-size: clamp(3.5rem, 8vw, 6rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 0.95;
margin-bottom: var(--sp-3);
color: #fff;
}
.outcome-photo-card p {
font-size: var(--fs-sm);
color: rgba(255,255,255,0.85);
margin: 0;
line-height: 1.4;
}
.outcome-photo-arrow {
position: absolute;
bottom: var(--sp-5);
right: var(--sp-5);
z-index: 2;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.25);
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
transition: background var(--t-base), transform var(--t-base);
}
.outcome-photo-card:hover .outcome-photo-arrow {
background: var(--color-accent);
border-color: var(--color-accent);
transform: translateX(3px);
}
@media (max-width: 960px) {
.outcomes-head { grid-template-columns: 1fr; gap: var(--sp-8); }
.outcomes-copy p { max-width: none; }
}
@media (max-width: 720px) {
.outcome-cards { grid-template-columns: 1fr; }
.outcome-photo-card { aspect-ratio: 16 / 10; }
}
/* =============================================================
testimonial
============================================================= */
.quote-section {
background: var(--color-bg);
padding: 0 0 var(--sp-24);
}
@media (max-width: 768px) {
.outcomes { padding-bottom: var(--sp-8); }
.quote-section { padding: 0 0 var(--sp-16); }
}
/* Boxed dark testimonial card with single right-arrow nav */
.quote-card {
position: relative;
width: 100%;
background: #151515;
color: var(--color-text-on-dark);
border-radius: var(--radius-lg);
padding: var(--sp-12) var(--sp-12) var(--sp-10);
overflow: hidden;
}
@media (max-width: 720px) {
.quote-card { padding: var(--sp-8) var(--sp-6); }
}
.quote-card .quote-viewport { overflow: hidden; }
.quote-card .quote-track {
display: flex;
transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}
.quote-card .quote-slide {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.quote-card .quote { text-align: left; }
.quote-card blockquote {
position: relative;
font-size: clamp(1.0625rem, 1.2vw + 0.5rem, 1.375rem);
line-height: 1.55;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--color-text-on-dark);
max-width: 64ch;
margin: 0 0 var(--sp-8);
}
.quote-card .quote-mark {
display: inline-block;
font-family: Georgia, serif;
font-size: 3.5rem;
line-height: 0;
color: var(--color-accent);
vertical-align: -0.32em;
margin-right: 6px;
font-weight: 700;
}
.quote-card figcaption {
display: flex;
align-items: center;
gap: var(--sp-3);
text-align: left;
}
.quote-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--gradient-hero);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.8125rem;
letter-spacing: 0;
flex-shrink: 0;
box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
.quote-cite {
display: flex;
flex-direction: column;
min-width: 0;
}
.quote-cite strong {
display: block;
color: var(--color-text-on-dark);
font-weight: 700;
font-size: var(--fs-md);
margin-bottom: 2px;
}
.quote-cite > span {
font-size: var(--fs-sm);
color: rgba(255,255,255,0.55);
}
/* single arrow positioned in the bottom-right of the card */
.quote-card .quote-arrow {
position: absolute;
bottom: var(--sp-6);
right: var(--sp-6);
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.18);
color: #fff;
cursor: pointer;
z-index: 2;
transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.quote-card .quote-arrow:hover {
background: var(--color-accent);
border-color: var(--color-accent);
transform: translateY(-1px);
}
.quote-card .quote-arrow:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.quote-card .quote-track { transition: none; }
}
/* =============================================================
trust / security
============================================================= */
.trust {
background: var(--color-bg-feature);
color: var(--color-text-on-dark);
padding: var(--sp-24) 0;
margin-top: var(--sp-24);
}
@media (max-width: 768px) {
.trust { margin-top: var(--sp-16); }
}
.trust-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-12);
align-items: center;
padding: var(--sp-8) 0;
}
.trust-copy h2 { color: #fff; margin-bottom: var(--sp-4); }
.trust-copy p { color: var(--color-text-on-dark-muted); font-size: var(--fs-md); margin-bottom: var(--sp-6); }
.trust-badges {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
align-items: center;
}
.trust-badges li {
display: flex;
justify-content: center;
}
.trust-badges a {
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform var(--t-base), opacity var(--t-base);
}
.trust-badges a:hover {
transform: translateY(-2px);
opacity: 0.9;
}
.trust-badges img {
height: 160px;
width: auto;
max-width: 100%;
object-fit: contain;
}
@media (max-width: 600px) {
.trust-badges { gap: var(--sp-2); }
.trust-badges img { height: 80px; }
}
@media (max-width: 880px) {
.trust-inner { grid-template-columns: 1fr; gap: var(--sp-8); }
}
/* =============================================================
solutions (lines of business)
============================================================= */
.solutions { background: var(--color-bg); }
.lob-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-5);
}
.lob-card {
display: flex;
flex-direction: column;
background: var(--color-bg-soft);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--sp-8);
color: var(--color-text);
transition: transform var(--t-base), border-color var(--t-base), background var(--t-base);
}
.lob-card:hover {
background: #fff;
border-color: var(--color-text);
transform: translateY(-3px);
color: var(--color-text);
}
.lob-icon {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
border-radius: 12px;
background: #fff;
color: var(--color-primary);
border: 1px solid var(--color-border);
margin-bottom: var(--sp-5);
}
.lob-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.lob-card p { font-size: var(--fs-sm); flex: 1; margin-bottom: var(--sp-5); }
.lob-card .link-arrow { color: var(--color-primary); }
@media (max-width: 1024px) { .lob-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .lob-grid { grid-template-columns: 1fr; } }
/* =============================================================
FAQ
============================================================= */
.faq { background: var(--color-bg); border-top: 1px solid var(--color-border); }
.faq-grid {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: var(--sp-12);
align-items: start;
}
.faq-head h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.faq-head p { color: var(--color-text-muted); }
.faq-head a { color: var(--color-primary); font-weight: 600; }
.faq-list details {
border-top: 1px solid var(--color-border);
padding: var(--sp-5) 0;
}
.faq-list details:last-child { border-bottom: 1px solid var(--color-border); }
.faq-list summary {
list-style: none;
font-weight: 600;
font-size: var(--fs-md);
color: var(--color-text);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--sp-4);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
content: '+';
font-weight: 400;
font-size: 1.5rem;
line-height: 1;
color: var(--color-text-subtle);
transition: transform var(--t-base);
}
.faq-list details[open] summary::after { content: '–'; }
.faq-list p {
margin: var(--sp-3) 0 0;
color: var(--color-text-muted);
max-width: 60ch;
}
@media (max-width: 880px) {
.faq-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}
/* =============================================================
news
============================================================= */
.news { background: var(--color-bg); }
.news-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
text-align: left;
max-width: none;
margin: 0 0 var(--sp-12) 0;
gap: var(--sp-4);
flex-wrap: wrap;
}
.news-head h2 { margin: var(--sp-2) 0 0; }
.news-head .eyebrow { margin-bottom: 0; }
.news-all { white-space: nowrap; padding-bottom: 4px; }
.news-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-5);
}
.news-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
color: var(--color-text);
transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.news-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow);
border-color: var(--color-border-strong);
color: var(--color-text);
}
/* placeholder cover image — swap with ![]()
later */
.news-card-image {
aspect-ratio: 4 / 3;
background: var(--gradient-soft);
border-bottom: 1px solid var(--color-border);
position: relative;
overflow: hidden;
}
.news-card-image::after {
content: '';
position: absolute;
inset: 0;
background: var(--gradient-hero);
opacity: 0.18;
}
.news-card-image-2::after { transform: scaleX(-1); opacity: 0.22; }
.news-card-image-3::after { transform: rotate(180deg); opacity: 0.20; }
.news-card-image-4::after { transform: scaleY(-1); opacity: 0.24; }
.news-card-image-5::after { transform: rotate(90deg); opacity: 0.18; }
.news-card-image-6::after { transform: rotate(-90deg); opacity: 0.22; }
.news-card-image-7::after { transform: rotate(45deg); opacity: 0.20; }
.news-card-image-8::after { transform: rotate(-45deg) scaleX(-1); opacity: 0.22; }
.news-card-image-9::after { transform: rotate(135deg); opacity: 0.18; }
.news-card-image img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
}
.news-card-body {
display: flex;
flex-direction: column;
flex: 1;
padding: var(--sp-6);
}
.news-card-meta {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
font-size: var(--fs-xs);
}
.news-tag {
font-weight: 700;
letter-spacing: 0;
color: var(--color-primary);
background: rgba(30,91,255,0.10);
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
}
.news-card-meta time {
color: var(--color-text-subtle);
font-weight: 500;
}
.news-card h3 {
font-size: var(--fs-md);
line-height: 1.3;
margin-bottom: var(--sp-3);
}
.news-card p {
font-size: var(--fs-sm);
margin-bottom: var(--sp-5);
flex: 1;
}
.news-link {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--color-primary);
display: inline-flex;
align-items: center;
gap: 6px;
}
.news-link span { transition: transform var(--t-base); }
.news-card:hover .news-link span { transform: translateX(3px); }
@media (max-width: 1024px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .news-grid { grid-template-columns: 1fr; } }
/* =============================================================
CTA strip
============================================================= */
.cta-strip {
padding: var(--sp-16) 0;
background: var(--color-bg-dark);
color: #fff;
}
/* =============================================================
videos
============================================================= */
.videos { background: var(--color-bg); }
.video-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-6);
max-width: 980px;
margin: 0 auto;
}
.video-grid .video-card {
flex: 1 1 320px;
max-width: 720px;
}
.video-card {
appearance: none;
background: none;
border: 0;
padding: 0;
text-align: left;
cursor: pointer;
font: inherit;
color: inherit;
display: flex;
flex-direction: column;
gap: var(--sp-4);
transition: transform var(--t-base);
}
.video-card:hover { transform: translateY(-3px); }
.video-card:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 4px;
border-radius: var(--radius-lg);
}
.video-thumb {
position: relative;
display: block;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 16 / 9;
background: var(--color-bg-softer);
box-shadow: var(--shadow);
}
.video-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--t-base);
}
.video-card:hover .video-thumb img { transform: scale(1.03); }
.video-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: linear-gradient(180deg, transparent 50%, rgba(10,22,40,0.45));
}
.video-play svg {
width: 64px;
height: 64px;
padding: 16px;
background: rgba(255,255,255,0.18);
border: 2px solid #fff;
border-radius: 50%;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.video-card:hover .video-play svg {
background: var(--color-accent);
border-color: var(--color-accent);
transform: scale(1.06);
}
.video-meta {
display: flex;
flex-direction: column;
gap: 4px;
padding: 0 var(--sp-2);
}
.video-tag {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-primary);
}
.video-title {
font-size: var(--fs-lg);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-text);
}
/* video lightbox modal */
.video-modal {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-5);
background: rgba(7, 20, 43, 0.88);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.video-modal[hidden] { display: none; }
.video-modal-frame {
position: relative;
width: 100%;
max-width: 1080px;
}
.video-modal-iframe-wrap {
position: relative;
aspect-ratio: 16 / 9;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 30px 80px rgba(0,0,0,0.5);
background: #000;
}
.video-modal-iframe-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.video-modal-title {
margin: var(--sp-4) 0 0;
color: #fff;
font-size: var(--fs-md);
font-weight: 600;
text-align: center;
}
.video-modal-close {
position: absolute;
top: var(--sp-5);
right: var(--sp-5);
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.12);
color: #fff;
border: 0;
border-radius: 50%;
cursor: pointer;
transition: background var(--t-base), transform var(--t-base);
}
.video-modal-close:hover {
background: rgba(255,255,255,0.22);
transform: scale(1.05);
}
.video-modal-close:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
/* lock body scroll while video lightbox is open */
body.video-open { overflow: hidden; }
/* =============================================================
Calendly modal (events page)
============================================================= */
.calendly-modal {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-5);
background: rgba(7, 20, 43, 0.88);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.calendly-modal[hidden] { display: none; }
.calendly-modal-frame {
position: relative;
width: 100%;
max-width: 1000px;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 30px 80px rgba(0,0,0,0.5);
background: #000;
}
.calendly-modal-frame .calendly-inline-widget {
display: block;
}
.calendly-modal-close {
position: absolute;
top: var(--sp-5);
right: var(--sp-5);
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.12);
color: #fff;
border: 0;
border-radius: 50%;
cursor: pointer;
z-index: 101;
transition: background var(--t-base), transform var(--t-base);
}
.calendly-modal-close:hover {
background: rgba(255,255,255,0.22);
transform: scale(1.05);
}
.calendly-modal-close:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
@media (max-width: 600px) {
.calendly-modal { padding: 0; }
.calendly-modal-frame { border-radius: 0; max-height: 100vh; }
}
.cta-strip h2 { color: #fff; margin-bottom: var(--sp-2); }
.cta-strip p { color: var(--color-text-on-dark-muted); margin: 0; }
.cta-strip-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-8);
}
.cta-strip-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.cta-strip .btn-primary {
background: var(--color-accent);
color: #fff;
}
.cta-strip .btn-primary:hover { background: #f96944; color: #fff; }
.cta-strip .btn-outline {
border-color: rgba(255,255,255,0.3);
color: #fff;
}
.cta-strip .btn-outline:hover { border-color: #fff; color: #fff; }
@media (max-width: 720px) {
.cta-strip-inner { flex-direction: column; align-items: flex-start; }
}
/* =============================================================
footer
============================================================= */
.site-footer {
background: var(--color-footer);
color: var(--color-text-on-dark);
padding: var(--sp-20) 0 var(--sp-8);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--sp-10);
margin-bottom: var(--sp-16);
}
.footer-brand p {
margin-top: var(--sp-4);
color: var(--color-text-on-dark-muted);
max-width: 28ch;
font-size: var(--fs-sm);
}
.footer-col h4 {
font-size: var(--fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-accent);
margin-bottom: var(--sp-4);
}
.footer-col a {
display: block;
color: var(--color-text-on-dark-muted);
font-size: var(--fs-sm);
padding: 6px 0;
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-4);
padding-top: var(--sp-6);
border-top: 1px solid var(--color-border-dark);
font-size: var(--fs-xs);
color: var(--color-text-on-dark-muted);
}
.footer-legal { display: flex; gap: var(--sp-5); }
.footer-legal a:hover { color: #fff; }
/* legal / privacy page */
.legal-page { background: #fff; }
.legal-container { max-width: 760px; }
.legal-head { margin-bottom: var(--sp-10); }
.legal-head h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 var(--sp-3); }
.legal-effective { color: var(--color-text-muted); margin: 0; font-size: var(--fs-sm); }
.legal-container h2 {
font-size: var(--fs-xl);
margin: var(--sp-10) 0 var(--sp-4);
letter-spacing: -0.01em;
}
.legal-container h3 {
font-size: var(--fs-md);
font-weight: 700;
margin: var(--sp-6) 0 var(--sp-2);
}
.legal-container p { color: var(--color-text); line-height: 1.65; margin: 0 0 var(--sp-4); }
.legal-container ul, .legal-container ol { color: var(--color-text); line-height: 1.65; margin: 0 0 var(--sp-4); padding-left: 1.5rem; }
.legal-container li { margin-bottom: var(--sp-2); }
.legal-container a { color: var(--color-primary); text-decoration: underline; }
@media (max-width: 880px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}
/* =============================================================
about page
============================================================= */
.about-hero {
position: relative;
padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 6vw, 5rem);
background:
radial-gradient(1100px 520px at 85% -10%, rgba(255,122,89,0.18), transparent 60%),
radial-gradient(900px 520px at -10% 10%, rgba(30,91,255,0.12), transparent 60%),
var(--color-bg);
overflow: hidden;
}
.about-hero-copy {
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.about-hero-copy .lede {
margin: 0 auto var(--sp-8);
max-width: 60ch;
}
.about-hero-meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-10);
padding-top: var(--sp-8);
border-top: 1px solid var(--color-border);
margin: var(--sp-4) auto 0;
max-width: 760px;
font-size: var(--fs-sm);
color: var(--color-text-muted);
}
.about-hero-meta li {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
}
.about-hero-meta strong {
font-size: var(--fs-xl);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--color-text);
background: var(--gradient-hero);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@media (max-width: 600px) {
.about-hero-meta { gap: var(--sp-6); }
}
/* ----- team grid ----- */
.team-section { background: var(--color-bg); }
.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
}
.team-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--sp-8);
transition: transform var(--t-base), background var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.team-card:hover {
background: var(--color-bg-soft);
border-color: var(--color-border-strong);
transform: translateY(-3px);
box-shadow: var(--shadow);
}
.team-avatar {
width: 100%;
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-3);
background: #f1f3f5;
border: 1px dashed #c8ced4;
border-radius: var(--radius);
color: #8a949c;
margin-bottom: var(--sp-5);
}
.team-avatar span {
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.team-avatar svg { opacity: 0.55; }
.team-card h3 {
font-size: var(--fs-lg);
margin-bottom: 4px;
}
.team-role {
display: block;
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: var(--sp-4);
}
.team-card p {
font-size: var(--fs-sm);
margin: 0;
}
.team-social {
display: flex;
gap: var(--sp-2);
margin: 0;
padding: 0;
list-style: none;
}
.team-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--color-border);
color: var(--color-text-muted);
transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.team-social a:hover {
background: var(--color-text);
border-color: var(--color-text);
color: #fff;
transform: translateY(-1px);
}
@media (max-width: 960px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }
/* ----- portfolio ----- */
.portfolio-section { background: var(--color-bg); }
.portfolio-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-6);
max-width: 980px;
margin: 0 auto;
}
.portfolio-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--sp-8);
color: var(--color-text);
box-shadow: var(--shadow);
transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.portfolio-card:hover {
transform: translateY(-3px);
border-color: var(--color-border-strong);
box-shadow: var(--shadow-lg);
color: var(--color-text);
}
.portfolio-mark {
width: 56px; height: 56px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
margin-bottom: var(--sp-5);
color: #fff;
}
.portfolio-mark-shield { background: linear-gradient(135deg, #2ec4b6, #1e5bff); }
.portfolio-mark-backpack { background: linear-gradient(135deg, #ff7a59, #ff6b9d); }
.portfolio-logo {
height: 72px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--sp-5);
}
.portfolio-logo img {
max-height: 64px;
max-width: 60%;
width: auto;
height: auto;
object-fit: contain;
}
.portfolio-card p {
font-size: var(--fs-sm);
margin: 0;
}
@media (max-width: 720px) { .portfolio-grid { grid-template-columns: 1fr; } }
/* ----- partners ----- */
.partners-section { background: var(--color-bg); }
.partner-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-5);
}
.partner-card {
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-6) var(--sp-8);
min-height: 140px;
transition: transform var(--t-base);
}
.partner-card:hover {
transform: translateY(-2px);
}
.partner-name {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
width: 100%;
}
.partner-name img {
max-height: 56px;
max-width: 80%;
width: auto;
height: auto;
object-fit: contain;
}
.partner-name-text {
font-size: var(--fs-xl);
font-weight: 700;
color: var(--color-text-subtle);
letter-spacing: -0.01em;
transition: color var(--t-base);
}
.partner-card:hover .partner-name-text {
color: var(--color-text);
}
@media (max-width: 880px) { .partner-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .partner-grid { grid-template-columns: 1fr; } }
/* anchor offset so sticky header doesn't cover anchored section headings */
#team, #portfolio, #partners { scroll-margin-top: calc(var(--header-h) + 12px); }
/* =============================================================
contact page
============================================================= */
.contact-hero {
position: relative;
padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 7vw, 5.5rem);
background:
radial-gradient(1100px 520px at 90% -10%, rgba(255,122,89,0.18), transparent 60%),
radial-gradient(900px 520px at -10% 10%, rgba(30,91,255,0.12), transparent 60%),
var(--color-bg);
overflow: hidden;
}
.contact-grid {
display: grid;
grid-template-columns: 1.25fr 1fr;
gap: var(--sp-12);
align-items: start;
}
.contact-copy h1 { margin-bottom: var(--sp-6); }
.contact-copy .lede { margin-bottom: var(--sp-10); }
.contact-bullets {
display: flex;
flex-direction: column;
gap: var(--sp-6);
margin: 0;
padding: 0;
}
.contact-bullets li {
display: grid;
grid-template-columns: 44px 1fr;
gap: var(--sp-5);
align-items: start;
padding: var(--sp-5) 0;
border-top: 1px solid var(--color-border);
}
.contact-bullets li:last-child {
border-bottom: 1px solid var(--color-border);
}
.contact-bullet-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--gradient-hero);
color: #fff;
font-weight: 800;
font-size: var(--fs-sm);
letter-spacing: -0.01em;
box-shadow: 0 6px 18px rgba(30,91,255,0.18);
}
.contact-bullets h3 {
font-size: var(--fs-md);
margin-bottom: 4px;
}
.contact-bullets p {
font-size: var(--fs-sm);
margin: 0;
}
/* contact card (right column) */
.contact-card {
position: sticky;
top: calc(var(--header-h) + var(--sp-6));
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
padding: var(--sp-8);
}
.contact-card h2 {
font-size: var(--fs-xl);
margin-bottom: var(--sp-3);
}
.contact-card > p {
font-size: var(--fs-sm);
margin-bottom: var(--sp-6);
}
.contact-details {
list-style: none;
margin: var(--sp-6) 0 0;
padding: var(--sp-6) 0 0;
border-top: 1px solid var(--color-border);
display: flex;
flex-direction: column;
gap: var(--sp-5);
}
.contact-details li {
display: flex;
flex-direction: column;
gap: 6px;
}
.contact-detail-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-subtle);
}
.contact-details a { color: var(--color-text); font-weight: 500; }
.contact-details a:hover { color: var(--color-primary); }
.contact-details address {
font-style: normal;
font-size: var(--fs-sm);
color: var(--color-text);
line-height: 1.5;
}
.contact-details .link-arrow {
font-size: var(--fs-xs);
color: var(--color-primary);
}
.contact-social {
display: flex;
gap: var(--sp-2);
flex-wrap: wrap;
}
.contact-social a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
background: var(--color-bg-soft);
border: 1px solid var(--color-border);
font-size: var(--fs-sm);
font-weight: 500;
color: var(--color-text);
transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.contact-social a:hover {
background: #fff;
border-color: var(--color-text);
color: var(--color-primary);
}
@media (max-width: 960px) {
.contact-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
.contact-card { position: static; }
}
/* contact form */
.contact-form {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-3);
}
.field label {
font-size: var(--fs-xs);
font-weight: 600;
color: var(--color-text);
letter-spacing: 0;
}
.field-optional {
color: var(--color-text-subtle);
font-weight: 500;
margin-left: 4px;
}
.field input,
.field select,
.field textarea {
font-family: inherit;
font-size: var(--fs-sm);
color: var(--color-text);
background: #fff;
border: 1px solid var(--color-border-strong);
border-radius: 10px;
padding: 10px 12px;
width: 100%;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
-webkit-appearance: none;
appearance: none;
}
.field textarea {
resize: vertical;
min-height: 96px;
line-height: 1.45;
}
.field select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 10px;
padding-right: 32px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(30,91,255,0.15);
}
.field input:invalid:not(:placeholder-shown),
.field select:invalid:not(:focus):not([value=""]) {
border-color: rgba(255,122,89,0.6);
}
.contact-form .btn {
margin-top: var(--sp-2);
}
.form-fineprint {
font-size: var(--fs-xs);
color: var(--color-text-subtle);
margin: 0;
text-align: center;
}
.form-error {
font-size: var(--fs-sm);
color: #b91c1c;
background: rgba(185, 28, 28, 0.08);
border: 1px solid rgba(185, 28, 28, 0.25);
border-radius: var(--radius);
padding: var(--sp-3) var(--sp-4);
margin: var(--sp-3) 0 0;
text-align: center;
}
.form-error a { color: inherit; text-decoration: underline; }
/* honeypot — hidden from sighted users and AT, visible to bots */
.hp-field {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
@media (max-width: 480px) {
.field-row { grid-template-columns: 1fr; }
}
/* form success state */
.form-success {
text-align: center;
padding: var(--sp-4) 0;
}
.form-success-icon {
width: 56px; height: 56px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(46,196,182,0.16);
color: #15877c;
margin: 0 auto var(--sp-5);
}
.form-success h3 {
font-size: var(--fs-lg);
margin-bottom: var(--sp-3);
}
.form-success p {
font-size: var(--fs-sm);
margin: 0;
}
.form-success a { color: var(--color-primary); font-weight: 600; }
/* contact details strip (below the hero/form) */
.contact-details-strip {
list-style: none;
margin: var(--sp-12) 0 0;
padding: var(--sp-8) var(--sp-8);
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-8);
box-shadow: var(--shadow-sm);
}
.contact-details-strip li {
display: flex;
flex-direction: column;
gap: 6px;
}
.contact-details-strip a { color: var(--color-text); font-weight: 500; }
.contact-details-strip a:hover { color: var(--color-primary); }
.contact-details-strip address {
font-style: normal;
font-size: var(--fs-sm);
color: var(--color-text);
line-height: 1.5;
}
.contact-details-strip .link-arrow {
font-size: var(--fs-xs);
color: var(--color-primary);
}
@media (max-width: 880px) {
.contact-details-strip {
grid-template-columns: 1fr;
gap: var(--sp-6);
padding: var(--sp-6);
}
}
/* support band */
.support-band {
background: var(--color-bg-feature);
color: var(--color-text-on-dark);
}
.support-inner {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--sp-8);
align-items: center;
}
.support-icon {
width: 64px; height: 64px;
border-radius: 18px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,122,89,0.16);
color: var(--color-accent);
flex-shrink: 0;
}
.support-copy h2 {
color: #fff;
margin: var(--sp-2) 0 var(--sp-3);
font-size: clamp(1.5rem, 2.4vw + 0.5rem, 2rem);
}
.support-copy p {
color: var(--color-text-on-dark-muted);
margin: 0;
max-width: 56ch;
}
.support-copy .eyebrow {
color: var(--color-accent);
background: rgba(255,122,89,0.14);
margin-bottom: 0;
}
.support-actions {
display: flex;
flex-direction: column;
gap: var(--sp-3);
align-items: stretch;
flex-shrink: 0;
}
.support-band .btn-primary {
background: var(--color-accent);
color: #fff;
}
.support-band .btn-primary:hover {
background: var(--color-accent);
color: #fff;
filter: brightness(1.08);
}
.support-band .btn-outline {
border-color: rgba(255,255,255,0.25);
color: #fff;
}
.support-band .btn-outline:hover {
border-color: #fff;
color: #fff;
}
@media (max-width: 880px) {
.support-inner { grid-template-columns: 1fr; gap: var(--sp-5); text-align: left; }
.support-actions { flex-direction: row; flex-wrap: wrap; }
}
/* =============================================================
news & press page
============================================================= */
.news-hero {
position: relative;
padding: clamp(3rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3rem);
background:
radial-gradient(1100px 520px at 90% -10%, rgba(255,122,89,0.18), transparent 60%),
radial-gradient(900px 520px at -10% 10%, rgba(30,91,255,0.12), transparent 60%),
var(--color-bg);
overflow: hidden;
text-align: center;
}
.news-hero h1 { margin-bottom: var(--sp-4); }
.news-hero .lede {
margin: 0 auto var(--sp-8);
max-width: 56ch;
}
.news-filter {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-2);
margin: 0;
padding: 0;
list-style: none;
}
.news-filter-pill {
appearance: none;
background: #fff;
border: 1px solid var(--color-border);
color: var(--color-text);
font-family: inherit;
font-size: var(--fs-sm);
font-weight: 500;
padding: 8px 16px;
border-radius: 999px;
cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.news-filter-pill:hover {
border-color: var(--color-text);
}
.news-filter-pill.is-active {
background: var(--color-text);
border-color: var(--color-text);
color: #fff;
}
.news-page { background: var(--color-bg); }
.news-featured {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--sp-8);
align-items: stretch;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
color: var(--color-text);
margin-bottom: var(--sp-12);
transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.news-featured:hover {
transform: translateY(-3px);
border-color: var(--color-border-strong);
box-shadow: var(--shadow-lg);
color: var(--color-text);
}
.news-featured-image {
min-height: 300px;
background: var(--gradient-hero);
}
.news-featured-image-1 {
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 50%),
var(--gradient-hero);
}
.news-featured-body {
padding: var(--sp-10) var(--sp-10);
display: flex;
flex-direction: column;
justify-content: center;
}
.news-featured-body h2 {
font-size: clamp(1.5rem, 2.4vw + 0.5rem, 2rem);
margin-bottom: var(--sp-4);
}
.news-featured-body p {
font-size: var(--fs-md);
margin-bottom: var(--sp-5);
}
.news-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.news-more {
text-align: center;
margin: var(--sp-10) 0 0;
}
@media (max-width: 960px) {
.news-featured { grid-template-columns: 1fr; }
.news-featured-image { min-height: 200px; }
.news-featured-body { padding: var(--sp-8); }
.news-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.news-grid-3 { grid-template-columns: 1fr; }
}
/* =============================================================
case studies & research page
============================================================= */
.section-head-left {
text-align: left;
margin: 0 0 var(--sp-8);
max-width: none;
}
.section-head-left .eyebrow { margin-bottom: var(--sp-3); }
.resources-list-section { background: var(--color-bg); }
.resources-list {
display: flex;
flex-direction: column;
gap: var(--sp-4);
max-width: 880px;
margin: 0 auto;
}
.resource-row {
display: grid;
grid-template-columns: 110px 1fr;
gap: var(--sp-6);
align-items: stretch;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--sp-5);
color: var(--color-text);
transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.resource-row:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
border-color: var(--color-border-strong);
color: var(--color-text);
}
.resource-thumb {
aspect-ratio: 5 / 7;
border-radius: var(--radius);
background: var(--gradient-soft);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-subtle);
overflow: hidden;
}
.resource-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.resource-row-body {
display: flex;
flex-direction: column;
gap: 6px;
justify-content: center;
}
.resource-row-body h3 {
font-size: var(--fs-lg);
line-height: 1.3;
margin: 0;
}
.resource-row-body p {
font-size: var(--fs-sm);
margin: 0;
color: var(--color-text-muted);
}
.resource-row-body .resource-card-meta {
margin-bottom: 0;
}
.resource-row-body .news-link {
margin-top: var(--sp-2);
}
.resource-card-meta {
display: flex;
align-items: center;
gap: var(--sp-3);
font-size: var(--fs-xs);
}
.resource-tag {
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0;
background: transparent;
font-size: 11px;
}
.resource-tag-case { color: var(--color-primary); background: transparent; }
.resource-tag-research { color: var(--color-accent-2); background: transparent; }
.resource-tag-ebook { color: var(--color-accent); background: transparent; }
.resource-tag-insights { color: #b855ff; background: transparent; }
.resource-format {
color: var(--color-text-subtle);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 11px;
}
@media (max-width: 600px) {
.resource-row {
grid-template-columns: 80px 1fr;
gap: var(--sp-4);
padding: var(--sp-4);
}
}
/* UX Survival Guide section */
.guide-section {
background: var(--color-bg);
border-top: 1px solid var(--color-border);
}
.guide-inner {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: var(--sp-12);
align-items: center;
}
.guide-cover {
display: flex;
justify-content: center;
}
.guide-book {
width: 280px;
aspect-ratio: 5 / 8;
padding: 32px 28px;
background: var(--gradient-hero);
color: #fff;
border-radius: 4px 14px 14px 4px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow:
inset 6px 0 0 rgba(0,0,0,0.18),
0 30px 60px rgba(10,22,40,0.28),
0 10px 20px rgba(10,22,40,0.15);
transform: rotate(-2deg);
transition: transform var(--t-base);
}
.guide-book:hover {
transform: rotate(0deg) translateY(-4px);
}
.guide-book-img {
padding: 0;
background: none;
display: block;
height: auto;
object-fit: cover;
}
.guide-book-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.85;
}
.guide-book-title {
font-size: clamp(1.5rem, 2.4vw + 0.5rem, 1.875rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.02em;
}
.guide-book-author {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.85;
}
.guide-copy h2 { margin-bottom: var(--sp-2); }
.guide-subtitle {
font-size: var(--fs-md);
color: var(--color-text);
font-weight: 600;
margin-bottom: var(--sp-6);
}
.guide-copy p {
font-size: var(--fs-sm);
margin-bottom: var(--sp-4);
}
.guide-tagline {
font-style: italic;
color: var(--color-text);
margin-bottom: var(--sp-6) !important;
}
@media (max-width: 880px) {
.guide-inner { grid-template-columns: 1fr; gap: var(--sp-8); }
.guide-book { width: 220px; }
}
#survival-guide { scroll-margin-top: calc(var(--header-h) + 12px); }
/* =============================================================
release notes (new.html / what's new)
============================================================= */
.release-notes-section { background: var(--color-bg); }
.release-list {
list-style: none;
margin: 0;
padding: 0;
max-width: 820px;
margin: 0 auto;
}
.release-item {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--sp-8) var(--sp-10);
margin-bottom: var(--sp-5);
}
.release-item:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
.release-item { padding: var(--sp-6) var(--sp-6); }
}
.release-meta {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
}
.release-version {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0;
color: var(--color-primary);
background: rgba(30,91,255,0.08);
padding: 4px 10px;
border-radius: 6px;
}
.release-meta time {
font-size: var(--fs-xs);
font-weight: 500;
color: var(--color-text-subtle);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.release-item h2 {
font-size: clamp(1.25rem, 1.6vw + 0.5rem, 1.625rem);
margin-bottom: var(--sp-3);
}
.release-item > p {
font-size: var(--fs-md);
margin-bottom: var(--sp-5);
}
.release-loading,
.news-loading {
list-style: none;
text-align: center;
color: var(--color-text-muted);
padding: var(--sp-8) 0;
font-size: var(--fs-sm);
}
/* ===========================================================================
Single post page (rendered by /functions/resources/[slug].js)
=========================================================================== */
.post { background: var(--color-bg); padding: var(--sp-16) 0 var(--sp-20); }
.post-container { max-width: 760px; }
@media (max-width: 768px) {
.post { padding: var(--sp-12) 0 var(--sp-16); }
}
.post-back {
display: inline-flex;
align-items: center;
font-size: var(--fs-sm);
font-weight: 600;
color: var(--color-text-muted);
text-decoration: none;
margin-bottom: var(--sp-6);
}
.post-back:hover { color: var(--color-primary); }
.post-head { margin-bottom: var(--sp-8); }
.post-head h1 {
font-size: clamp(2rem, 3.5vw + 0.5rem, 3.25rem);
letter-spacing: -0.02em;
line-height: 1.1;
margin: var(--sp-3) 0 var(--sp-5);
}
.post-head .news-card-meta {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-bottom: 0;
}
.post-lede {
font-size: var(--fs-md);
color: var(--color-text-muted);
line-height: 1.55;
margin: 0 0 var(--sp-4);
}
.post-author {
display: inline-block;
font-size: var(--fs-sm);
color: var(--color-text-muted);
}
.post-cover {
margin: 0 0 var(--sp-10);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--color-border);
}
.post-cover img { display: block; width: 100%; height: auto; }
.post-body {
font-size: 1.0625rem;
line-height: 1.7;
color: var(--color-text);
}
.post-body p { margin: 0 0 var(--sp-5); }
.post-body p:last-child { margin-bottom: 0; }
.post-body h2 {
font-size: clamp(1.5rem, 2vw + 0.25rem, 1.875rem);
letter-spacing: -0.01em;
margin: var(--sp-10) 0 var(--sp-4);
}
.post-body h3 {
font-size: var(--fs-xl);
letter-spacing: -0.01em;
margin: var(--sp-8) 0 var(--sp-3);
}
.post-body h4 {
font-size: var(--fs-lg);
margin: var(--sp-6) 0 var(--sp-3);
}
.post-body ul,
.post-body ol {
margin: 0 0 var(--sp-5);
padding-left: var(--sp-6);
}
.post-body li { margin-bottom: var(--sp-2); }
.post-body li::marker { color: var(--color-primary); }
.post-body a {
color: var(--color-primary);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 2px;
}
.post-body a:hover { color: var(--color-accent); }
.post-body strong { font-weight: 700; color: var(--color-text); }
.post-body em { font-style: italic; }
.post-body code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9em;
background: var(--color-bg-soft);
padding: 2px 6px;
border-radius: 6px;
}
.post-body blockquote {
position: relative;
margin: var(--sp-8) 0;
padding: 0 0 0 var(--sp-6);
border-left: 3px solid var(--color-accent);
color: var(--color-text-muted);
font-size: 1.125rem;
font-style: italic;
}
.post-body blockquote p { margin-bottom: var(--sp-2); }
.post-body hr {
border: 0;
border-top: 1px solid var(--color-border);
margin: var(--sp-10) 0;
}
.post-figure {
margin: var(--sp-8) 0;
border-radius: var(--radius);
overflow: hidden;
}
.post-figure img { display: block; width: 100%; height: auto; }
.post-figure figcaption {
font-size: var(--fs-sm);
color: var(--color-text-muted);
text-align: center;
margin-top: var(--sp-3);
}
.release-changes {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.release-changes li {
font-size: var(--fs-sm);
padding-left: var(--sp-5);
position: relative;
color: var(--color-text);
}
.release-changes li::before {
content: '';
position: absolute;
left: 0;
top: 0.6em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-primary);
}
.release-changes strong {
color: var(--color-text);
font-weight: 700;
}
.release-changes .release-cat {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-accent);
background: rgba(255, 43, 214, 0.10);
padding: 2px 8px;
border-radius: 999px;
margin-right: var(--sp-2);
vertical-align: 2px;
}
.release-more {
text-align: center;
margin: var(--sp-12) 0 0;
color: var(--color-text-muted);
font-size: var(--fs-sm);
}
.release-more a { color: var(--color-primary); font-weight: 600; }
/* =============================================================
events page (events.html)
============================================================= */
.events-section { background: var(--color-bg); }
.events-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--sp-6);
max-width: 960px;
margin: 0 auto;
}
.event-row {
display: grid;
grid-template-columns: 200px 1fr;
gap: var(--sp-8);
align-items: center;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--sp-8);
}
.event-thumb {
width: 100%;
height: 200px;
border-radius: var(--radius);
background: var(--gradient-hero);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
overflow: hidden;
position: relative;
}
.event-thumb-itc {
background: linear-gradient(135deg, #6a5cff 0%, #1e5bff 100%);
}
.theme-discotron .event-thumb-itc {
background: linear-gradient(135deg, #b855ff 0%, #00d4ff 100%);
}
.event-thumb-label {
font-weight: 800;
font-size: 1.125rem;
letter-spacing: -0.02em;
text-align: center;
line-height: 1.05;
text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.event-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.event-body {
display: flex;
flex-direction: column;
gap: var(--sp-3);
justify-content: center;
}
.event-date {
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-primary);
}
.event-body h2 {
font-size: clamp(1.25rem, 1.6vw + 0.5rem, 1.625rem);
margin: 0;
}
.event-body > p {
font-size: var(--fs-sm);
margin: 0;
color: var(--color-text-muted);
}
.event-body em { font-style: italic; color: var(--color-text); }
.event-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-5);
margin-top: var(--sp-3);
flex-wrap: wrap;
padding-top: var(--sp-5);
border-top: 1px solid var(--color-border);
}
.event-booth {
display: flex;
flex-direction: column;
gap: 2px;
flex-shrink: 0;
}
.event-booth-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-subtle);
}
.event-booth strong {
font-size: var(--fs-xl);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--color-text);
}
.event-actions {
display: flex;
gap: var(--sp-3);
flex-wrap: wrap;
}
@media (max-width: 720px) {
.event-row {
grid-template-columns: 1fr;
padding: var(--sp-6);
}
.event-thumb { max-width: 200px; }
.event-actions .btn { flex: 1 1 auto; }
}
/* press inquiries band */
.press-inquiries { background: var(--color-bg-soft); border-top: 1px solid var(--color-border); }
.press-inquiries-inner {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--sp-10);
align-items: center;
}
.press-inquiries h2 {
margin: var(--sp-2) 0 var(--sp-3);
font-size: clamp(1.5rem, 2.4vw + 0.5rem, 2rem);
}
.press-inquiries p {
font-size: var(--fs-md);
margin: 0;
max-width: 56ch;
}
.press-inquiries-actions {
display: flex;
flex-direction: column;
gap: var(--sp-3);
align-items: stretch;
}
@media (max-width: 720px) {
.press-inquiries-inner { grid-template-columns: 1fr; gap: var(--sp-6); }
.press-inquiries-actions { flex-direction: row; flex-wrap: wrap; }
}
/* =============================================================
AI page (platform/AI.html)
============================================================= */
.ai-hero {
position: relative;
padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem);
background:
radial-gradient(1100px 520px at 90% -10%, rgba(255,122,89,0.18), transparent 60%),
radial-gradient(900px 520px at -10% 10%, rgba(30,91,255,0.12), transparent 60%),
var(--color-bg);
overflow: hidden;
text-align: center;
}
.ai-hero h1 { margin-bottom: var(--sp-4); max-width: 18ch; margin-left: auto; margin-right: auto; }
.ai-hero .lede { margin: 0 auto var(--sp-8); max-width: 60ch; }
.ai-hero .hero-ctas-center { margin-bottom: var(--sp-12); }
.ai-stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-10);
padding-top: var(--sp-8);
border-top: 1px solid var(--color-border);
margin: var(--sp-4) auto 0;
max-width: 880px;
font-size: var(--fs-sm);
color: var(--color-text-muted);
}
.ai-stats li { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.ai-stats strong {
font-size: var(--fs-xl);
font-weight: 800;
letter-spacing: -0.02em;
background: var(--gradient-hero);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@media (max-width: 600px) {
.ai-stats { gap: var(--sp-6); }
}
/* product sections (Claims AI / Policy AI) */
.ai-product { background: var(--color-bg); }
.ai-product-alt { background: var(--color-bg-soft); border-top: 1px solid var(--color-border); }
.ai-product-head {
text-align: center;
max-width: 760px;
margin: 0 auto var(--sp-12);
}
.ai-product-head .lede { margin: 0 auto; }
.ai-product-tag {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-accent);
background: rgba(255,122,89,0.14);
padding: 6px 14px;
border-radius: 999px;
margin-bottom: var(--sp-5);
}
.ai-product-head h2 {
font-size: clamp(1.75rem, 3vw + 0.5rem, var(--fs-3xl));
margin-bottom: var(--sp-4);
}
/* re-use feature-grid for Claims AI cards */
.ai-feature-grid { margin-bottom: var(--sp-12); }
/* pull quote */
.ai-pull-quote {
position: relative;
max-width: 820px;
margin: var(--sp-10) auto 0;
text-align: left;
padding: var(--sp-10) var(--sp-10) var(--sp-10) calc(var(--sp-10) + var(--sp-6));
background: #151515;
border-radius: var(--radius-lg);
}
.ai-pull-quote::before {
content: '\201C';
position: absolute;
top: var(--sp-5);
left: var(--sp-8);
font-family: Georgia, serif;
font-size: 4rem;
line-height: 1;
color: var(--color-accent);
font-weight: 700;
}
.ai-pull-quote p {
font-size: clamp(1.0625rem, 1.2vw + 0.5rem, 1.375rem);
line-height: 1.55;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--color-text-on-dark);
margin: 0 0 var(--sp-6);
max-width: 64ch;
}
.ai-pull-quote cite {
font-size: var(--fs-sm);
color: var(--color-text-on-dark-muted);
font-style: normal;
font-weight: 600;
}
/* Policy AI capability grid */
.ai-cap-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-5);
margin-bottom: var(--sp-12);
}
.ai-cap {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--sp-8);
transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.ai-cap:hover {
transform: translateY(-3px);
box-shadow: var(--shadow);
border-color: var(--color-border-strong);
}
.ai-cap-icon {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
border-radius: 12px;
background: rgba(30,91,255,0.10);
color: var(--color-primary);
margin-bottom: var(--sp-5);
}
.ai-cap h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.ai-cap p { font-size: var(--fs-sm); margin: 0; }
@media (max-width: 1024px) { .ai-cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ai-cap-grid { grid-template-columns: 1fr; } }
/* "Predictable. Structured." callout */
.ai-callout {
max-width: 820px;
margin: 0 auto;
padding: var(--sp-8) var(--sp-10);
background: var(--color-bg-feature);
color: var(--color-text-on-dark);
border-radius: var(--radius-lg);
text-align: center;
}
.ai-callout h3 {
color: #fff;
font-size: clamp(1.25rem, 2vw + 0.25rem, 1.5rem);
margin-bottom: var(--sp-3);
}
.ai-callout p {
color: var(--color-text-on-dark-muted);
margin: 0;
}
#claims-ai, #policy-ai { scroll-margin-top: calc(var(--header-h) + 12px); }
/* =============================================================
product pages (platform/cxhub, portal, ivr, notifications, claims)
============================================================= */
.product-hero {
position: relative;
padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem);
background:
radial-gradient(1100px 520px at 90% -10%, rgba(255,122,89,0.18), transparent 60%),
radial-gradient(900px 520px at -10% 10%, rgba(30,91,255,0.12), transparent 60%),
var(--color-bg);
overflow: hidden;
}
.theme-discotron .product-hero {
background:
radial-gradient(1100px 520px at 90% -10%, rgba(255,43,214,0.22), transparent 60%),
radial-gradient(900px 520px at -10% 10%, rgba(0,212,255,0.18), transparent 60%),
var(--color-bg);
}
.product-hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-12);
align-items: center;
}
.product-hero-tag {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-accent);
background: rgba(255,122,89,0.14);
padding: 6px 14px;
border-radius: 999px;
margin-bottom: var(--sp-5);
}
.theme-discotron .product-hero-tag {
color: var(--color-accent);
background: rgba(255,43,214,0.16);
}
.product-hero-copy h1 { margin-bottom: var(--sp-4); }
.product-hero-copy .lede { margin-bottom: var(--sp-8); max-width: 56ch; }
/* video placeholder on the right side of the hero */
.product-video {
position: relative;
aspect-ratio: 16 / 9;
border-radius: var(--radius-lg);
background: var(--gradient-soft);
border: 1px solid var(--color-border);
overflow: hidden;
box-shadow: var(--shadow);
display: flex;
align-items: center;
justify-content: center;
}
.product-video iframe,
.product-video video,
.product-video img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
}
.product-video-placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-3);
color: var(--color-text-subtle);
text-align: center;
}
.product-video-play {
width: 72px;
height: 72px;
border-radius: 50%;
background: rgba(255,255,255,0.92);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text);
box-shadow: 0 12px 32px rgba(10,22,40,0.18);
}
.product-video-label {
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.product-video-overlay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 8, 40, 0.55);
border: 0;
padding: 0;
cursor: pointer;
transition: opacity 200ms ease, background var(--t-fast);
}
.product-video-overlay:hover { background: rgba(15, 8, 40, 0.45); }
.product-video-overlay .product-video-play { transition: transform var(--t-fast); }
.product-video-overlay:hover .product-video-play { transform: scale(1.06); }
.product-video-overlay.is-hidden { opacity: 0; pointer-events: none; }
@media (max-width: 880px) {
.product-hero-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}
/* Mid product feature/why section */
.product-cross-promo {
background: var(--gradient-hero);
padding: var(--sp-8) 0;
color: #fff;
}
/* Light-weight related-reading strip */
.article-promo {
background: #fff;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
padding: var(--sp-7, var(--sp-6)) 0;
}
.article-promo-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-8);
}
.article-promo-copy { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 760px; }
.article-promo-tag {
display: inline-block;
align-self: flex-start;
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-accent);
}
.article-promo-copy h3 {
font-size: var(--fs-lg);
margin: 0;
letter-spacing: -0.01em;
line-height: 1.3;
}
.article-promo-copy p {
margin: 0;
font-size: var(--fs-sm);
color: var(--color-text-muted);
line-height: 1.5;
}
.article-promo-inner .btn { flex-shrink: 0; }
@media (max-width: 720px) {
.article-promo-inner { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
}
.product-cross-promo-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-8);
}
.product-cross-promo-copy { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 760px; }
.product-cross-promo-tag {
display: inline-block;
align-self: flex-start;
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
background: rgba(255, 255, 255, 0.18);
padding: 4px 10px;
border-radius: 999px;
}
.product-cross-promo-copy p {
margin: 0;
font-size: var(--fs-md);
color: #fff;
line-height: 1.5;
font-weight: 500;
}
.product-cross-promo-inner .btn { flex-shrink: 0; background: #fff; color: var(--color-text); border-color: #fff; }
.product-cross-promo-inner .btn:hover { background: rgba(255,255,255,0.92); color: var(--color-text); }
@media (max-width: 720px) {
.product-cross-promo-inner { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
}
.product-section { background: var(--color-bg); }
.product-section-alt { background: var(--color-bg-soft); border-top: 1px solid var(--color-border); }
.product-section-alt .section-head { margin: 0 0 var(--sp-12); text-align: left; }
.product-stat-band { background: #151515; padding-top: var(--sp-10); }
.product-stat-band--black { background: #000; }
.product-stat-band .product-stat-strip span { color: var(--color-text-on-dark-muted); }
.product-stat-head { text-align: center; margin-bottom: var(--sp-12); }
.product-stat-band .eyebrow { color: #fff; background: var(--color-accent); margin: 0; }
/* in-band feature columns (sit below the stats on dark band) */
.feature-band-head { max-width: 760px; margin: var(--sp-20) 0 var(--sp-10); text-align: left; }
.feature-band-head--top { margin-top: var(--sp-12); }
.product-stat-head--below { margin-top: var(--sp-16); margin-bottom: var(--sp-6); }
.feature-band-head h2 { color: #fff; font-size: clamp(1.75rem, 3vw + 0.5rem, var(--fs-3xl)); margin: 0 0 var(--sp-3); letter-spacing: -0.02em; }
.feature-band-head p { color: var(--color-text-on-dark-muted); font-size: var(--fs-md); margin: 0; }
.feature-band-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-8);
}
.feature-band-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* left/right split inside a dark band — narrative on left, media on right */
.feature-band-split {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: var(--sp-12);
align-items: center;
padding: var(--sp-10) 0;
}
.feature-band-split-copy h2 {
color: #fff;
font-size: clamp(1.75rem, 3vw + 0.5rem, var(--fs-3xl));
margin: 0 0 var(--sp-5);
letter-spacing: -0.02em;
}
.feature-band-split-copy p {
color: var(--color-text-on-dark-muted);
font-size: var(--fs-md);
line-height: 1.6;
margin: 0 0 var(--sp-4);
}
.feature-band-split-copy p:last-child { margin-bottom: 0; }
.feature-band-split-copy strong { color: #fff; }
.feature-band-split-media video {
width: 100%;
display: block;
border-radius: var(--radius);
}
@media (max-width: 880px) {
.feature-band-split { grid-template-columns: 1fr; gap: var(--sp-8); }
}
.feature-band-item { border-top: 1px solid rgba(255,255,255,0.18); padding-top: var(--sp-5); }
.feature-band-item h3 { color: #fff; font-size: var(--fs-lg); margin: 0 0 var(--sp-3); letter-spacing: -0.01em; }
.feature-band-item p { color: var(--color-text-on-dark-muted); font-size: var(--fs-sm); line-height: 1.55; margin: 0; }
@media (max-width: 880px) { .feature-band-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .feature-band-grid { grid-template-columns: 1fr; } }
.product-feature-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-5);
}
.product-feature {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--sp-8);
display: flex;
flex-direction: column;
}
.product-section-alt .product-feature { background: #fff; }
.product-feature-video {
width: 100%;
display: block;
margin-bottom: var(--sp-6);
border-radius: var(--radius);
}
.product-feature-image {
width: 100%;
display: block;
margin-bottom: var(--sp-10);
border-radius: var(--radius);
}
/* portal bento layout */
.portal-bento {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-5);
}
.portal-bento-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--sp-8);
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.portal-bento-card h3 {
font-size: var(--fs-lg);
margin: 0;
letter-spacing: -0.01em;
line-height: 1.25;
}
.portal-bento-card p {
font-size: var(--fs-sm);
color: var(--color-text-muted);
margin: 0;
line-height: 1.6;
}
.portal-bento-card--wide-2 { grid-column: span 2; }
.portal-bento-card--wide-3 { grid-column: 1 / -1; }
.portal-bento-card--dark {
background: #151515;
color: var(--color-text-on-dark);
border-color: #151515;
}
.portal-bento-card--dark h3 { color: #fff; }
.portal-bento-card--dark p { color: var(--color-text-on-dark-muted); }
.portal-bento-card--gradient {
background: var(--gradient-hero);
border-color: transparent;
color: #fff;
}
.portal-bento-card--gradient h3 { color: #fff; }
.portal-bento-card--gradient p { color: rgba(255, 255, 255, 0.88); }
@media (max-width: 880px) {
.portal-bento { grid-template-columns: 1fr; }
.portal-bento-card--wide-2,
.portal-bento-card--wide-3 { grid-column: auto; }
}
.product-capability-grid {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-3);
}
.product-capability-grid li {
background: var(--gradient-hero);
color: #fff;
padding: var(--sp-3) var(--sp-5);
border-radius: var(--radius);
font-weight: 600;
font-size: var(--fs-md);
letter-spacing: -0.01em;
}
.product-feature-icon {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(30,91,255,0.10);
color: var(--color-primary);
margin-bottom: var(--sp-5);
}
.theme-discotron .product-feature-icon {
background: rgba(0,212,255,0.12);
color: var(--color-primary);
}
.product-feature h3 {
font-size: var(--fs-lg);
margin: 0 0 var(--sp-2);
}
.product-feature p { font-size: var(--fs-sm); margin: 0; }
@media (max-width: 720px) { .product-feature-grid { grid-template-columns: 1fr; } }
/* Why-it-works two-column block: copy left, list right */
.product-why {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: var(--sp-12);
align-items: start;
max-width: 1000px;
margin: 0 auto;
}
.product-why h2 { font-size: clamp(1.75rem, 3vw + 0.5rem, var(--fs-3xl)); margin-bottom: var(--sp-4); }
.product-why .lede { font-size: var(--fs-md); margin: 0; color: var(--color-text-muted); }
.product-why-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--sp-5);
}
.product-why-list li {
position: relative;
padding: var(--sp-1) 0 var(--sp-1) var(--sp-5);
}
.product-why-list li::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--gradient-hero);
border-radius: 2px;
}
.product-why-list strong {
display: block;
font-size: var(--fs-md);
font-weight: 700;
margin-bottom: 4px;
color: var(--color-text);
letter-spacing: -0.01em;
}
.product-why-list span { font-size: var(--fs-sm); color: var(--color-text-muted); }
@media (max-width: 880px) {
.product-why { grid-template-columns: 1fr; gap: var(--sp-6); }
}
/* product page stat strip */
.product-stat-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-12);
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.product-stat-strip li {
display: flex;
flex-direction: column;
gap: var(--sp-2);
align-items: center;
}
.product-stat-strip strong {
font-size: clamp(2.25rem, 5vw, 3.5rem);
font-weight: 800;
letter-spacing: -0.04em;
background: var(--gradient-hero);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
}
.product-stat-strip span {
font-size: var(--fs-sm);
color: var(--color-text-muted);
max-width: 22ch;
}
/* =============================================================
reduced motion
============================================================= */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
html { scroll-behavior: auto; }
}