/* Exminds website - light-first design (Phase 6) */
:root {
/* Light theme is the default. Off-white / pale-mint surfaces with deep-teal ink. */
--bg-0: #FAFBF5;
--bg-1: #F4FAF7;
--bg-2: #EEF6F0;
--ink: #0B2A2A;
--ink-2: #4A5C5C;
--ink-3: #7A8C8C;
--line: rgba(0,120,103,0.14);
--glass: rgba(255,255,255,0.62);
--glass-strong: rgba(255,255,255,0.82);
--nav-bg: rgba(255,255,255,0.72);
--aurora-opacity: 0.36;
--grain-blend: multiply;
--shadow-strong: 0 50px 100px rgba(0,120,103,0.16);
--device-frame: linear-gradient(180deg, #d8dbd2 0%, #b5b9ad 100%);
--device-frame-stand: linear-gradient(180deg, #c5c8bf, #a8aca0);
--notch: #0B2A2A;
--tag-bg: rgba(255,255,255,0.86);
--store-btn-bg: #0B2A2A;
--store-btn-fg: #FAFBF5;
}
[data-theme="dark"] {
--bg-0: #060814;
--bg-1: #0a0d1f;
--bg-2: #0f1330;
--ink: #f4f6ff;
--ink-2: #c8cde0;
--ink-3: #8088a8;
--line: rgba(255,255,255,0.08);
--glass: rgba(255,255,255,0.04);
--glass-strong: rgba(255,255,255,0.07);
--nav-bg: rgba(10,13,30,0.55);
--aurora-opacity: 0.45;
--grain-blend: overlay;
--shadow-strong: 0 50px 100px rgba(0,0,0,0.5);
--device-frame: linear-gradient(180deg, #2a2a35 0%, #15151c 100%);
--device-frame-stand: linear-gradient(180deg, #1a1a22, #0a0a0e);
--notch: #000;
--tag-bg: rgba(10,13,30,0.7);
--store-btn-bg: var(--ink);
--store-btn-fg: var(--bg-0);
}
:root {
--yellow: #EAC105;
--green: #007867;
--teal: #00AFB9;
--blue: #005772;
--violet: #007867;
--biz-1: #007867;
--biz-2: #EAC105;
--ind-1: #00AFB9;
--ind-2: #EAC105;
--ind-3: #005772;
/* === Two-flow identity palettes (+ derivative shades) ===
Individual = yellow + turquoise · Business = pine green + yellow.
Yellow (#EAC105) is shared on purpose — the connective brand thread. */
--ind-base: #00AFB9; /* turquoise */
--ind-accent: #EAC105; /* shared yellow */
--ind-deep: #005772; /* deep teal-blue */
--ind-soft: color-mix(in srgb, #00AFB9 14%, transparent);
--ind-line: color-mix(in srgb, #00AFB9 32%, transparent);
--grad-ind: linear-gradient(135deg, #EAC105 0%, #00AFB9 100%);
--biz-base: #007867; /* pine green */
--biz-accent: #EAC105; /* shared yellow */
--biz-deep: #005C4F; /* deeper pine */
--biz-soft: color-mix(in srgb, #007867 14%, transparent);
--biz-line: color-mix(in srgb, #007867 32%, transparent);
--grad-biz: linear-gradient(135deg, #EAC105 0%, #007867 100%);
/* Shared bridge accent — the Explorer↔Candidate link */
--bridge: #EAC105;
--radius: 36px;
--radius-lg: 48px;
--radius-sm: 24px;
/* === Phase 6 signature gradients (yellow / turquoise / green) === */
--grad-sun: linear-gradient(135deg, #EAC105 0%, #00AFB9 100%);
--grad-meadow: linear-gradient(135deg, #00AFB9 0%, #007867 100%);
--grad-citrus: linear-gradient(135deg, #007867 0%, #EAC105 100%);
--grad-spectrum: linear-gradient(120deg, #EAC105 0%, #00AFB9 52%, #007867 100%);
/* Soft tinted backgrounds (~14% opacity) */
--grad-soft-sun: linear-gradient(135deg, rgba(234,193,5,0.14) 0%, rgba(0,175,185,0.14) 100%);
--grad-soft-meadow: linear-gradient(135deg, rgba(0,175,185,0.14) 0%, rgba(0,120,103,0.14) 100%);
--grad-soft-citrus: linear-gradient(135deg, rgba(0,120,103,0.14) 0%, rgba(234,193,5,0.14) 100%);
--grad-soft-spectrum: linear-gradient(120deg, rgba(234,193,5,0.12) 0%, rgba(0,175,185,0.12) 50%, rgba(0,120,103,0.12) 100%);
}
/* Flow theme mapping — any subtree carrying .theme-individual / .theme-business
exposes a neutral --flow-* set, so themed components recolor automatically. */
.theme-individual {
--flow-base: var(--ind-base); --flow-accent: var(--ind-accent); --flow-deep: var(--ind-deep);
--flow-soft: var(--ind-soft); --flow-line: var(--ind-line); --flow-grad: var(--grad-ind);
--flow-shadow: rgba(0,175,185,0.5);
}
.theme-business {
--flow-base: var(--biz-base); --flow-accent: var(--biz-accent); --flow-deep: var(--biz-deep);
--flow-soft: var(--biz-soft); --flow-line: var(--biz-line); --flow-grad: var(--grad-biz);
--flow-shadow: rgba(0,120,103,0.5);
}
/* ============================================================
HOMEPAGE COLOR SYSTEM (spec §0.5) — base brand colors,
derivative shades, role map, and mode-driven semantic accents.
Homepage components must use the SEMANTIC tokens (--accent-1/2,
--role-*), never hardcoded hex, so [data-mode] recolors the page.
============================================================ */
:root {
/* Base brand colors */
--color-sunflower: #EAC105; /* Yellow · Exminder */
--color-lagoon: #00AFB9; /* Teal · Explorer / Candidate (the common thread) */
--color-pine: #007867; /* Green · Company */
/* Derivative shades — Sunflower */
--color-sunflower-50: #FCF6DA; --color-sunflower-100: #F8E9A6; --color-sunflower-200: #F2D85F;
--color-sunflower-300: #EECB2C; --color-sunflower-400: #EAC105; --color-sunflower-500: #CDA904;
--color-sunflower-600: #A88B03; --color-sunflower-700: #7E6802; --color-sunflower-800: #544601;
--color-sunflower-tint: var(--color-sunflower-200);
--color-sunflower-deep: var(--color-sunflower-700);
--color-sunflower-soft: color-mix(in srgb, var(--color-sunflower) 14%, transparent);
/* Derivative shades — Lagoon */
--color-lagoon-50: #D6F5F7; --color-lagoon-100: #A2E8EC; --color-lagoon-200: #5FD6DD;
--color-lagoon-300: #1FC2CB; --color-lagoon-400: #00AFB9; --color-lagoon-500: #0098A1;
--color-lagoon-600: #007D85; --color-lagoon-700: #005F65; --color-lagoon-800: #004247;
--color-lagoon-tint: var(--color-lagoon-200);
--color-lagoon-deep: var(--color-lagoon-600);
--color-lagoon-soft: color-mix(in srgb, var(--color-lagoon) 14%, transparent);
/* Derivative shades — Pine */
--color-pine-50: #D6EFE9; --color-pine-100: #A6DBCF; --color-pine-200: #5FBEAB;
--color-pine-300: #2E9E8C; --color-pine-400: #007867; --color-pine-500: #006A5B;
--color-pine-600: #005C4F; --color-pine-700: #00463C; --color-pine-800: #00302A;
--color-pine-tint: var(--color-pine-200);
--color-pine-deep: var(--color-pine-600);
--color-pine-soft: color-mix(in srgb, var(--color-pine) 14%, transparent);
/* Role → color map (mode-independent; for chips, map pins, badges, reels) */
--role-exminder: var(--color-sunflower);
--role-explorer: var(--color-lagoon);
--role-company: var(--color-pine);
--role-exminder-ink: #1a1505; /* dark text on sunflower */
--role-explorer-ink: #ffffff; /* light text on lagoon */
--role-company-ink: #ffffff; /* light text on pine */
/* Default semantic accents = individual world, so sections render correctly
before home.js sets [data-mode]. */
--accent-1: var(--color-sunflower); --accent-1-deep: var(--color-sunflower-deep);
--accent-1-soft: var(--color-sunflower-soft); --accent-1-ink: #1a1505;
--accent-2: var(--color-lagoon); --accent-2-deep: var(--color-lagoon-deep);
--accent-2-soft: var(--color-lagoon-soft); --accent-2-ink: #ffffff;
--accent-grad: linear-gradient(135deg, var(--color-sunflower) 0%, var(--color-lagoon) 100%);
--accent-shadow: rgba(0,175,185,0.45);
}
/* Mode-driven palette: components read --accent-* only → switching [data-mode] recolors all. */
[data-mode="individual"] {
--accent-1: var(--color-sunflower); --accent-1-deep: var(--color-sunflower-deep);
--accent-1-soft: var(--color-sunflower-soft); --accent-1-ink: #1a1505;
--accent-2: var(--color-lagoon); --accent-2-deep: var(--color-lagoon-deep);
--accent-2-soft: var(--color-lagoon-soft); --accent-2-ink: #ffffff;
--accent-grad: linear-gradient(135deg, var(--color-sunflower) 0%, var(--color-lagoon) 100%);
--accent-shadow: rgba(0,175,185,0.45);
}
[data-mode="business"] {
--accent-1: var(--color-pine); --accent-1-deep: var(--color-pine-deep);
--accent-1-soft: var(--color-pine-soft); --accent-1-ink: #ffffff;
--accent-2: var(--color-lagoon); --accent-2-deep: var(--color-lagoon-deep);
--accent-2-soft: var(--color-lagoon-soft); --accent-2-ink: #ffffff;
--accent-grad: linear-gradient(135deg, var(--color-pine) 0%, var(--color-lagoon) 100%);
--accent-shadow: rgba(0,120,103,0.45);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg-0);
color: var(--ink);
font-feature-settings: "ss01", "cv11";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
cursor: none;
}
/* ===========================================================================
Fluid animated background — "infinity hourglass": drifting aurora mesh +
falling sand grains (canvas, injected by motion.js) + film grain.
=========================================================================== */
.aurora {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
/* slow breathing wash so even empty space has life */
background:
radial-gradient(125% 120% at 50% -15%, color-mix(in srgb, var(--teal) 9%, transparent), transparent 58%),
radial-gradient(125% 120% at 50% 115%, color-mix(in srgb, var(--yellow) 9%, transparent), transparent 58%);
}
/* Big soft colour fields — two via pseudo-elements, three more injected by JS */
.aurora::before, .aurora::after, .aurora-blob {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(120px);
opacity: var(--aurora-opacity);
will-change: transform;
}
.aurora::before {
width: 72vw; height: 72vw;
top: -28vw; left: -18vw;
background: radial-gradient(circle at 30% 30%, var(--teal) 0%, transparent 62%),
radial-gradient(circle at 70% 60%, var(--blue) 0%, transparent 62%);
animation: drift-a 32s ease-in-out infinite alternate;
}
.aurora::after {
width: 74vw; height: 74vw;
bottom: -30vw; right: -20vw;
background: radial-gradient(circle at 30% 70%, var(--yellow) 0%, transparent 58%),
radial-gradient(circle at 70% 30%, var(--green) 0%, transparent 58%);
animation: drift-b 40s ease-in-out infinite alternate;
}
/* Bold, concentrated, floating colour pops over the plain-white field (turquoise + yellow) */
.aurora-blob { filter: blur(64px); }
.aurora-blob.b1 { width:38vw; height:38vw; top:-8%; left:auto; right:-2%;
background: radial-gradient(circle, var(--yellow) 0%, color-mix(in srgb, var(--yellow) 70%, transparent) 26%, transparent 64%);
opacity:.6; animation: drift-c 36s ease-in-out infinite alternate; }
.aurora-blob.b2 { width:54vw; height:54vw; top:28%; left:-18%;
background: radial-gradient(circle, var(--teal) 0%, color-mix(in srgb, var(--teal) 64%, transparent) 28%, transparent 66%);
opacity:.5; animation: drift-d 46s ease-in-out infinite alternate; }
.aurora-blob.b3 { width:42vw; height:42vw; top:64%; left:auto; right:0%;
background: radial-gradient(circle, var(--teal) 0%, color-mix(in srgb, var(--teal) 56%, transparent) 24%, transparent 62%);
opacity:.42; animation: drift-e 40s ease-in-out infinite alternate; }
@keyframes drift-a { 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(8vw,-5vw) scale(1.18)} 100%{transform:translate(-6vw,6vw) scale(.92)} }
@keyframes drift-b { 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(-9vw,5vw) scale(1.12)} 100%{transform:translate(7vw,-6vw) scale(.95)} }
@keyframes drift-c { 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(-7vw,8vw) scale(1.10)} 100%{transform:translate(6vw,-7vw) scale(.90)} }
@keyframes drift-d { 0%{transform:translate(0,0) scale(.95)} 50%{transform:translate(10vw,4vw) scale(1.15)} 100%{transform:translate(-5vw,-8vw) scale(1)} }
@keyframes drift-e { 0%{transform:translate(0,0) scale(1.05)} 50%{transform:translate(-8vw,-6vw) scale(.92)} 100%{transform:translate(5vw,9vw) scale(1.12)} }
/* The infinity-hourglass sand (canvas injected by motion.js) */
.sand-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: .6;
}
/* Film grain — dot pattern + animated fractal noise for a true sandy texture */
.aurora .grain {
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
background-size: 3px 3px;
opacity: 0.30;
mix-blend-mode: var(--grain-blend);
animation: grain-pan 7s steps(8) infinite;
}
.aurora .grain::after {
content: '';
position: absolute;
inset: -120%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 220px 220px;
opacity: 0.55;
mix-blend-mode: var(--grain-blend);
animation: grain-jitter .9s steps(5) infinite;
}
@keyframes grain-pan {
0%{transform:translate(0,0)} 25%{transform:translate(-1.5px,1px)} 50%{transform:translate(1px,-1.5px)}
75%{transform:translate(-1px,-1px)} 100%{transform:translate(0,0)}
}
@keyframes grain-jitter {
0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,2%)} 100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion: reduce) {
.aurora::before, .aurora::after, .aurora-blob,
.aurora .grain, .aurora .grain::after { animation: none !important; }
}
/* Glass cursor */
.cursor-dot, .cursor-glass {
position: fixed;
pointer-events: none;
z-index: 9999;
top: 0; left: 0;
transform: translate(-50%, -50%);
will-change: transform;
}
.cursor-dot {
width: 6px; height: 6px;
background: var(--ink);
border-radius: 50%;
mix-blend-mode: difference;
}
.cursor-glass {
width: 56px; height: 56px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.35);
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), rgba(255,255,255,0.02) 60%);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
box-shadow:
0 0 0 1px rgba(255,255,255,0.06) inset,
0 8px 32px rgba(0,175,185,0.25),
0 0 60px rgba(0,87,114,0.18);
transition: width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1), background .3s, border-color .3s;
}
.cursor-glass.is-link {
width: 88px; height: 88px;
background: radial-gradient(circle at 30% 30%, rgba(234,193,5,0.22), rgba(255,255,255,0.02) 60%);
border-color: rgba(234,193,5,0.45);
}
@media (max-width: 900px), (hover: none) {
body { cursor: auto; }
.cursor-dot, .cursor-glass { display: none; }
}
/* Layout */
.container { max-width: 1240px; margin: 0 auto; padding: 0 56px; position: relative; }
section { position: relative; z-index: 1; }
/* Nav */
.nav {
position: fixed;
top: 18px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px 10px 22px;
background: var(--nav-bg);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
border: 1px solid var(--line);
border-radius: 999px;
box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
.nav-logo {
display: flex; align-items: center; gap: 10px;
font-weight: 800; letter-spacing: -0.02em; font-size: 17px;
margin-right: 16px;
}
.nav-logo {
display: inline-flex;
align-items: center;
height: 36px;
}
.nav-logo .logo-img {
height: 28px;
width: auto;
max-width: 140px;
object-fit: contain;
display: block;
border-radius: 26px;
}
.footer-logo-img {
height: 72px;
width: auto;
max-width: 100px;
object-fit: contain;
display: block;
border-radius: 26px;
}
.footer .brand .logo {
display: flex; align-items: center; gap: 0;
}
.app-ui .topbar .left .logo-mark-img {
height: 18px;
width: auto;
max-width: 80px;
object-fit: contain;
display: block;
border-radius: 26px;
}
.nav-link {
padding: 9px 14px;
font-size: 13.5px;
font-weight: 500;
color: var(--ink-2);
text-decoration: none;
border-radius: 999px;
transition: color .2s, background .2s;
white-space: nowrap;
}
.nav-link:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
.nav-cta {
margin-left: 6px;
padding: 10px 18px;
font-size: 13.5px;
font-weight: 600;
color: var(--bg-0);
background: var(--yellow);
border-radius: 999px;
text-decoration: none;
border: none;
white-space: nowrap;
transition: transform .2s, box-shadow .2s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 30px rgba(234,193,5,0.4); }
/* Theme toggle */
.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--glass);
color: var(--ink);
cursor: pointer;
padding: 0;
transition: background .2s, border-color .2s, transform .2s;
margin-left: 4px;
}
.theme-toggle:hover {
background: var(--glass-strong);
border-color: rgba(255,255,255,0.18);
transform: rotate(20deg);
}
[data-theme="light"] .theme-toggle:hover {
border-color: rgba(0,0,0,0.18);
}
.theme-toggle svg {
width: 16px;
height: 16px;
display: block;
}
[data-theme="light"] .nav-logo .logo-img {
filter: brightness(0);
}
[data-theme="light"] .footer-logo-img {
filter: brightness(0);
}
/* Hero */
.hero {
padding: 180px 0 100px;
position: relative;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px 8px 8px;
background: var(--glass);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 13px;
color: var(--ink-2);
backdrop-filter: blur(12px);
}
.hero-eyebrow .pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: rgba(0,120,103,0.15);
color: var(--green);
border-radius: 999px;
font-weight: 600;
font-size: 11.5px;
letter-spacing: 0.04em;
}
.hero-eyebrow .pill::before {
content: '';
width: 6px; height: 6px;
background: var(--green);
border-radius: 50%;
animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(0,120,103,0.6); }
50% { box-shadow: 0 0 0 6px rgba(0,120,103,0); }
}
.hero h1 {
font-size: clamp(40px, 6.5vw, 96px);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1.05;
margin: 28px 0 0;
overflow: visible;
}
.hero h1 .grad {
background: linear-gradient(120deg, var(--yellow) 0%, var(--green) 35%, var(--teal) 60%, var(--blue) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
padding: 0.05em 0.05em 0.18em;
margin: 0 -0.05em -0.18em;
line-height: 1.15;
}
.hero h1 .italic {
font-style: italic;
font-weight: 500;
font-family: 'Instrument Serif', 'Playfair Display', serif;
}
.hero-sub {
margin-top: 32px;
max-width: 620px;
font-size: 19px;
line-height: 1.55;
color: var(--ink-2);
font-weight: 400;
}
.hero-actions {
margin-top: 40px;
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 26px;
border-radius: 999px;
font-weight: 600;
font-size: 15px;
text-decoration: none;
border: 1px solid transparent;
transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
cursor: none;
}
.btn-primary {
background: linear-gradient(135deg, var(--yellow) 0%, #EAC105 100%);
color: #1a1505;
box-shadow: 0 8px 30px rgba(234,193,5,0.25), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(234,193,5,0.45), inset 0 1px 0 rgba(255,255,255,0.4); }
.btn-glass {
background: var(--glass-strong);
border-color: var(--line);
color: var(--ink);
backdrop-filter: blur(12px);
}
.btn-glass:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.hero-meta {
margin-top: 56px;
display: flex;
gap: 56px;
flex-wrap: wrap;
font-size: 13px;
color: var(--ink-3);
}
.hero-meta .stat {
display: flex; flex-direction: column; gap: 6px;
}
.hero-meta .stat strong {
font-size: 28px;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.02em;
}
/* Hero floating mockups */
.hero-floats {
position: absolute;
right: -40px;
top: 140px;
width: 620px;
height: 720px;
pointer-events: none;
}
.hero-floats .glass-card {
position: absolute;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
padding: 18px;
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-14px); }
}
@media (max-width: 1100px) {
.hero-floats { display: none; }
}
/* Marquee logos */
.marquee {
margin-top: 80px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 32px 0;
overflow: hidden;
position: relative;
}
.marquee::before, .marquee::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 120px;
z-index: 2;
pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg-0), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--bg-0), transparent); }
[data-theme="light"] .marquee-item { opacity: 0.55; }
.marquee-track {
display: flex;
gap: 64px;
animation: marquee 40s linear infinite;
width: max-content;
}
.marquee-item {
font-size: 22px;
font-weight: 600;
color: var(--ink-3);
letter-spacing: -0.01em;
white-space: nowrap;
display: flex; align-items: center; gap: 14px;
opacity: 0.7;
}
.marquee-item .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--ink-3);
}
@keyframes marquee {
to { transform: translateX(-50%); }
}
/* Section base */
.section { padding: 140px 0; }
.section-eyebrow {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 18px;
}
.section-title {
font-size: clamp(32px, 4.5vw, 60px);
font-weight: 800;
line-height: 1.05;
overflow: visible;
letter-spacing: -0.03em;
line-height: 1;
margin: 0 0 24px;
max-width: 14ch;
}
.section-title.center, .section-eyebrow.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-lead {
font-size: 19px;
color: var(--ink-2);
max-width: 60ch;
line-height: 1.55;
}
/* Split — what is exminds */
.split {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 80px;
align-items: center;
}
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; gap: 56px; } }
.philosophy {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 40px;
}
.philosophy .card {
padding: 22px;
background: var(--glass);
border: 1px solid var(--line);
border-radius: var(--radius);
backdrop-filter: blur(12px);
transition: transform .3s, border-color .3s, background .3s;
}
.philosophy .card:hover {
transform: translateY(-4px);
border-color: rgba(255,255,255,0.18);
background: var(--glass-strong);
}
.philosophy .card h4 { margin: 0; font-size: 16px; font-weight: 700; }
.philosophy .card p { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.philosophy .card .ico {
width: 36px; height: 36px;
border-radius: 26px;
margin-bottom: 14px;
display: grid; place-items: center;
font-weight: 800; font-size: 14px;
color: var(--bg-0);
}
/* Two-direction (business/individual) */
.two-dir {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 56px;
}
@media (max-width: 900px) { .two-dir { grid-template-columns: 1fr; } }
.dir-card {
position: relative;
padding: 36px;
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid var(--line);
overflow: hidden;
transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s;
min-height: 420px;
display: flex; flex-direction: column;
text-decoration: none;
color: var(--ink);
}
.dir-card * { text-decoration: none; }
.dir-card:hover { transform: translateY(-8px); border-color: rgba(255,255,255,0.18); }
.dir-card .label {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
width: fit-content;
}
.dir-card.biz .label { background: rgba(0,87,114,0.15); color: var(--blue); }
.dir-card.ind .label { background: rgba(234,193,5,0.15); color: var(--yellow); }
.dir-card h3 {
font-size: 36px;
font-weight: 800;
letter-spacing: -0.025em;
margin: 18px 0 14px;
line-height: 1.05;
}
.dir-card p { color: var(--ink-2); line-height: 1.55; margin: 0 0 28px; max-width: 38ch; }
.dir-card .glow {
position: absolute;
width: 280px; height: 280px;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
opacity: 0.4;
bottom: -120px; right: -100px;
}
.dir-card.biz .glow { background: var(--blue); }
.dir-card.ind .glow { background: var(--yellow); }
.dir-card .features {
margin-top: auto;
display: flex; flex-direction: column; gap: 10px;
}
.dir-card .features li {
list-style: none;
display: flex; align-items: center; gap: 12px;
font-size: 14px;
color: var(--ink-2);
padding: 12px 14px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--line);
border-radius: 26px;
}
.dir-card .features li svg { flex-shrink: 0; }
.dir-card .arrow {
position: absolute;
top: 36px; right: 36px;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
border: 1px solid var(--line);
display: grid; place-items: center;
transition: transform .3s, background .3s;
}
.dir-card:hover .arrow { transform: rotate(-45deg) scale(1.1); background: var(--ink); color: var(--bg-0); }
/* Demo Days flow */
.flow {
margin-top: 56px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
position: relative;
}
@media (max-width: 1100px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .flow { grid-template-columns: 1fr; } }
.flow-step {
padding: 26px;
background: var(--glass);
border: 1px solid var(--line);
border-radius: var(--radius);
backdrop-filter: blur(12px);
position: relative;
transition: transform .3s, border-color .3s;
}
.flow-step:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.16); }
.flow-step .num {
font-family: 'Montserrat', sans-serif;
font-size: 38px;
font-weight: 400;
font-style: italic;
background: linear-gradient(135deg, var(--yellow), var(--teal));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: block;
margin-bottom: 14px;
}
.flow-step h4 { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.2; }
.flow-step p { margin: 0; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
/* Mockup desktop */
.mockup-stage {
margin-top: 80px;
position: relative;
perspective: 1600px;
}
.macbook {
position: relative;
margin: 0 auto;
max-width: 980px;
border-radius: var(--radius-lg);
background: var(--device-frame);
padding: 14px 14px 10px;
box-shadow:
0 1px 0 rgba(255,255,255,0.1) inset,
var(--shadow-strong),
0 0 0 1px rgba(255,255,255,0.04);
transform: rotateX(8deg);
transform-origin: center bottom;
}
.macbook::before {
content: '';
position: absolute;
top: 6px; left: 50%;
transform: translateX(-50%);
width: 60px; height: 4px;
background: #0a0a0e;
border-radius: 999px;
}
.macbook .screen {
border-radius: 26px;
overflow: hidden;
background: var(--bg-1);
aspect-ratio: 16/10;
position: relative;
}
.macbook + .stand {
margin: 0 auto;
width: 60%;
max-width: 600px;
height: 14px;
background: var(--device-frame-stand);
border-radius: 0 0 999px 999px;
box-shadow: 0 30px 60px rgba(0,0,0,0.5);
position: relative;
}
.macbook + .stand::after {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 120px; height: 4px;
background: #050507;
border-radius: 999px;
}
/* Mockup phone */
.iphone {
width: 280px;
height: 580px;
border-radius: 44px;
background: var(--device-frame-stand);
padding: 8px;
box-shadow:
0 0 0 1px rgba(255,255,255,0.08),
0 30px 80px rgba(0,0,0,0.5);
position: relative;
}
.iphone::before {
content: '';
position: absolute;
top: 14px; left: 50%;
transform: translateX(-50%);
width: 110px; height: 30px;
background: var(--notch);
border-radius: 999px;
z-index: 3;
}
.iphone .screen {
width: 100%; height: 100%;
border-radius: 38px;
overflow: hidden;
background: var(--bg-1);
position: relative;
}
/* App UI inside mockups */
.app-ui {
width: 100%; height: 100%;
background: linear-gradient(180deg, #0c1230 0%, #0a0d1f 100%);
position: relative;
overflow: hidden;
}
.app-ui .topbar {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.app-ui .topbar .left { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13px; }
.app-ui .topbar .nav-bits { display: flex; gap: 16px; font-size: 11px; color: var(--ink-3); }
.app-ui .topbar .avatar {
width: 24px; height: 24px;
border-radius: 50%;
background: linear-gradient(135deg, var(--yellow), var(--teal));
}
.app-ui .body { padding: 20px; display: grid; grid-template-columns: 220px 1fr; gap: 16px; height: calc(100% - 48px); }
.app-ui .side { display: flex; flex-direction: column; gap: 6px; font-size: 11px; }
.app-ui .side .item { padding: 8px 12px; border-radius: 26px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.app-ui .side .item.active { background: rgba(234,193,5,0.12); color: var(--yellow); }
.app-ui .side .item .ic { width: 12px; height: 12px; border-radius: 26px; background: currentColor; opacity: 0.5; }
.app-ui .main { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.app-ui .feed { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.app-ui .exp-card {
padding: 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 26px;
display: flex; flex-direction: column; gap: 10px;
}
.app-ui .exp-card .img {
height: 80px;
border-radius: 26px;
background: linear-gradient(135deg, var(--teal), var(--blue));
position: relative;
overflow: hidden;
}
.app-ui .exp-card .img.b { background: linear-gradient(135deg, var(--yellow), var(--green)); }
.app-ui .exp-card .img::after {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.3), transparent 50%);
}
.app-ui .exp-card .label { font-size: 9.5px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.05em; text-transform: uppercase; }
.app-ui .exp-card h5 { margin: 0; font-size: 13px; font-weight: 700; }
.app-ui .exp-card .meta { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); }
.app-ui .exp-card .meta .price { color: var(--yellow); font-weight: 700; }
/* Mobile app inside iphone */
.app-mobile {
width: 100%; height: 100%;
background: linear-gradient(180deg, #0c1230 0%, #0a0d1f 100%);
padding: 56px 18px 18px;
display: flex; flex-direction: column; gap: 14px;
}
.app-mobile h6 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.app-mobile h6 .small { display: block; font-size: 12px; color: var(--ink-3); font-weight: 500; margin-bottom: 4px; }
.app-mobile .chips { display: flex; gap: 8px; overflow: hidden; }
.app-mobile .chip { padding: 7px 12px; border-radius: 999px; font-size: 11px; background: rgba(255,255,255,0.06); white-space: nowrap; }
.app-mobile .chip.on { background: var(--yellow); color: #1a1505; font-weight: 700; }
.app-mobile .m-card {
padding: 14px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 26px;
display: flex; gap: 12px;
}
.app-mobile .m-card .av {
width: 44px; height: 44px;
border-radius: 26px;
background: linear-gradient(135deg, var(--teal), var(--blue));
flex-shrink: 0;
}
.app-mobile .m-card .av.b { background: linear-gradient(135deg, var(--yellow), var(--green)); }
.app-mobile .m-card .av.c { background: linear-gradient(135deg, var(--violet), var(--blue)); }
.app-mobile .m-card .info { flex: 1; min-width: 0; }
.app-mobile .m-card .info .row1 { display: flex; align-items: center; justify-content: space-between; }
.app-mobile .m-card .info .name { font-size: 13px; font-weight: 700; }
.app-mobile .m-card .info .price { font-size: 12px; color: var(--yellow); font-weight: 700; }
.app-mobile .m-card .info .role { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.app-mobile .m-card .info .tags { display: flex; gap: 6px; margin-top: 8px; }
.app-mobile .m-card .info .tags span { font-size: 9.5px; padding: 3px 8px; border-radius: 999px; background: rgba(0,175,185,0.15); color: var(--teal); }
/* Benefits — bento */
.bento {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
margin-top: 56px;
}
.bento .b {
background: var(--glass);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 28px;
backdrop-filter: blur(12px);
position: relative;
overflow: hidden;
min-height: 240px;
transition: transform .35s, border-color .35s;
display: flex; flex-direction: column;
}
.bento .b:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.18); }
.bento .b h4 { margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.bento .b p { margin: 0; font-size: 14px; color: var(--ink-3); line-height: 1.5; }
.bento .span-3 { grid-column: span 3; }
.bento .span-2 { grid-column: span 2; }
.bento .span-4 { grid-column: span 4; }
.bento .span-6 { grid-column: span 6; }
.bento .tall { min-height: 360px; }
@media (max-width: 900px) {
.bento { grid-template-columns: repeat(2, 1fr); }
.bento .span-3, .bento .span-2, .bento .span-4, .bento .span-6 { grid-column: span 2; }
}
.bento .visual {
margin-top: auto;
flex-shrink: 0;
}
/* Mission/Vision/Values */
.mvv {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 56px;
}
@media (max-width: 900px) { .mvv { grid-template-columns: 1fr; } }
.mvv .pillar {
position: relative;
padding: 36px 30px;
background: var(--glass);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
backdrop-filter: blur(14px);
overflow: hidden;
min-height: 320px;
display: flex; flex-direction: column;
transition: transform .4s, border-color .4s;
}
.mvv .pillar:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.18); }
.mvv .pillar .badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
width: fit-content;
background: rgba(255,255,255,0.06);
}
.mvv .pillar h3 { font-size: 32px; font-weight: 800; letter-spacing: -0.025em; margin: 18px 0 14px; }
.mvv .pillar p { color: var(--ink-2); line-height: 1.55; margin: 0; font-size: 15px; }
.mvv .pillar .blob {
position: absolute;
width: 200px; height: 200px;
border-radius: 50%;
filter: blur(60px);
opacity: 0.5;
bottom: -80px; right: -60px;
pointer-events: none;
}
.mvv .pillar:nth-child(1) .blob { background: var(--yellow); }
.mvv .pillar:nth-child(2) .blob { background: var(--teal); }
.mvv .pillar:nth-child(3) .blob { background: var(--green); }
.mvv .pillar .num {
font-family: 'Montserrat', sans-serif;
font-style: italic;
font-size: 56px;
margin-top: auto;
line-height: 1;
background: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
opacity: 0.6;
}
/* Values list */
.values {
margin-top: 80px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 900px) { .values { grid-template-columns: repeat(2, 1fr); } }
.values .v {
padding: 24px;
background: var(--glass);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
transition: transform .3s, border-color .3s;
}
.values .v:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.18); }
.values .v .ico {
width: 40px; height: 40px;
border-radius: 26px;
margin-bottom: 16px;
display: grid; place-items: center;
font-weight: 700;
background: linear-gradient(135deg, rgba(234,193,5,0.2), rgba(0,175,185,0.2));
border: 1px solid rgba(255,255,255,0.1);
}
.values .v h5 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.values .v p { margin: 0; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
/* Team */
.team {
margin-top: 56px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 900px) { .team { grid-template-columns: repeat(2, 1fr); } }
/* When the team is just the two founders, center the pair instead of left-packing the 4-col grid */
.team:has(.person:nth-child(2):last-child) {
grid-template-columns: repeat(2, minmax(0, 320px));
justify-content: center;
}
.team .person {
padding: 22px;
background: var(--glass);
border: 1px solid var(--line);
border-radius: var(--radius);
text-align: left;
transition: transform .3s, border-color .3s;
}
.team .person:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.18); }
.team .person .avatar {
width: 100%;
aspect-ratio: 1;
border-radius: 26px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.team .person .avatar::after {
content: attr(data-init);
position: absolute; inset: 0;
display: grid; place-items: center;
font-family: 'Montserrat', sans-serif;
font-style: italic;
font-size: 64px;
color: rgba(255,255,255,0.95);
}
/* Photo avatars: the ![]()
fills the square; hide the initial when a photo is present.
If the image fails to load, JS strips .has-photo and the initial returns. */
.team .person .avatar .avatar-photo {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.team .person .avatar.has-photo::after { content: none; }
.team .person .role { font-size: 11.5px; color: var(--teal); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.team .person h5 { margin: 4px 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.team .person p { margin: 0; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
/* Experiences gallery */
.experiences {
margin-top: 56px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
@media (max-width: 900px) { .experiences { grid-template-columns: 1fr; } }
.experience {
padding: 22px;
border-radius: var(--radius);
border: 1px solid var(--line);
background: var(--glass);
position: relative;
overflow: hidden;
transition: transform .35s, border-color .35s;
min-height: 380px;
display: flex; flex-direction: column;
}
.experience:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.18); }
.experience .photo {
height: 200px;
border-radius: 26px;
margin-bottom: 18px;
position: relative;
overflow: hidden;
}
.experience .photo::before {
content: '';
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}
.experience .photo .price-tag {
position: absolute;
top: 12px; right: 12px;
padding: 7px 12px;
background: var(--tag-bg);
backdrop-filter: blur(10px);
border-radius: 999px;
font-size: 12px;
font-weight: 700;
border: 1px solid rgba(255,255,255,0.12);
}
.experience .tag {
position: absolute;
top: 12px; left: 12px;
padding: 6px 10px;
background: rgba(234,193,5,0.95);
color: #1a1505;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.experience h4 { margin: 0 0 8px; font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.experience p { margin: 0 0 16px; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; flex: 1; }
.experience .mentor { display: flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.experience .mentor .av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--yellow), var(--teal)); }
.experience .mentor .name { font-size: 13px; font-weight: 600; }
.experience .mentor .role { font-size: 11px; color: var(--ink-3); }
/* Exp gradients (placeholders) */
.gradient-1 { background: linear-gradient(135deg, #EAC105, #007867); }
.gradient-2 { background: linear-gradient(135deg, #00AFB9, #005772); }
.gradient-3 { background: linear-gradient(135deg, #005772, #005772); }
.gradient-4 { background: linear-gradient(135deg, #005772, #00AFB9); }
.gradient-5 { background: linear-gradient(135deg, #007867, #00AFB9); }
.gradient-6 { background: linear-gradient(135deg, #EAC105, #EAC105); }
/* Big CTA */
.cta-band {
margin: 0 24px;
padding: 90px 60px;
border-radius: 36px;
background:
radial-gradient(circle at 20% 50%, rgba(234,193,5,0.18) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(0,175,185,0.18) 0%, transparent 50%),
linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid var(--line);
text-align: center;
position: relative;
overflow: hidden;
}
.cta-band h2 {
font-size: clamp(40px, 6vw, 88px);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 0.95;
margin: 0 auto;
max-width: 16ch;
}
.cta-band h2 .grad {
background: linear-gradient(120deg, var(--yellow), var(--green), var(--teal));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.cta-band p { margin: 24px auto 36px; max-width: 50ch; font-size: 18px; color: var(--ink-2); line-height: 1.5; }
.cta-band .stores {
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.store-btn {
display: inline-flex; align-items: center; gap: 14px;
padding: 16px 28px;
border-radius: 999px !important;
white-space: nowrap;
position: relative;
overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease, background .35s ease;
min-height: 60px;
background: var(--store-btn-bg);
color: var(--store-btn-fg);
border-radius: 999px;
text-decoration: none;
font-weight: 600;
white-space: nowrap;
transition: transform .2s, box-shadow .2s;
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.store-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
.store-btn .ic { width: 24px; height: 24px; display: grid; place-items: center; flex-shrink: 0; }
.store-btn .label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; gap: 2px; }
.store-btn .label small { font-size: 10.5px; font-weight: 500; opacity: 0.72; letter-spacing: 0.02em; }
.store-btn .label strong { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.store-btn .label small { white-space: nowrap; }
.store-btn:active,
.store-btn:focus-visible {
border-radius: 999px !important;
background: linear-gradient(135deg, #007867 0%, #00AFB9 60%, #EAC105 100%) !important;
color: #fff !important;
box-shadow: 0 0 0 4px rgba(0,120,103,0.25), 0 12px 32px rgba(0,120,103,0.45) !important;
outline: none;
}
.store-btn:active *,
.store-btn:focus-visible * { color: #fff !important; opacity: 1 !important; }
/* Footer */
.footer {
padding: 100px 0 40px;
border-top: 1px solid var(--line);
margin-top: 100px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 48px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer h6 { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 18px; }
.footer-col a { display: block; padding: 6px 0; font-size: 14px; color: var(--ink-2); text-decoration: none; transition: color .2s; }
.footer-col a:hover { color: var(--ink); }
.footer .brand { display: flex; flex-direction: column; gap: 18px; max-width: 320px; }
.footer .brand .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.footer .brand p { font-size: 14px; color: var(--ink-3); line-height: 1.6; margin: 0; }
.socials { display: flex; gap: 8px; margin-top: 6px; }
.social {
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--glass);
display: grid; place-items: center;
text-decoration: none;
color: var(--ink-2);
transition: transform .25s, background .25s, color .25s, border-color .25s;
}
.social:hover { transform: translateY(-3px); background: var(--ink); color: var(--bg-0); border-color: var(--ink); }
.footer-bottom {
margin-top: 60px;
padding-top: 30px;
border-top: 1px solid var(--line);
display: flex; justify-content: space-between; align-items: center;
font-size: 13px;
color: var(--ink-3);
flex-wrap: wrap;
gap: 12px;
}
/* Scroll reveal */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1);
transition-delay: var(--delay, 0ms);
}
.reveal.in {
opacity: 1;
transform: translateY(0);
}
/* Marquee for testimonials */
.testimonials {
margin-top: 80px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 900px) { .testimonials { grid-template-columns: 1fr; } }
.tcard {
padding: 28px;
border-radius: var(--radius-lg);
background: var(--glass);
border: 1px solid var(--line);
display: flex; flex-direction: column; gap: 18px;
}
.tcard p { margin: 0; font-size: 16px; line-height: 1.55; }
.tcard p::before { content: '"'; font-family: 'Montserrat', sans-serif; font-size: 60px; line-height: 0.4; color: var(--yellow); display: block; }
.tcard .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.tcard .who .av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--green), var(--teal)); }
.tcard .who .name { font-weight: 700; font-size: 14px; }
.tcard .who .role { font-size: 12px; color: var(--ink-3); }
/* Tabs (try-before-you-apply demo) */
.tabs {
display: inline-flex;
padding: 6px;
background: var(--glass);
border: 1px solid var(--line);
border-radius: 999px;
margin: 0 auto 40px;
backdrop-filter: blur(12px);
}
.tabs button {
padding: 10px 22px;
font-size: 13.5px;
font-weight: 600;
border: none;
background: transparent;
color: var(--ink-3);
border-radius: 999px;
cursor: none;
font-family: inherit;
transition: color .2s;
}
.tabs button.on {
background: var(--ink);
color: var(--bg-0);
}
.tabs-row { display: flex; justify-content: center; }
/* Section intro centered */
.section-head { text-align: center; max-width: 800px; margin: 0 auto 16px; }
.section-head .section-title { margin-left: auto; margin-right: auto; max-width: none; }
.section-head .section-lead { margin-left: auto; margin-right: auto; }
/* Gradient stroke text helper */
.txt-grad-yellow, .txt-grad-blue {
display: inline-block;
padding: 0.05em 0.05em 0.18em;
margin: 0 -0.05em -0.18em;
line-height: 1.15;
}
.txt-grad-yellow {
background-image: linear-gradient(135deg, #EAC105, #007867) !important;
background-color: transparent !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
.txt-grad-blue {
background-image: linear-gradient(135deg, #00AFB9, #005772) !important;
background-color: transparent !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
/* Number stats */
.stat-row {
margin-top: 80px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
padding: 36px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat-row .stat {
text-align: center;
}
.stat-row .stat strong {
display: block;
font-size: clamp(40px, 5vw, 64px);
font-weight: 800;
letter-spacing: -0.03em;
background: linear-gradient(135deg, var(--ink), var(--ink-3));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-row .stat span { font-size: 13.5px; color: var(--ink-3); display: block; margin-top: 4px; }
/* Selection */
::selection { background: var(--yellow); color: #1a1505; }
/* Spacing helpers */
.mt-4 { margin-top: 32px; }
/* Light-theme text contrast fixes */
[data-theme="light"] {
--ink: #0a0c1a;
--ink-2: #2a2f44;
--ink-3: #4a5068;
}
[data-theme="light"] .section-lead,
[data-theme="light"] .hero-sub,
[data-theme="light"] .lead,
[data-theme="light"] p { color: var(--ink-2); }
[data-theme="light"] .footer p,
[data-theme="light"] .footer a { color: #2a2f44; }
[data-theme="light"] .nav-link { color: #2a2f44; }
[data-theme="light"] .marquee-item { color: #4a5068; }
[data-theme="light"] .stat span,
[data-theme="light"] .section-eyebrow { color: #4a5068; }
[data-theme="light"] .reel .meta,
[data-theme="light"] .reel .meta .name,
[data-theme="light"] .reel .meta .sub { color: #fff; }
/* Hover gradient on flow numbers */
.flow-step .num {
background: var(--ink-3);
-webkit-background-clip: text; background-clip: text;
color: transparent;
transition: background .35s;
display: inline-block;
}
.flow-step:hover .num {
background: linear-gradient(135deg, #EAC105, #00AFB9, #007867);
-webkit-background-clip: text; background-clip: text;
}
/* === AGGRESSIVE LIGHT-THEME TEXT FIX === */
[data-theme="light"] {
--ink: #0a0c1a !important;
--ink-2: #1a1f33 !important;
--ink-3: #3a4055 !important;
--line: rgba(10,12,26,0.12) !important;
--glass: rgba(255,255,255,0.7) !important;
}
[data-theme="light"] body,
[data-theme="light"] p,
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3,
[data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6,
[data-theme="light"] span, [data-theme="light"] li, [data-theme="light"] a,
[data-theme="light"] .lead, [data-theme="light"] .section-lead,
[data-theme="light"] .hero-sub, [data-theme="light"] .marquee-item,
[data-theme="light"] .nav-link, [data-theme="light"] .footer p,
[data-theme="light"] .footer a, [data-theme="light"] .stat span,
[data-theme="light"] .stat strong, [data-theme="light"] .section-eyebrow,
[data-theme="light"] .footer-col a, [data-theme="light"] .footer-col h6,
[data-theme="light"] .footer-bottom, [data-theme="light"] .pillar-card p,
[data-theme="light"] .pillar-card ul li, [data-theme="light"] .level p,
[data-theme="light"] .xminder .tag, [data-theme="light"] .s-step p,
[data-theme="light"] .s-step h5, [data-theme="light"] .s-step .n,
[data-theme="light"] .b p, [data-theme="light"] .b h4,
[data-theme="light"] .v p, [data-theme="light"] .v h5,
[data-theme="light"] .tcard p, [data-theme="light"] .tcard .who .name,
[data-theme="light"] .tcard .who .role, [data-theme="light"] .person p,
[data-theme="light"] .person h5, [data-theme="light"] .person .role,
[data-theme="light"] .pillar p, [data-theme="light"] .pillar h3,
[data-theme="light"] .experience p, [data-theme="light"] .experience h4,
[data-theme="light"] .experience .mentor .name,
[data-theme="light"] .experience .mentor .role,
[data-theme="light"] .flow-step p, [data-theme="light"] .flow-step h4,
[data-theme="light"] .dir-card p, [data-theme="light"] .dir-card .features li,
[data-theme="light"] .glass-card, [data-theme="light"] .glass-card *,
[data-theme="light"] .cta-band p, [data-theme="light"] .big-quote {
color: #1a1f33 !important;
}
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3,
[data-theme="light"] h4, [data-theme="light"] h5,
[data-theme="light"] .stat strong, [data-theme="light"] .nav-logo,
[data-theme="light"] .pillar-card h4, [data-theme="light"] .level h4,
[data-theme="light"] .xminder .name, [data-theme="light"] .b h4,
[data-theme="light"] .v h5 {
color: #0a0c1a !important;
}
[data-theme="light"] .reel,
[data-theme="light"] .reel * { color: #fff !important; }
[data-theme="light"] .grad, [data-theme="light"] .txt-grad-yellow,
[data-theme="light"] .txt-grad-blue, [data-theme="light"] .experience-word {
color: transparent !important;
}
[data-theme="light"] .nav-cta { color: #1a1505 !important; }
[data-theme="light"] .btn-primary { color: #1a1505 !important; }
/* === FINAL HERO GRAD FIX === */
.hero h1 .grad, .hero h1 .italic, .cta-band h2 .grad,
[data-theme="light"] .hero h1 .grad, [data-theme="light"] .hero h1 .italic {
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
background-color: transparent !important;
font-family: 'Montserrat', sans-serif !important;
font-style: italic !important;
font-weight: 600 !important;
}
.hero h1 .grad, .cta-band h2 .grad {
background-image: linear-gradient(120deg, #EAC105 0%, #007867 35%, #00AFB9 60%, #005772 100%) !important;
}
/* === Universal card rounding pass === */
.b, .pillar, .pillar-card, .person, .tcard, .experience, .level, .reel,
.xminder, .glass-card, .flow-step, .v, .s-step, .exp-card, .m-card,
.cta-block, .cta-band, .dir-card, .topbar, .feed > *, .iphone .screen,
.macbook, .macbook .screen {
border-radius: var(--radius-lg) !important;
}
.chip, .pill, .marquee-track > * { border-radius: 999px !important; }
.b.span-2 { border-radius: var(--radius) !important; }
.cta-band { border-radius: var(--radius-lg) !important; }
.flow-step, .level { border-radius: var(--radius) !important; }
/* === HERO SPLIT (2-col with phone mockup) === */
.hero-split { padding: 140px 0 100px; overflow: visible; }
.hero-split .hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: 80px;
align-items: center;
}
.hero-split .hero-left { min-width: 0; }
.hero-split h1 { font-size: clamp(40px, 5.4vw, 84px); margin-top: 28px; }
.hero-split .hero-sub { margin-top: 24px; font-size: 17px; max-width: 540px; }
.hero-split .hero-actions { margin-top: 32px; }
.hero-split .hero-meta { margin-top: 44px; gap: 36px; }
.hero-split .hero-meta .stat strong { font-size: 22px; }
.hero-split .hero-meta .stat span { font-size: 11.5px; }
.hero-social {
margin-top: 28px;
display: flex;
align-items: center;
gap: 16px;
}
.hero-social .avatar-stack { display: flex; }
.hero-social .av {
width: 38px; height: 38px;
border-radius: 50%;
border: 2px solid var(--bg);
margin-left: -10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.hero-social .av:first-child { margin-left: 0; }
.hero-social .meta { display: flex; flex-direction: column; line-height: 1.3; }
.hero-social .meta strong { font-size: 15px; font-weight: 700; color: var(--ink-1); }
.hero-social .meta span { font-size: 12px; color: var(--ink-3); }
/* Phone mockup */
.hero-right {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 640px;
}
.hero-phone {
position: relative;
width: 320px;
height: 640px;
border-radius: 48px;
background: linear-gradient(180deg, #15110a 0%, #0a0805 100%);
padding: 12px;
box-shadow:
0 60px 120px rgba(0,0,0,0.6),
0 20px 40px rgba(234,193,5,0.15),
inset 0 0 0 1px rgba(255,255,255,0.08);
z-index: 2;
}
.hero-phone-screen {
width: 100%; height: 100%;
border-radius: 38px;
background: linear-gradient(180deg, #ffffff 0%, #f6f7fa 100%);
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
.hero-phone-glow {
position: absolute;
inset: -80px;
background: radial-gradient(circle at 50% 40%, rgba(234,193,5,0.25), transparent 60%);
filter: blur(40px);
z-index: -1;
pointer-events: none;
}
.phone-status {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 22px 8px;
font-size: 13px; font-weight: 700; color: var(--ink-1);
}
.phone-status .dots { display: flex; gap: 3px; }
.phone-status .dots i {
width: 4px; height: 4px; border-radius: 50%;
background: var(--ink-1); opacity: 0.7;
}
.phone-head {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 22px 14px;
}
.phone-head .title {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-size: 28px;
color: var(--ink-1);
}
.phone-head .bell {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
display: grid; place-items: center;
font-size: 14px;
}
.phone-tabs {
display: flex; gap: 8px;
padding: 0 22px 12px;
font-size: 12px; font-weight: 600;
color: var(--ink-3);
overflow: hidden;
}
.phone-tabs span { padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.phone-tabs .on {
background: rgba(234,193,5,0.18);
color: var(--yellow);
}
.phone-card {
margin: 0 18px 12px;
border-radius: 20px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
flex-shrink: 0;
}
.phone-card-img {
position: relative;
height: 130px;
padding: 14px;
display: flex; flex-direction: column; justify-content: space-between;
}
.phone-card-img.mini { height: 90px; }
.phone-card-img .cat {
font-size: 11px; font-weight: 700;
color: rgba(255,255,255,0.85);
line-height: 1.3;
letter-spacing: 0.02em;
}
.phone-card-img .bookmark {
align-self: flex-end;
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(0,0,0,0.4);
display: grid; place-items: center;
font-size: 11px; color: white;
}
.phone-card-body { padding: 14px; }
.phone-card-body .row {
display: flex; justify-content: space-between; gap: 8px;
}
.phone-card-body .name {
font-size: 13px; font-weight: 700;
color: var(--ink-1);
display: flex; align-items: center; gap: 5px;
}
.phone-card-body .check {
width: 14px; height: 14px;
border-radius: 50%;
background: var(--teal);
color: #001;
font-size: 9px;
display: grid; place-items: center;
font-weight: 900;
}
.phone-card-body .sub {
font-size: 11px; color: var(--ink-3);
margin-top: 2px; line-height: 1.35;
}
.phone-card-body .reactions {
display: flex; flex-direction: column;
gap: 4px;
font-size: 10px; color: var(--ink-3);
text-align: right;
white-space: nowrap;
}
.phone-card-body .years {
margin-top: 10px;
font-size: 11px; color: var(--ink-3);
}
.phone-cta {
margin-top: 10px;
width: 100%;
padding: 10px;
border: none;
border-radius: 999px;
background: linear-gradient(135deg, var(--yellow), var(--green));
color: #001;
font-weight: 700;
font-size: 12px;
cursor: pointer;
}
.phone-card.mini { margin-top: -4px; }
.phone-tabbar {
margin-top: auto;
display: flex; justify-content: space-around; align-items: center;
padding: 12px 18px 18px;
border-top: 1px solid rgba(255,255,255,0.05);
background: rgba(0,0,0,0.3);
}
.phone-tabbar .t {
display: flex; flex-direction: column; align-items: center; gap: 2px;
font-size: 16px; color: var(--ink-3);
}
.phone-tabbar .t small { font-size: 9px; font-weight: 600; }
.phone-tabbar .t.on { color: var(--yellow); }
.phone-tabbar .t.plus {
width: 42px; height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, var(--yellow), var(--green));
color: #001;
font-weight: 800; font-size: 22px;
display: grid; place-items: center;
}
/* Floating cards next to phone */
.hero-float-card {
position: absolute;
background: rgba(20,16,8,0.85);
backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
padding: 14px 16px;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
z-index: 3;
width: 220px;
animation: heroFloat 6s ease-in-out infinite;
}
.hero-float-card.top {
top: 40px;
left: -20px;
animation-delay: -2s;
}
.hero-float-card.bot {
bottom: 60px;
right: -30px;
animation-delay: -4s;
}
.hero-float-card .row {
display: flex; align-items: center; gap: 10px;
}
.hero-float-card .ic {
width: 34px; height: 34px;
border-radius: 12px;
flex-shrink: 0;
}
.hero-float-card .ttl {
font-size: 12.5px; font-weight: 700; color: var(--ink-1);
line-height: 1.3;
}
.hero-float-card .sub {
font-size: 10.5px; color: var(--ink-3);
margin-top: 2px;
line-height: 1.35;
}
.hero-float-card .quote {
margin-top: 10px;
padding: 10px;
background: rgba(255,255,255,0.04);
border-radius: 10px;
font-size: 11px;
color: var(--ink-2);
line-height: 1.45;
}
.hero-float-card .lbl {
font-size: 10px;
color: var(--green);
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
display: flex; align-items: center; gap: 6px;
}
.hero-float-card .lbl::before {
content: '';
width: 7px; height: 7px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 10px var(--green);
}
.hero-float-card .price {
margin-top: 10px;
font-size: 18px; font-weight: 800;
background: linear-gradient(135deg, var(--yellow), var(--teal));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@keyframes heroFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@media (max-width: 1024px) {
.hero-split .hero-grid {
grid-template-columns: 1fr;
gap: 60px;
}
.hero-right { min-height: 580px; }
.hero-float-card.top { left: 0; top: 0; }
.hero-float-card.bot { right: 0; bottom: 20px; }
}
@media (max-width: 640px) {
.hero-phone { width: 280px; height: 560px; }
.hero-float-card { width: 180px; padding: 12px; }
}
/* ====================================================================
GLOBAL ROUND EDGES SYSTEM — NUCLEAR OPTION
Every single visible element on the site gets rounded corners.
==================================================================== */
/* THE BIG ONE: every visible element on the page rounds, period. */
*, *::before, *::after {
border-radius: 18px;
}
/* Reset to 0 only for elements that should never round (text, lines, etc.) */
html, body, head, meta, link, script, style, title,
br, hr, wbr, p, span, em, strong, i, b, u, s, small, sub, sup,
h1, h2, h3, h4, h5, h6,
ul, ol, li, dl, dt, dd,
table, thead, tbody, tr, th, td,
label, legend, option,
path, circle, rect, line, polygon, polyline, g, defs, mask, clipPath,
text, tspan, use, symbol,
.section-title, .section-lead, .section-eyebrow:not(.pill),
.experience-word, .big-quote, .grad, .italic, .txt-grad-yellow, .txt-grad-blue,
.hero h1, .hero h1 *, .hero-sub,
.aurora, .grain,
.marquee, .marquee-track {
border-radius: 0;
}
.cursor-glass, .cursor-dot { border-radius: 50% !important; }
/* Now bring back stronger radii for real surfaces */
/* MAXIMUM SPECIFICITY ROUNDING — cards, blocks, sections */
html body .b, html body .pillar, html body .pillar-card,
html body .person, html body .tcard, html body .experience,
html body .level, html body .reel, html body .xminder,
html body .glass-card, html body .flow-step, html body .v,
html body .s-step, html body .exp-card, html body .m-card,
html body .cta-block, html body .cta-band, html body .dir-card,
html body .feature, html body .feature-card,
html body .stat-card, html body .info-card, html body .testimonial,
html body .quote-card, html body .pricing-card,
html body .card, html body [class*="card"]:not([class*="card-img"]):not(.cards),
html body section.section > .container > .b,
html body .grid-item, html body .tile, html body .panel,
html body .footer-col, html body .surface, html body .block-lg {
border-radius: 36px !important;
}
html body .b.span-2, html body .b.span-3 { border-radius: 36px !important; }
html body .topbar, html body .nav, html body .nav-pill {
border-radius: 999px !important;
}
html body .iphone, html body .phone, html body .hero-phone {
border-radius: 56px !important;
}
html body .iphone .screen, html body .phone .screen, html body .hero-phone-screen {
border-radius: 44px !important;
}
html body .macbook, html body .laptop { border-radius: 28px !important; }
html body .macbook .screen, html body .laptop .screen { border-radius: 18px !important; }
html body .pill, html body .chip, html body .tag, html body .badge,
html body .btn, html body .nav-cta, html body .nav-link, html body .store-btn,
html body .marquee-item, html body .filter, html body .toggle {
border-radius: 999px !important;
}
html body .av, html body .avatar, html body .profile-pic,
html body .icon-circle, html body .reel-img, html body .person .img {
border-radius: 50% !important;
}
/* Inner image regions */
html body .phone-card-img, html body .card-img, html body .feature-img,
html body .tcard .who img, html body .xminder img:not(.logo-img):not(.footer-logo-img):not([alt*="logo" i]) {
border-radius: 24px !important;
}
/* Avatar squares like C / A / M / I — make them VERY rounded squares */
html body .person .avatar-square, html body .xminder .avatar-square,
html body [class*="avatar"][class*="square"],
html body .person .av-big, html body .xminder .av-big {
border-radius: 36px !important;
}
:root {
--r-xs: 14px;
--r-sm: 18px;
--r-md: 24px;
--r-lg: 36px;
--r-xl: 48px;
--r-pill: 999px;
}
/* Default rounding for ANY block-ish surface */
section, article, aside, header, footer, nav, main, figure,
div, form, fieldset, dialog,
.container, .panel, .card, .surface, .block, .box, .wrap,
.modal, .popup, .overlay, .toast, .banner, .notice, .alert,
.dropdown, .menu, .tooltip,
.thumb, .thumbnail, .preview, .frame,
.media, .image, .picture, .video, .video-wrap, .player,
.grid, .grid-item, .col, .row,
.testimonial, .quote-card, .feature, .feature-card,
.pricing, .pricing-card, .price-card,
.stat-card, .stats, .metric,
.icon-bg, .icon-wrap, .icon-circle,
.cta, .cta-block, .cta-band, .cta-card,
.reel, .reel-card, .reel-wrap,
.app-screen, .screen, .display,
.list-card, .info-card,
.tag-wrap, .badge-wrap {
border-radius: var(--r-md);
}
/* Larger surfaces */
.section, .hero, .full-section, .panel-lg, .container-lg,
.cta-band, .cta-block, .pricing-card, .feature-card,
.reel, .testimonial, .video-wrap, .player, .frame,
.macbook, .iphone, .device, .phone, .laptop,
.experience, .pillar-card, .dir-card, .b, .v,
.flow-step, .level, .person, .tcard, .xminder,
.glass-card, .pillar, .m-card, .exp-card, .s-step {
border-radius: var(--r-lg);
}
/* Small elements */
input, textarea, select, button:not(.pill):not(.chip):not(.tag):not(.btn-pill),
.input, .field, .select, .checkbox-wrap, .radio-wrap,
.search, .search-bar, .field-wrap,
.tab, .tab-item, .nav-item,
.icon, .ic, .glyph,
.av, .avatar, .profile-pic,
.kbd, .key, .code-inline,
.divider, .separator-card {
border-radius: var(--r-sm);
}
/* Pills, chips, tags, badges — fully rounded */
.pill, .chip, .tag, .badge, .label-pill, .btn-pill,
.btn, .button, .cta-btn, .nav-cta, .filter,
.toggle, .switch, .indicator, .dot-label,
.marquee-track > *, .avatar-circle, .av,
.icon-circle, .circle-btn {
border-radius: var(--r-pill);
}
/* Avatars and circular media */
.avatar, .av, .profile-pic, .user-pic,
.icon-circle, .circle, .dot {
border-radius: 50%;
}
/* Images, videos, iframes — never sharp */
img, video, iframe, canvas, picture, svg.illustration,
.media img, .media video, figure img {
border-radius: var(--r-sm);
}
.hero img, .feature img, .card img, .pillar img, .reel img,
.testimonial img, .person img, .xminder img,
.macbook img, .iphone img, .device img, .frame img {
border-radius: var(--r-sm);
}
/* Logos stay un-rounded - they have their own shape */
.logo img, .nav-logo img, .footer-logo-img,
img[alt*="logo" i], img[src*="logo" i],
img[alt*="Exminds"] {
border-radius: 0 !important;
}
/* Phone & device mockups */
.iphone, .phone, .hero-phone {
border-radius: 48px !important;
}
.iphone .screen, .phone .screen, .hero-phone-screen {
border-radius: 38px !important;
}
.macbook, .laptop {
border-radius: 28px !important;
}
.macbook .screen, .laptop .screen {
border-radius: 18px !important;
}
/* Navigation & topbar */
.topbar, .nav, .navbar, .nav-pill, .nav-wrap {
border-radius: var(--r-pill);
}
.footer, .footer-wrap {
border-radius: var(--r-lg) var(--r-lg) 0 0;
}
/* Floating cards / glass cards */
.glass-card, .float-card, .hero-float-card,
.phone-card, .feed-card, .toast-card {
border-radius: var(--r-md) !important;
}
/* Inner image regions inside cards */
.phone-card-img, .card-img, .feature-img, .reel-img,
.thumb-img, .preview-img {
border-radius: var(--r-sm);
}
/* Make sure NOTHING with a visible border or background is sharp */
[class*="card"]:not([class*="card-img"]),
[class*="-box"], [class*="-block"]:not([class*="-blocked"]),
[class*="-panel"], [class*="-tile"], [class*="-cell"] {
border-radius: var(--r-md);
}
/* Hover states preserve curvature (kill any flat hover) */
*:hover, *:focus, *:active { border-radius: inherit; }
.btn:hover, .pill:hover, .chip:hover, .tag:hover,
.btn:focus, .pill:focus { border-radius: var(--r-pill) !important; }
/* Override anything that explicitly sets 0 except logos */
[style*="border-radius:0"]:not(.logo):not([alt*="logo" i]):not([class*="logo"]) {
border-radius: var(--r-sm) !important;
}
/* Final safety net — every direct child of rounds */
body > *:not(script):not(style):not(link):not(meta) {
/* keep position chrome but soften */
}
.section-eyebrow, .pill, .chip, .tag, .badge { border-radius: var(--r-pill) !important; }
/* ====================================================================
ELEGANCE PASS — refined editorial scale, more whitespace
==================================================================== */
html body .container { max-width: 1140px !important; padding-left: 64px !important; padding-right: 64px !important; }
html body .section { padding: 110px 0 !important; }
html body .hero { padding: 130px 0 80px !important; }
html body .hero-split { padding: 130px 0 80px !important; }
/* Typography — calmer, more editorial */
html body .hero h1 { font-size: clamp(34px, 4.6vw, 68px) !important; letter-spacing: -0.035em !important; line-height: 1.08 !important; }
html body .hero-split h1 { font-size: clamp(32px, 4vw, 60px) !important; line-height: 1.08 !important; }
html body .hero-sub, html body .hero-split .hero-sub { font-size: 16px !important; max-width: 480px !important; line-height: 1.55 !important; margin-top: 22px !important; }
html body .section-title { font-size: clamp(26px, 3.4vw, 46px) !important; letter-spacing: -0.025em !important; line-height: 1.12 !important; }
html body .section-lead { font-size: 16px !important; line-height: 1.55 !important; max-width: 56ch !important; }
html body .section-eyebrow { font-size: 11px !important; letter-spacing: 0.14em !important; }
html body .cta-band h2 { font-size: clamp(32px, 4.4vw, 60px) !important; letter-spacing: -0.03em !important; }
html body .cta-band p { font-size: 16px !important; max-width: 52ch !important; }
/* Section-head spacing */
html body .section-head { max-width: 720px !important; margin-bottom: 56px !important; }
/* Hero meta stats — calmer */
html body .hero-meta { gap: 28px !important; margin-top: 40px !important; }
html body .hero-meta .stat strong { font-size: 18px !important; }
html body .hero-meta .stat span { font-size: 11px !important; }
/* Cards — slightly tighter padding */
html body .b, html body .pillar, html body .pillar-card,
html body .person, html body .tcard, html body .v,
html body .flow-step, html body .level, html body .experience,
html body .feature, html body .feature-card { padding: 28px !important; }
html body .cta-band, html body .cta-block { padding: 56px !important; }
/* Buttons — refined */
html body .btn { padding: 13px 22px !important; font-size: 14px !important; }
html body .nav-cta { padding: 10px 18px !important; font-size: 13.5px !important; }
html body .nav-link { font-size: 13.5px !important; }
html body .store-btn { padding: 13px 22px !important; }
html body .store-btn .label strong { font-size: 14px !important; }
html body .store-btn .label small { font-size: 10px !important; }
/* MVV — smaller initial */
html body .pillar .num { font-size: clamp(56px, 7vw, 96px) !important; }
/* Footer — tighter */
html body .footer { padding-top: 80px !important; padding-bottom: 28px !important; }
/* Marquee — calmer */
html body .marquee { padding: 24px 0 !important; }
html body .marquee-item { font-size: 13px !important; padding: 0 22px !important; }
/* Experience cards / reels — less aggressive */
html body .experience h4, html body .reel h4, html body .pillar-card h4 {
font-size: 18px !important;
}
html body .experience p, html body .pillar-card p, html body .v p,
html body .person p, html body .tcard p { font-size: 14px !important; line-height: 1.55 !important; }
/* Phone mockup — slightly smaller in hero */
html body .hero-phone { transform: scale(0.92); transform-origin: center; }
html body .hero-right { min-height: 600px !important; }
/* Mobile tweaks remain unchanged */
@media (max-width: 1024px) {
html body .container { padding-left: 32px !important; padding-right: 32px !important; }
html body .section { padding: 80px 0 !important; }
html body .hero, html body .hero-split { padding: 100px 0 60px !important; }
html body .hero-phone { transform: scale(1); }
}
/* Pillar photo slot replaces the .num glyph */
.pillar { display: flex; flex-direction: column; }
.pillar .pillar-photo {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
margin-top: auto;
border-radius: 22px;
overflow: hidden;
background: rgba(0,0,0,0.04);
}
[data-theme="dark"] .pillar .pillar-photo { background: rgba(255,255,255,0.04); }
/* Nav store mini buttons — icon-only pills, premium glow */
.nav-store {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
padding: 0;
background: linear-gradient(135deg, #0a0c12 0%, #1a1f2e 100%);
color: #fff !important;
border-radius: 50% !important;
text-decoration: none;
margin-left: 6px;
transition: transform .25s, box-shadow .25s, background .25s;
border: 1px solid rgba(255,255,255,0.08);
position: relative;
}
.nav-store .ns-label { display: none; }
.nav-store:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0,212,200,0.25);
background: linear-gradient(135deg, #0a0c12 0%, #00AFB9 200%);
}
@media (max-width: 1080px) { .nav-store { display: none; } }
/* Hero stores row — under stats */
.hero-stores {
margin-top: 28px;
display: flex; gap: 12px; flex-wrap: wrap;
}
.hero-stores .store-btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 11px 20px !important;
background: #0a0c12;
color: #fff !important;
border-radius: 14px !important;
text-decoration: none;
border: 1px solid rgba(255,255,255,0.08);
transition: transform .2s, box-shadow .2s;
}
.hero-stores .store-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.22); }
.hero-stores .store-btn .label { display: flex; flex-direction: column; line-height: 1; text-align: left; }
.hero-stores .store-btn .label small { font-size: 9px; opacity: 0.85; letter-spacing: 0.04em; text-transform: uppercase; }
.hero-stores .store-btn .label strong { font-size: 14px; font-weight: 600; margin-top: 3px; letter-spacing: -0.01em; }
/* ====================================================================
STORE BUTTONS — definitive fix (App Store / Google Play)
Clean two-line label, no overlap, premium dark
==================================================================== */
/* Generic .store-btn used in hero, download section, anywhere */
html body .store-btn {
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
padding: 12px 22px !important;
background: #0a0c12 !important;
color: #fff !important;
border-radius: 14px !important;
text-decoration: none !important;
border: 1px solid rgba(255,255,255,0.08) !important;
min-height: 56px;
transition: transform .25s, box-shadow .25s, background .25s;
}
html body .store-btn:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(0,212,200,0.22) !important;
}
html body .store-btn svg { flex-shrink: 0; width: 26px !important; height: 26px !important; }
html body .store-btn .label {
display: flex !important;
flex-direction: column !important;
line-height: 1 !important;
text-align: left !important;
gap: 3px !important;
white-space: nowrap !important;
}
html body .store-btn .label small {
font-size: 9.5px !important;
font-weight: 500 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
opacity: 0.78 !important;
color: #fff !important;
line-height: 1 !important;
margin: 0 !important;
}
html body .store-btn .label strong {
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
color: #fff !important;
line-height: 1.1 !important;
margin: 0 !important;
display: block !important;
}
/* Hero stores row keeps wider buttons */
.hero-stores .store-btn { padding: 13px 24px !important; }
/* Nav store mini buttons — strict icon-only round pills */
html body .nav-store {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 38px !important;
height: 38px !important;
padding: 0 !important;
background: linear-gradient(135deg, #0a0c12 0%, #1a1f2e 100%) !important;
color: #fff !important;
border-radius: 50% !important;
text-decoration: none !important;
margin-left: 6px !important;
border: 1px solid rgba(255,255,255,0.08) !important;
transition: transform .25s, box-shadow .25s, background .25s !important;
overflow: hidden;
}
html body .nav-store .ns-label,
html body .nav-store small,
html body .nav-store strong { display: none !important; }
html body .nav-store svg { width: 18px !important; height: 18px !important; }
html body .nav-store:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0,212,200,0.3) !important;
}
@media (max-width: 1080px) { html body .nav-store { display: none !important; } }
/* ====== ACTIVE NAV LINK GRADIENT ====== */
html body .nav-link.active,
html body .nav-link.is-active {
position: relative;
color: #050609 !important;
background: linear-gradient(135deg, #EAC105 0%, #00d4c8 50%, #5BAFFF 100%) !important;
background-size: 200% 200% !important;
background-position: 0% 50% !important;
box-shadow: 0 8px 22px rgba(0,212,200,0.28), inset 0 1px 0 rgba(255,255,255,0.25) !important;
font-weight: 600 !important;
transition: background-position .8s ease !important;
}
html body .nav-link.active:hover,
html body .nav-link.is-active:hover {
background-position: 100% 50% !important;
color: #050609 !important;
}
[data-theme="light"] html body .nav-link.active,
[data-theme="light"] html body .nav-link.is-active {
color: #050609 !important;
}
/* ====== GLOBAL MONTSERRAT + TIGHTER SCALE ====== */
html, body, html body * {
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
/* Keep serif italic spans visually italic in Montserrat */
html body .italic, html body .grad, html body em, html body i,
html body [style*="Instrument Serif"], html body [style*="instrument serif"] {
font-style: italic !important;
font-weight: 500 !important;
}
/* Tighten hero / section / card type so things fit */
html body h1, html body .hero h1, html body .pricing-hero h1 {
font-size: clamp(36px, 5.2vw, 72px) !important;
letter-spacing: -0.03em !important;
line-height: 1.05 !important;
}
html body h2 { font-size: clamp(26px, 3.4vw, 42px) !important; letter-spacing: -0.02em !important; }
html body h3 { font-size: clamp(18px, 2vw, 22px) !important; }
html body .hero-sub, html body .lead, html body .section-lead, html body .pricing-hero p {
font-size: 16px !important; line-height: 1.55 !important;
}
html body p { font-size: 14.5px; line-height: 1.55; }
/* Pricing page tighter */
html body .plan-name { font-size: 18px !important; }
html body .plan-blurb { font-size: 12.5px !important; min-height: 36px !important; }
html body .plan-price .amount { font-size: 36px !important; }
html body .plan-price .currency { font-size: 18px !important; }
html body .plan-price .custom { font-size: 20px !important; }
html body .plan-features li { font-size: 12.5px !important; line-height: 1.45 !important; }
html body .plan-tag { font-size: 11px !important; }
html body .plan-cta { font-size: 12.5px !important; padding: 11px 16px !important; }
html body .plan-card { padding: 26px 22px 22px !important; border-radius: 24px !important; }
html body .plan-badge { font-size: 9.5px !important; padding: 4px 9px !important; }
html body .pricing-hero { padding: 150px 0 40px !important; }
html body .plans { padding: 60px 0 90px !important; }
html body .pricing-faq h2 { text-align: center !important; }
html body .faq-item summary { font-size: 14px !important; }
html body .faq-item p { font-size: 13px !important; }
html body .dir-toggle button { padding: 12px 24px !important; font-size: 13.5px !important; }
html body .compare-strip h3 { font-size: 17px !important; }
html body .compare-strip p { font-size: 13px !important; }
html body .compare-strip .stat-num { font-size: 30px !important; }
/* Contact tighter */
html body .contact-section { padding: 80px 0 100px !important; }
html body .contact-aside h2 { font-size: clamp(26px, 3.2vw, 38px) !important; }
html body .contact-aside .lead { font-size: 14px !important; }
html body .contact-meta-item strong { font-size: 13px !important; }
html body .contact-meta-item small { font-size: 9.5px !important; }
html body .contact-form-card { padding: 26px !important; border-radius: 24px !important; }
html body .role-tab { font-size: 12.5px !important; padding: 9px 8px !important; }
html body .contact-terms span { font-size: 12px !important; }
html body .contact-submit { font-size: 13px !important; padding: 12px 24px !important; }
html body .contact-submit-row small { font-size: 11px !important; }
/* ====================================================================
ABOUT TEASER — redesigned homepage section (Exminds palette)
==================================================================== */
.about-teaser { padding: 120px 0; }
.about-teaser .at-grid {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: 80px;
align-items: start;
padding: 64px;
border-radius: var(--radius-lg);
background:
radial-gradient(circle at 0% 0%, rgba(234,193,5,0.06) 0%, transparent 50%),
radial-gradient(circle at 100% 100%, rgba(0,87,114,0.10) 0%, transparent 55%),
linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid var(--line);
position: relative;
overflow: hidden;
}
.about-teaser .at-grid::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(234,193,5,0.30) 0%, rgba(0,175,185,0.20) 35%, rgba(0,120,103,0.18) 65%, rgba(0,87,114,0.30) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0.55;
}
@media (max-width: 1000px) {
.about-teaser .at-grid { grid-template-columns: 1fr; gap: 56px; padding: 40px; }
}
/* Intro column */
.about-teaser .at-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 8px 14px 8px 12px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--line);
border-radius: 999px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-2);
}
.about-teaser .at-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 12px var(--teal);
flex-shrink: 0;
}
.about-teaser .at-rule {
width: 30px;
height: 1px;
background: linear-gradient(90deg, var(--teal), transparent);
}
.about-teaser .at-idx { color: var(--ink-3); letter-spacing: 0.1em; font-weight: 600; }
.about-teaser .at-title {
margin: 24px 0 0;
font-size: clamp(34px, 4vw, 56px) !important;
font-weight: 800;
line-height: 1.04;
letter-spacing: -0.03em;
color: var(--ink);
}
.about-teaser .at-title .at-grad {
background: linear-gradient(120deg, #EAC105 0%, #007867 35%, #00AFB9 65%, #005772 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-style: italic;
font-weight: 600;
display: inline-block;
padding: 0.05em 0.05em 0.18em;
margin: 0 -0.05em -0.18em;
line-height: 1.15;
}
.about-teaser .at-lead {
margin: 24px 0 0;
max-width: 44ch;
font-size: 16px;
line-height: 1.6;
color: var(--ink-2);
}
.about-teaser .at-cta {
margin-top: 32px;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 22px;
border-radius: 999px;
background: linear-gradient(135deg, #EAC105 0%, #00AFB9 100%);
color: #0a0c12;
font-weight: 700;
font-size: 14px;
text-decoration: none;
letter-spacing: -0.005em;
box-shadow: 0 10px 30px rgba(0,175,185,0.25), inset 0 1px 0 rgba(255,255,255,0.35);
transition: transform .25s, box-shadow .25s;
}
.about-teaser .at-cta:hover {
transform: translateY(-2px);
box-shadow: 0 16px 40px rgba(0,175,185,0.40), inset 0 1px 0 rgba(255,255,255,0.35);
}
.about-teaser .at-cta svg { transition: transform .25s; }
.about-teaser .at-cta:hover svg { transform: translateX(4px); }
.about-teaser .at-team {
margin-top: 36px;
padding-top: 28px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
gap: 16px;
}
.about-teaser .at-avatars { display: flex; }
.about-teaser .at-av {
width: 40px; height: 40px;
border-radius: 50%;
background: color-mix(in oklab, var(--c, var(--teal)) 80%, #0a0c12 20%);
border: 2px solid var(--bg-0);
margin-left: -10px;
position: relative;
display: inline-grid;
place-items: center;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 14px;
color: #fff;
letter-spacing: 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.about-teaser .at-av::after {
content: attr(data-init);
color: #fff;
}
.about-teaser .at-av:first-child { margin-left: 0; }
.about-teaser .at-team-meta { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.about-teaser .at-team-meta strong { font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.005em; }
.about-teaser .at-team-meta span { font-size: 12px; color: var(--ink-3); }
/* Pillars column */
.about-teaser .at-pillars {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
}
.about-teaser .at-pillar {
position: relative;
display: grid;
grid-template-columns: 56px 4px 1fr;
gap: 20px;
align-items: start;
padding: 22px 24px 22px 20px;
background: rgba(255,255,255,0.03);
border: 1px solid var(--line);
border-radius: 22px;
transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, background .35s;
}
.about-teaser .at-pillar:hover {
transform: translateX(4px);
border-color: color-mix(in oklab, var(--accent) 45%, transparent);
background: var(--accent-soft);
}
.about-teaser .at-num {
font-family: 'Montserrat', sans-serif;
font-style: italic;
font-weight: 500;
font-size: 32px !important;
line-height: 1;
color: var(--accent);
letter-spacing: -0.02em;
padding-top: 2px;
}
.about-teaser .at-bar {
width: 4px;
height: 100%;
min-height: 56px;
border-radius: 999px;
background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 20%, transparent));
opacity: 0.85;
}
.about-teaser .at-body { min-width: 0; }
.about-teaser .at-label {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
background: var(--accent-soft);
border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}
.about-teaser .at-pillar h3 {
margin: 12px 0 6px;
font-size: 19px !important;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--ink);
line-height: 1.25;
}
.about-teaser .at-pillar p {
margin: 0;
font-size: 13.5px;
line-height: 1.55;
color: var(--ink-3);
max-width: 50ch;
}
/* Day view (light theme) overrides for about-teaser */
[data-theme="light"] .about-teaser .at-grid {
background:
radial-gradient(circle at 0% 0%, rgba(234,193,5,0.10) 0%, transparent 50%),
radial-gradient(circle at 100% 100%, rgba(0,87,114,0.10) 0%, transparent 55%),
linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
border-color: rgba(10,12,26,0.08);
}
[data-theme="light"] .about-teaser .at-eyebrow {
background: rgba(255,255,255,0.7);
border-color: rgba(10,12,26,0.10);
color: #2a2f44 !important;
}
[data-theme="light"] .about-teaser .at-idx { color: #6b7390 !important; }
[data-theme="light"] .about-teaser .at-pillar {
background: rgba(255,255,255,0.55);
border-color: rgba(10,12,26,0.08);
}
[data-theme="light"] .about-teaser .at-pillar:hover {
background: var(--accent-soft);
border-color: color-mix(in oklab, var(--accent) 40%, transparent);
}
[data-theme="light"] .about-teaser .at-team-meta strong { color: #0a0c1a !important; }
[data-theme="light"] .about-teaser .at-team-meta span { color: #4a5068 !important; }
[data-theme="light"] .about-teaser .at-team { border-top-color: rgba(10,12,26,0.10); }
[data-theme="light"] .about-teaser .at-av { border-color: #f5f4ee; }
[data-theme="light"] .about-teaser .at-pillar p { color: #4a5068 !important; }
[data-theme="light"] .about-teaser .at-cta { color: #0a0c12 !important; }
/* ====================================================================
GLOBAL DAY VIEW (light theme) — element coverage sweep
Fixes contrast & surface tints for every block on the homepage
==================================================================== */
[data-theme="light"] .cta-block,
[data-theme="light"] .about-teaser-dark,
[data-theme="light"] .dir-card,
[data-theme="light"] .experience,
[data-theme="light"] .flow-step,
[data-theme="light"] .b,
[data-theme="light"] .v,
[data-theme="light"] .pillar,
[data-theme="light"] .pillar-card,
[data-theme="light"] .tcard,
[data-theme="light"] .level,
[data-theme="light"] .person,
[data-theme="light"] .philosophy .card,
[data-theme="light"] .glass-card {
background: rgba(255,255,255,0.7) !important;
border-color: rgba(10,12,26,0.08) !important;
box-shadow: 0 8px 28px rgba(20,26,33,0.06) !important;
}
[data-theme="light"] .pillar .badge,
[data-theme="light"] .level .badge {
background: rgba(0,87,114,0.10) !important;
color: #005772 !important;
border: 1px solid rgba(0,87,114,0.18) !important;
}
[data-theme="light"] .dir-card.biz .label { background: rgba(0,87,114,0.10) !important; color: #005772 !important; }
[data-theme="light"] .dir-card.ind .label { background: rgba(234,193,5,0.18) !important; color: #8a6f00 !important; }
[data-theme="light"] .dir-card .features li {
background: rgba(255,255,255,0.55) !important;
border-color: rgba(10,12,26,0.08) !important;
color: #1a1f33 !important;
}
[data-theme="light"] .dir-card .arrow {
background: rgba(10,12,26,0.06) !important;
border-color: rgba(10,12,26,0.10) !important;
color: #0a0c1a !important;
}
[data-theme="light"] .nav {
background: rgba(255,255,255,0.7) !important;
border-color: rgba(10,12,26,0.08) !important;
box-shadow: 0 10px 30px rgba(20,26,33,0.08) !important;
}
[data-theme="light"] .hero-eyebrow {
background: rgba(255,255,255,0.7) !important;
border-color: rgba(10,12,26,0.10) !important;
color: #2a2f44 !important;
}
[data-theme="light"] .section-eyebrow { color: #00807a !important; }
[data-theme="light"] .stat-row { border-color: rgba(10,12,26,0.10) !important; }
[data-theme="light"] .stat-row .stat strong {
background: linear-gradient(135deg, #0a0c1a, #4a5068) !important;
-webkit-background-clip: text !important; background-clip: text !important;
color: transparent !important;
}
[data-theme="light"] .tabs {
background: rgba(255,255,255,0.7) !important;
border-color: rgba(10,12,26,0.10) !important;
}
[data-theme="light"] .tabs button { color: #4a5068 !important; }
[data-theme="light"] .tabs button.on { background: #0a0c1a !important; color: #f5f4ee !important; }
[data-theme="light"] .btn-glass {
background: rgba(255,255,255,0.7) !important;
border-color: rgba(10,12,26,0.10) !important;
color: #0a0c1a !important;
}
[data-theme="light"] .marquee::before {
background: linear-gradient(90deg, var(--bg-0), transparent) !important;
}
[data-theme="light"] .marquee::after {
background: linear-gradient(-90deg, var(--bg-0), transparent) !important;
}
[data-theme="light"] .marquee { border-top-color: rgba(10,12,26,0.10) !important; border-bottom-color: rgba(10,12,26,0.10) !important; }
[data-theme="light"] .footer { border-top-color: rgba(10,12,26,0.10) !important; }
[data-theme="light"] .footer-bottom { border-top-color: rgba(10,12,26,0.10) !important; }
[data-theme="light"] .social {
background: rgba(255,255,255,0.7) !important;
border-color: rgba(10,12,26,0.10) !important;
color: #1a1f33 !important;
}
[data-theme="light"] .social:hover { background: #0a0c1a !important; color: #f5f4ee !important; border-color: #0a0c1a !important; }
[data-theme="light"] .iphone, [data-theme="light"] .macbook {
box-shadow: 0 30px 80px rgba(20,26,33,0.18) !important;
}
[data-theme="light"] .macbook + .stand { box-shadow: 0 30px 60px rgba(20,26,33,0.14) !important; }
[data-theme="light"] .cta-band {
background:
radial-gradient(circle at 20% 50%, rgba(234,193,5,0.22) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(0,175,185,0.22) 0%, transparent 50%),
linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.5)) !important;
border-color: rgba(10,12,26,0.10) !important;
}
[data-theme="light"] .store-btn {
background: #0a0c12 !important;
color: #fff !important;
border-color: transparent !important;
}
[data-theme="light"] .store-btn .label small,
[data-theme="light"] .store-btn .label strong { color: #fff !important; }
[data-theme="light"] .nav-cta { color: #1a1505 !important; }
[data-theme="light"] .btn-primary { color: #1a1505 !important; }
[data-theme="light"] .flow-step .num { background: #6b7390 !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
[data-theme="light"] .flow-step:hover .num {
background: linear-gradient(135deg, #EAC105, #00AFB9, #007867) !important;
-webkit-background-clip: text !important; background-clip: text !important;
}
[data-theme="light"] .mvv .pillar .num {
background: linear-gradient(135deg, #0a0c1a 0%, #6b7390 100%) !important;
-webkit-background-clip: text !important; background-clip: text !important;
color: transparent !important;
}
[data-theme="light"] .testimonials .tcard p::before { color: #c79c00 !important; }
[data-theme="light"] .hero-meta .stat strong,
[data-theme="light"] .hero-meta .stat span { color: #0a0c1a !important; }
[data-theme="light"] .app-ui, [data-theme="light"] .app-mobile {
/* device screens stay dark — they show the product UI */
color: #fff !important;
}
[data-theme="light"] .app-ui *, [data-theme="light"] .app-mobile * { color: inherit !important; }
[data-theme="light"] .app-ui .topbar .nav-bits,
[data-theme="light"] .app-ui .side .item,
[data-theme="light"] .app-mobile .m-card .info .role,
[data-theme="light"] .app-ui .exp-card .label,
[data-theme="light"] .app-ui .exp-card .meta,
[data-theme="light"] .app-mobile h6 .small { color: rgba(255,255,255,0.6) !important; }
[data-theme="light"] .app-ui .side .item.active,
[data-theme="light"] .app-mobile .m-card .info .price,
[data-theme="light"] .app-ui .exp-card .meta .price,
[data-theme="light"] .app-mobile .chip.on { color: #1a1505 !important; }
[data-theme="light"] .app-mobile .chip { background: rgba(255,255,255,0.08) !important; color: #fff !important; }
[data-theme="light"] .app-mobile .m-card .info .tags span { color: #00AFB9 !important; }
[data-theme="light"] .experience .price-tag {
background: rgba(255,255,255,0.85) !important;
border-color: rgba(10,12,26,0.10) !important;
color: #0a0c1a !important;
}
[data-theme="light"] .experience .photo .price-tag { color: #0a0c1a !important; }
[data-theme="light"] .hero-floats .glass-card {
background: rgba(255,255,255,0.75) !important;
border-color: rgba(10,12,26,0.10) !important;
box-shadow: 0 20px 60px rgba(20,26,33,0.10) !important;
}
/* Business CTA hover — deeper card + green gradient wash */
.cta-block.biz {
position: relative;
isolation: isolate;
transition:
transform .5s cubic-bezier(.2,.8,.2,1),
box-shadow .5s cubic-bezier(.2,.8,.2,1),
border-color .5s,
background .5s;
box-shadow:
0 1px 0 rgba(255,255,255,0.04) inset,
0 18px 40px rgba(0,0,0,0.30),
0 4px 12px rgba(0,0,0,0.20);
}
.cta-block.biz::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background:
radial-gradient(circle at 15% 20%, rgba(0,120,103,0.45) 0%, transparent 55%),
radial-gradient(circle at 85% 80%, rgba(0,175,185,0.30) 0%, transparent 55%),
linear-gradient(135deg, rgba(0,120,103,0.18) 0%, rgba(0,87,114,0.10) 50%, rgba(0,175,185,0.18) 100%);
opacity: 0;
transition: opacity .55s cubic-bezier(.2,.8,.2,1);
pointer-events: none;
z-index: -1;
}
.cta-block.biz::after {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(0,175,185,0.65) 0%, rgba(0,120,103,0.55) 50%, rgba(0,87,114,0.45) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity .55s cubic-bezier(.2,.8,.2,1);
pointer-events: none;
}
.cta-block.biz:hover {
transform: translateY(-8px);
border-color: rgba(0,175,185,0.45) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.08) inset,
0 40px 80px rgba(0,120,103,0.30),
0 20px 40px rgba(0,87,114,0.25),
0 0 60px rgba(0,175,185,0.20);
}
.cta-block.biz:hover::before { opacity: 1; }
.cta-block.biz:hover::after { opacity: 1; }
.cta-block.biz .arrow {
transition: transform .45s cubic-bezier(.2,.8,.2,1), color .45s, text-shadow .45s;
}
.cta-block.biz:hover .arrow {
background: linear-gradient(120deg, #00AFB9 0%, #007867 60%, #005772 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: 0 0 24px rgba(0,175,185,0.35);
transform: translateX(4px);
}
.cta-block.biz h3 { transition: color .45s, text-shadow .45s; }
.cta-block.biz:hover h3 {
text-shadow: 0 0 28px rgba(0,175,185,0.20);
}
/* Individual CTA hover — deeper card + yellow/turquoise gradient wash */
.cta-block.ind {
position: relative;
isolation: isolate;
transition:
transform .5s cubic-bezier(.2,.8,.2,1),
box-shadow .5s cubic-bezier(.2,.8,.2,1),
border-color .5s,
background .5s;
box-shadow:
0 1px 0 rgba(255,255,255,0.04) inset,
0 18px 40px rgba(0,0,0,0.30),
0 4px 12px rgba(0,0,0,0.20);
}
.cta-block.ind::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background:
radial-gradient(circle at 15% 20%, rgba(234,193,5,0.45) 0%, transparent 55%),
radial-gradient(circle at 85% 80%, rgba(0,175,185,0.40) 0%, transparent 55%),
linear-gradient(135deg, rgba(234,193,5,0.20) 0%, rgba(0,175,185,0.10) 50%, rgba(0,212,200,0.22) 100%);
opacity: 0;
transition: opacity .55s cubic-bezier(.2,.8,.2,1);
pointer-events: none;
z-index: -1;
}
.cta-block.ind::after {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(234,193,5,0.75) 0%, rgba(0,212,200,0.55) 55%, rgba(0,175,185,0.45) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity .55s cubic-bezier(.2,.8,.2,1);
pointer-events: none;
}
.cta-block.ind:hover {
transform: translateY(-8px);
border-color: rgba(234,193,5,0.45) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.10) inset,
0 40px 80px rgba(234,193,5,0.20),
0 20px 40px rgba(0,175,185,0.25),
0 0 60px rgba(0,212,200,0.22);
}
.cta-block.ind:hover::before { opacity: 1; }
.cta-block.ind:hover::after { opacity: 1; }
.cta-block.ind .arrow {
transition: transform .45s cubic-bezier(.2,.8,.2,1), color .45s, text-shadow .45s;
}
.cta-block.ind:hover .arrow {
background: linear-gradient(120deg, #EAC105 0%, #00d4c8 60%, #00AFB9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: 0 0 24px rgba(234,193,5,0.30);
transform: translateX(4px);
}
.cta-block.ind h3 { transition: color .45s, text-shadow .45s; }
.cta-block.ind:hover h3 {
text-shadow: 0 0 28px rgba(0,212,200,0.20);
}
/* ====================================================================== */
/* === REBUILD PHASE 1 — unified spine + homepage (Flow + Neon) === */
/* ====================================================================== */
/* ---------- Nav: links wrapper + mobile hamburger ---------- */
.nav .nav-links {
display: inline-flex;
align-items: center;
gap: 2px;
}
.nav-burger {
display: none;
width: 36px; height: 36px;
margin-left: 4px;
border: 1px solid var(--line);
background: var(--glass);
color: var(--ink);
border-radius: 50%;
cursor: pointer;
padding: 0;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
transition: background .2s, border-color .2s;
}
.nav-burger:hover { background: var(--glass-strong); }
.nav-burger span {
display: block;
width: 16px; height: 1.6px;
background: currentColor;
border-radius: 2px;
transition: transform .25s, opacity .2s;
}
.nav.is-open .nav-burger span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-burger span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }
@media (max-width: 1080px) {
/* Hide the deck-style store badges from nav at this width to keep the pill tidy
(existing rule at site.css:2153 already hides .nav-store). */
}
@media (max-width: 980px) {
.nav { padding: 8px 8px 8px 16px; gap: 4px; }
.nav .nav-links { display: none; }
.nav-burger { display: inline-flex; }
.nav.is-open .nav-links {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
position: absolute;
top: calc(100% + 12px);
left: 0; right: 0;
padding: 12px;
background: var(--nav-bg);
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
border: 1px solid var(--line);
border-radius: 28px;
box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.nav.is-open .nav-links .nav-link {
padding: 14px 18px;
font-size: 15px;
border-radius: 18px;
text-align: left;
}
}
@media (max-width: 600px) {
.nav { left: 12px; right: 12px; transform: none; padding: 7px 8px 7px 14px; }
.nav-logo .logo-img { height: 24px; }
.nav-cta { padding: 9px 14px; font-size: 12.5px; }
.theme-toggle { width: 32px; height: 32px; }
.nav-burger { width: 32px; height: 32px; }
}
body.nav-open { overflow: hidden; }
/* ---------- HERO FORK (split pick-your-path) ---------- */
.hero-fork { padding: 160px 0 60px; }
.fork-brand {
text-align: center;
max-width: 880px;
margin: 0 auto 64px;
}
.fork-brand .hero-eyebrow { margin: 0 auto; }
.fork-headline {
font-size: clamp(38px, 5.8vw, 84px);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.05;
margin: 26px 0 0;
}
.fork-headline .italic {
font-style: italic;
font-weight: 500;
font-family: 'Instrument Serif', 'Playfair Display', serif;
}
.fork-headline .grad {
background: linear-gradient(120deg, var(--yellow) 0%, var(--green) 35%, var(--teal) 60%, var(--blue) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
padding: 0.05em 0.05em 0.18em;
margin: 0 -0.05em -0.18em;
line-height: 1.15;
}
.fork-sub {
margin: 26px auto 0;
max-width: 56ch;
font-size: 18px;
line-height: 1.55;
color: var(--ink-2);
}
.fork {
display: grid;
grid-template-columns: 1fr 1px 1fr;
gap: 0;
position: relative;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
overflow: hidden;
box-shadow: 0 30px 100px rgba(0,0,0,0.35);
}
.fork-side {
position: relative;
padding: 44px 40px 44px;
text-decoration: none;
color: var(--ink);
overflow: hidden;
transition: background .45s cubic-bezier(.2,.8,.2,1);
isolation: isolate;
}
.fork-side-inner { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; }
.fork-side * { text-decoration: none; }
.fork-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
width: fit-content;
border-radius: 999px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.fork-companies .fork-eyebrow { background: rgba(0,87,114,0.18); color: var(--teal); }
.fork-candidates .fork-eyebrow { background: rgba(234,193,5,0.18); color: var(--yellow); }
.fork-title {
margin: 22px 0 14px;
font-size: clamp(28px, 3.2vw, 44px);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.05;
}
.fork-title .italic {
font-style: italic;
font-weight: 500;
font-family: 'Instrument Serif', 'Playfair Display', serif;
}
.fork-side-sub {
margin: 0 0 28px;
font-size: 16px;
line-height: 1.55;
color: var(--ink-2);
max-width: 42ch;
}
.fork-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
border-radius: 999px;
font-weight: 600;
font-size: 14.5px;
width: fit-content;
transition: transform .2s, box-shadow .25s, background .25s;
}
.fork-companies .fork-cta {
background: linear-gradient(135deg, var(--teal), var(--blue));
color: #fff;
box-shadow: 0 8px 30px rgba(0,175,185,0.28), inset 0 1px 0 rgba(255,255,255,0.18);
}
.fork-candidates .fork-cta {
background: linear-gradient(135deg, var(--yellow), #ffd33d);
color: #1a1505;
box-shadow: 0 8px 30px rgba(234,193,5,0.32), inset 0 1px 0 rgba(255,255,255,0.4);
}
.fork-glow {
position: absolute;
inset: -1px;
z-index: 1;
pointer-events: none;
opacity: 0;
transition: opacity .55s cubic-bezier(.2,.8,.2,1);
}
.fork-companies .fork-glow {
background:
radial-gradient(circle at 80% 90%, rgba(0,175,185,0.20), transparent 55%),
radial-gradient(circle at 20% 10%, rgba(0,87,114,0.18), transparent 50%);
}
.fork-candidates .fork-glow {
background:
radial-gradient(circle at 20% 90%, rgba(234,193,5,0.22), transparent 55%),
radial-gradient(circle at 80% 10%, rgba(255,200,40,0.12), transparent 55%);
}
.fork-side:hover .fork-glow { opacity: 1; }
.fork-side:hover .fork-cta { transform: translateY(-2px); }
/* Visuals inside each fork side — shrink the existing components */
.fork-visual {
position: relative;
margin-top: 36px;
min-height: 280px;
}
.fork-visual-co .hero-float-card {
position: relative;
width: 100%;
max-width: 360px;
margin-bottom: 14px;
}
.fork-visual-co .hero-float-card.static {
animation: none;
inset: auto;
top: auto; left: auto; right: auto; bottom: auto;
}
.fork-visual-co .hero-float-card.bot.static {
margin-left: 30px;
}
.fork-visual-ca {
display: flex;
justify-content: center;
}
.fork-visual-ca .hero-phone {
transform: scale(0.78);
transform-origin: top center;
margin-bottom: -60px;
}
/* Divider with OR pill */
.fork-divider {
background: linear-gradient(180deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
position: relative;
}
.fork-or {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
padding: 6px 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
background: var(--bg-0);
border: 1px solid var(--line);
border-radius: 999px;
white-space: nowrap;
}
/* Mobile-first stack */
@media (max-width: 900px) {
.hero-fork { padding: 130px 0 40px; }
.fork {
grid-template-columns: 1fr;
grid-template-rows: 1fr auto 1fr;
}
.fork-divider {
background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
height: 1px;
width: 100%;
}
.fork-side { padding: 36px 28px; }
.fork-visual-ca .hero-phone { transform: scale(0.7); margin-bottom: -100px; }
}
/* ---------- PROBLEM section ---------- */
.section-problem .section-head { max-width: 820px; margin-left: auto; margin-right: auto; text-align: center; }
.section-problem .section-title { margin-left: auto; margin-right: auto; max-width: none; }
.section-problem .section-lead { margin: 24px auto 0; }
.problem-stats {
margin-top: 64px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.problem-stat {
padding: 36px 28px;
background: var(--glass);
border: 1px solid var(--line);
border-radius: var(--radius);
backdrop-filter: blur(14px);
transition: transform .3s, border-color .3s, background .3s;
}
.problem-stat:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.18); background: var(--glass-strong); }
.problem-stat strong {
display: block;
font-size: clamp(44px, 5.5vw, 72px);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
background: linear-gradient(135deg, var(--yellow), var(--teal));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.problem-stat span {
display: block;
margin-top: 14px;
font-size: 14px;
color: var(--ink-2);
line-height: 1.5;
}
@media (max-width: 900px) {
.problem-stats { grid-template-columns: 1fr; }
}
/* ---------- SOLUTION section ---------- */
.solution-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
@media (max-width: 980px) {
.solution-grid { grid-template-columns: 1fr; gap: 48px; }
}
.solution-schematic {
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: center;
gap: 12px;
padding: 32px;
background: var(--glass);
border: 1px solid var(--line);
border-radius: var(--radius);
backdrop-filter: blur(14px);
}
.schematic-node {
padding: 20px 18px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--line);
border-radius: 22px;
text-align: center;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 140px;
justify-content: center;
}
.schematic-node strong { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.schematic-node small { font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.schematic-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.schematic-node.n1 .schematic-label { color: var(--teal); }
.schematic-node.n2 .schematic-label { color: var(--yellow); }
.schematic-node.n3 .schematic-label { color: var(--green); }
.schematic-arrow svg {
width: 60px; height: 12px;
color: var(--ink-3);
opacity: 0.7;
}
@media (max-width: 720px) {
.solution-schematic {
grid-template-columns: 1fr;
gap: 8px;
}
.schematic-arrow svg { transform: rotate(90deg); width: 24px; }
}
/* ---------- PROOF section ---------- */
.section-proof .section-head { max-width: 820px; margin-left: auto; margin-right: auto; text-align: center; }
.section-proof .section-title { margin-left: auto; margin-right: auto; max-width: none; }
.proof-quote {
margin: 56px auto 0;
max-width: 820px;
padding: 44px 40px;
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid var(--line);
border-radius: var(--radius);
text-align: center;
}
.proof-quote p {
margin: 0 0 18px;
font-family: 'Instrument Serif', 'Playfair Display', serif;
font-style: italic;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.35;
color: var(--ink);
}
.proof-quote cite {
font-style: normal;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--ink-3);
}
.proof-case {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 32px;
margin-top: 56px;
padding: 36px 40px;
background: linear-gradient(135deg, rgba(0,175,185,0.06), rgba(234,193,5,0.04));
border: 1px solid var(--line);
border-radius: var(--radius);
text-decoration: none;
color: inherit;
transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s;
}
.proof-case * { text-decoration: none; }
.proof-case:hover {
transform: translateY(-4px);
border-color: rgba(234,193,5,0.35);
box-shadow: 0 30px 60px rgba(0,0,0,0.35), 0 0 40px rgba(234,193,5,0.10);
}
.proof-case-eyebrow {
display: block;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--yellow);
margin-bottom: 10px;
}
.proof-case h3 {
margin: 0 0 8px;
font-size: clamp(20px, 2vw, 26px);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
}
.proof-case p {
margin: 0;
font-size: 14.5px;
color: var(--ink-2);
line-height: 1.5;
}
.proof-case-arrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
background: var(--ink);
color: var(--bg-0);
border-radius: 999px;
font-weight: 600;
font-size: 14px;
white-space: nowrap;
transition: transform .25s;
}
.proof-case:hover .proof-case-arrow { transform: translateX(4px); }
@media (max-width: 720px) {
.proof-case { grid-template-columns: 1fr; padding: 28px; }
}
/* ---------- DUAL CTA ---------- */
.section-dualcta .section-head { margin-bottom: 56px; }
.dualcta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.dualcta-card {
position: relative;
padding: 44px 40px;
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid var(--line);
text-decoration: none;
color: inherit;
transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s;
display: flex;
flex-direction: column;
overflow: hidden;
}
.dualcta-card * { text-decoration: none; }
.dualcta-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
opacity: 0;
transition: opacity .45s;
pointer-events: none;
}
.dualcta-card.biz::before {
background: radial-gradient(circle at 80% 100%, rgba(0,175,185,0.18), transparent 60%);
}
.dualcta-card.ind::before {
background: radial-gradient(circle at 80% 100%, rgba(234,193,5,0.18), transparent 60%);
}
.dualcta-card:hover { transform: translateY(-6px); }
.dualcta-card.biz:hover { border-color: rgba(0,175,185,0.4); box-shadow: 0 30px 60px rgba(0,175,185,0.18); }
.dualcta-card.ind:hover { border-color: rgba(234,193,5,0.4); box-shadow: 0 30px 60px rgba(234,193,5,0.18); }
.dualcta-card:hover::before { opacity: 1; }
.dualcta-eyebrow {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 7px 14px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 18px;
position: relative;
z-index: 1;
}
.dualcta-card.biz .dualcta-eyebrow { background: rgba(0,87,114,0.18); color: var(--teal); }
.dualcta-card.ind .dualcta-eyebrow { background: rgba(234,193,5,0.18); color: var(--yellow); }
.dualcta-card h3 {
margin: 0 0 12px;
font-size: clamp(26px, 3vw, 36px);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.1;
position: relative; z-index: 1;
}
.dualcta-card p {
margin: 0 0 28px;
color: var(--ink-2);
font-size: 15.5px;
line-height: 1.55;
max-width: 36ch;
position: relative; z-index: 1;
}
.dualcta-arrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding: 14px 22px;
width: fit-content;
border-radius: 999px;
font-weight: 600;
font-size: 14.5px;
background: rgba(255,255,255,0.06);
border: 1px solid var(--line);
color: var(--ink);
transition: background .25s, transform .25s, border-color .25s;
position: relative; z-index: 1;
}
.dualcta-card:hover .dualcta-arrow { transform: translateX(4px); background: var(--ink); color: var(--bg-0); border-color: var(--ink); }
.dualcta-secondary {
margin-top: 40px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.dualcta-or {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
}
@media (max-width: 900px) {
.dualcta { grid-template-columns: 1fr; }
}
/* ---------- CONTACT (secondary / collapsible) ---------- */
.contact-section-secondary { padding: 40px 0 80px; }
.contact-collapse {
border: 1px solid var(--line);
background: var(--glass);
border-radius: var(--radius);
backdrop-filter: blur(14px);
overflow: hidden;
}
.contact-collapse > summary {
list-style: none;
cursor: pointer;
padding: 22px 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
transition: background .25s;
}
.contact-collapse > summary::-webkit-details-marker { display: none; }
.contact-collapse > summary:hover { background: var(--glass-strong); }
.contact-collapse-eyebrow {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ink-3);
}
.contact-collapse-title {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.01em;
display: inline-flex;
align-items: center;
gap: 10px;
}
.contact-collapse-chev {
display: inline-block;
transition: transform .3s;
}
.contact-collapse[open] .contact-collapse-chev { transform: rotate(180deg); }
.contact-collapse[open] .contact-grid {
padding: 28px;
border-top: 1px solid var(--line);
}
/* Success-state next-step link */
.contact-success-next {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 20px;
padding: 12px 18px;
background: var(--ink);
color: var(--bg-0);
border-radius: 999px;
text-decoration: none;
font-weight: 600;
font-size: 13.5px;
transition: transform .25s, box-shadow .25s;
}
.contact-success-next:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.3); }
/* Hero phone size override inside hero-fork (more compact) */
.hero-fork .hero-phone { width: 240px; height: 480px; }
.hero-fork .hero-phone-screen { padding: 50px 14px 14px; }
/* ====================================================================== */
/* === REBUILD PHASE 3 — About.html + Pricing.html (Flow + Neon) === */
/* ====================================================================== */
/* ============ ABOUT — hero (editorial) ============ */
.hero-about-editorial {
padding: 180px 0 60px;
min-height: auto;
}
.about-hero-inner {
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.about-hero-headline {
font-family: 'Instrument Serif', serif;
font-weight: 400;
font-size: clamp(46px, 7.4vw, 110px);
line-height: 1.02;
letter-spacing: -0.025em;
margin: 28px 0 0;
color: var(--ink);
}
.about-hero-headline .italic { font-style: italic; }
.about-hero-sub {
margin: 28px auto 0;
max-width: 60ch;
color: var(--ink-2);
font-size: 17px;
line-height: 1.55;
}
@media (max-width: 700px) {
.hero-about-editorial { padding: 140px 0 40px; }
}
/* ============ ABOUT — editorial grid (mission / vision) ============ */
.section-editorial { padding: 100px 0; }
.editorial-grid {
display: grid;
grid-template-columns: 1.25fr 1fr;
gap: 80px;
align-items: center;
}
.editorial-grid.reversed { grid-template-columns: 1fr 1.25fr; }
.editorial-grid.reversed .editorial-copy { order: 2; }
.editorial-grid.reversed .editorial-aside { order: 1; }
@media (max-width: 900px) {
.editorial-grid, .editorial-grid.reversed {
grid-template-columns: 1fr;
gap: 40px;
}
.editorial-grid.reversed .editorial-copy,
.editorial-grid.reversed .editorial-aside { order: 0; }
}
.editorial-copy .section-title { max-width: 16ch; }
/* Pull-quote card (Mission) */
.quote-card {
position: relative;
padding: 36px 32px;
border-radius: 22px;
background: linear-gradient(135deg, rgba(234,193,5,0.10), rgba(0,120,103,0.10));
border: 1px solid rgba(234,193,5,0.22);
overflow: hidden;
}
.quote-card::before {
content: "";
position: absolute;
inset: -40%;
background: radial-gradient(circle at 70% 30%, rgba(234,193,5,0.25), transparent 60%);
opacity: 0.7;
pointer-events: none;
}
.qc-mark {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-size: 96px;
line-height: 0.6;
color: var(--yellow);
display: block;
margin-bottom: 8px;
}
.quote-card p {
font-family: 'Instrument Serif', serif;
font-size: 26px;
line-height: 1.35;
color: var(--ink);
margin: 0 0 18px;
position: relative;
}
.qc-by {
display: block;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
position: relative;
}
/* Vision timeline card */
.vision-card {
padding: 28px;
border-radius: 22px;
background: linear-gradient(180deg, rgba(0,175,185,0.06), rgba(0,87,114,0.10));
border: 1px solid rgba(0,175,185,0.24);
}
.vc-row {
display: grid;
grid-template-columns: 80px 1fr;
gap: 20px;
padding: 18px 0;
border-bottom: 1px dashed rgba(255,255,255,0.08);
align-items: baseline;
}
.vc-row:last-child { border-bottom: 0; }
.vc-num {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-size: 30px;
color: var(--teal);
}
.vc-lbl { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
/* ============ ABOUT — story / timeline ============ */
.section-story { padding: 120px 0; }
.story-timeline {
list-style: none;
padding: 0;
margin: 64px auto 0;
max-width: 760px;
position: relative;
}
.story-milestone {
position: relative;
padding: 0 0 56px 64px;
}
.story-milestone:last-child { padding-bottom: 0; }
.sm-line {
position: absolute;
left: 19px;
top: 22px;
bottom: -8px;
width: 2px;
background: linear-gradient(180deg, rgba(234,193,5,0.6), rgba(234,193,5,0.0));
transform-origin: top;
animation: smLineDraw 1.2s ease forwards;
}
.story-milestone:last-child .sm-line { display: none; }
@keyframes smLineDraw {
from { transform: scaleY(0); }
to { transform: scaleY(1); }
}
.sm-dot {
position: absolute;
left: 12px;
top: 6px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--bg-0);
border: 2px solid var(--yellow);
box-shadow: 0 0 0 6px rgba(234,193,5,0.10);
}
.story-milestone.is-now .sm-dot {
background: var(--yellow);
animation: smPulse 2.2s ease-in-out infinite;
}
@keyframes smPulse {
0%, 100% { box-shadow: 0 0 0 6px rgba(234,193,5,0.15); }
50% { box-shadow: 0 0 0 12px rgba(234,193,5,0.04); }
}
.sm-date {
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
color: var(--yellow);
display: block;
margin-bottom: 6px;
}
.story-milestone h4 {
margin: 0 0 8px;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ink);
}
.story-milestone p {
margin: 0;
color: var(--ink-2);
font-size: 15px;
line-height: 1.55;
max-width: 56ch;
}
/* ============ ABOUT — team ============ */
.section-team { padding: 120px 0; }
.section-team .team { margin-top: 56px; }
.team .person { position: relative; padding-bottom: 56px; }
.team .person .person-link {
position: absolute;
left: 24px;
bottom: 20px;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--ink-3);
text-decoration: none;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--line);
transition: color .2s, border-color .2s;
}
.team .person .person-link:hover { color: var(--teal); border-color: rgba(0,175,185,0.4); }
/* Building with us */
.building-with-us {
margin-top: 72px;
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: center;
padding: 36px;
border-radius: 22px;
border: 1px solid var(--line);
background: var(--glass);
backdrop-filter: blur(20px);
}
.bwu-copy h3 {
margin: 0 0 8px;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
}
.bwu-copy p {
margin: 0 0 16px;
color: var(--ink-2);
font-size: 14.5px;
line-height: 1.55;
max-width: 60ch;
}
.bwu-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 999px;
background: var(--ink);
color: var(--bg-0);
text-decoration: none;
font-weight: 600;
font-size: 13.5px;
transition: transform .25s;
}
.bwu-cta:hover { transform: translateY(-2px); }
.bwu-avatars { display: flex; gap: -8px; }
.bwu-av {
width: 56px;
height: 56px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
color: var(--bg-0);
margin-left: -10px;
border: 2px solid var(--bg-0);
}
.av-a { background: linear-gradient(135deg, #EAC105, #FF8A3D); }
.av-b { background: linear-gradient(135deg, #00AFB9, #005772); }
.av-c { background: linear-gradient(135deg, #3DDC97, #007867); }
@media (max-width: 700px) {
.building-with-us { grid-template-columns: 1fr; padding: 28px; }
}
/* ============ ABOUT — scroll rail (signature flourish) ============ */
.about-rail {
position: fixed;
top: 50%;
left: 28px;
transform: translateY(-50%);
z-index: 30;
opacity: 0;
pointer-events: none;
transition: opacity .35s;
}
.about-rail.is-visible { opacity: 1; pointer-events: auto; }
.about-rail-track {
position: absolute;
left: 10px;
top: 0;
width: 2px;
height: 100%;
background: rgba(255,255,255,0.08);
border-radius: 2px;
}
.about-rail-progress {
position: absolute;
left: 10px;
top: 0;
width: 2px;
height: 0;
background: linear-gradient(180deg, var(--yellow), var(--teal));
border-radius: 2px;
transition: height .15s linear;
}
.about-rail-stops {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 28px;
}
.about-rail-stops li {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
position: relative;
}
.about-rail-stops .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--bg-0);
border: 2px solid rgba(255,255,255,0.25);
margin-left: 6px;
transition: border-color .25s, transform .25s, background .25s;
}
.about-rail-stops .lbl {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
opacity: 0;
transform: translateX(-4px);
transition: opacity .25s, transform .25s, color .25s;
pointer-events: none;
white-space: nowrap;
}
.about-rail-stops li:hover .lbl { opacity: 1; transform: translateX(0); }
.about-rail-stops li.is-active .dot {
background: var(--yellow);
border-color: var(--yellow);
transform: scale(1.2);
}
.about-rail-stops li.is-active .lbl {
opacity: 1;
transform: translateX(0);
color: var(--ink);
}
@media (max-width: 1100px) {
.about-rail { display: none; }
}
/* ============ PRICING — hero ============ */
.hero-pricing {
padding: 180px 0 40px;
min-height: auto;
}
.pricing-hero-inner {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.pricing-hero-headline {
font-family: 'Instrument Serif', serif;
font-weight: 400;
font-size: clamp(46px, 7vw, 100px);
line-height: 1.04;
letter-spacing: -0.025em;
margin: 28px 0 0;
color: var(--ink);
}
.pricing-hero-headline .italic { font-style: italic; }
.pricing-hero-sub {
margin: 24px auto 0;
max-width: 56ch;
color: var(--ink-2);
font-size: 17px;
line-height: 1.55;
}
@media (max-width: 700px) {
.hero-pricing { padding: 140px 0 30px; }
}
/* Billing toggle */
.billing-toggle {
position: relative;
display: inline-flex;
margin: 36px auto 0;
padding: 6px;
background: var(--glass);
border: 1px solid var(--line);
border-radius: 999px;
backdrop-filter: blur(16px);
}
.bt-thumb {
position: absolute;
top: 6px;
bottom: 6px;
left: 0;
width: 0;
background: var(--ink);
border-radius: 999px;
transition: width .35s cubic-bezier(.4,.0,.2,1), transform .35s cubic-bezier(.4,.0,.2,1);
z-index: 0;
}
.billing-toggle button {
position: relative;
z-index: 1;
background: transparent;
border: 0;
cursor: pointer;
font: inherit;
font-weight: 600;
font-size: 13.5px;
letter-spacing: 0.02em;
color: var(--ink-3);
padding: 10px 22px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: color .25s;
}
.billing-toggle button.is-active { color: var(--bg-0); }
.bt-save {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
padding: 2px 8px;
border-radius: 999px;
background: rgba(0,175,185,0.18);
color: var(--teal);
}
.billing-toggle button.is-active .bt-save {
background: rgba(255,255,255,0.18);
color: var(--bg-0);
}
/* ============ PRICING — plan tiers ============ */
.section-plans { padding: 60px 0 100px; }
.plans-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch;
margin-top: 16px;
}
@media (max-width: 900px) {
.plans-row { grid-template-columns: 1fr; gap: 20px; }
}
.plan-tier {
position: relative;
display: flex;
flex-direction: column;
padding: 36px 32px;
background: var(--glass);
border: 1px solid var(--line);
border-radius: 22px;
backdrop-filter: blur(20px);
transition: transform .35s, border-color .35s, box-shadow .35s;
overflow: hidden;
}
.plan-tier:hover {
transform: translateY(-6px);
border-color: rgba(255,255,255,0.18);
}
.plan-tier.is-recommended {
border-color: rgba(0,175,185,0.55);
background: linear-gradient(180deg, rgba(0,175,185,0.08), rgba(0,87,114,0.04));
box-shadow: 0 30px 80px rgba(0,87,114,0.18);
transform: translateY(-8px);
}
.plan-tier.is-recommended:hover { transform: translateY(-12px); }
/* Slow gradient halo on Growth — signature flourish */
.pt-halo {
position: absolute;
inset: -40%;
background: conic-gradient(from 0deg,
rgba(0,175,185,0.0),
rgba(0,175,185,0.35),
rgba(91,175,255,0.30),
rgba(0,120,103,0.25),
rgba(0,175,185,0.0)
);
filter: blur(40px);
opacity: 0.55;
animation: ptHalo 9s linear infinite;
pointer-events: none;
z-index: 0;
}
@keyframes ptHalo {
to { transform: rotate(360deg); }
}
.plan-tier > * { position: relative; z-index: 1; }
.pt-badge {
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
padding: 6px 12px;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
background: var(--teal);
color: var(--bg-0);
border-radius: 999px;
}
.pt-head { margin-bottom: 24px; }
.pt-eyebrow {
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 700;
color: var(--ink-3);
display: block;
margin-bottom: 16px;
}
.pt-price {
display: flex;
align-items: baseline;
gap: 4px;
margin-bottom: 6px;
color: var(--ink);
}
.pt-currency {
font-size: 24px;
font-weight: 600;
color: var(--ink-2);
}
.pt-amount {
font-family: 'Instrument Serif', serif;
font-size: 60px;
line-height: 1;
letter-spacing: -0.03em;
color: var(--ink);
}
.pt-amount.pt-custom {
font-style: italic;
font-size: 48px;
}
.pt-period {
font-size: 14px;
color: var(--ink-3);
margin-left: 4px;
}
.pt-billed {
margin: 0 0 14px;
font-size: 12.5px;
color: var(--ink-3);
}
.pt-for {
margin: 0;
font-size: 14px;
color: var(--ink-2);
font-style: italic;
}
.pt-features {
list-style: none;
margin: 0 0 28px;
padding: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
.pt-features li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
color: var(--ink-2);
line-height: 1.45;
}
.pt-features li::before {
content: "";
flex: 0 0 16px;
width: 16px;
height: 16px;
margin-top: 2px;
border-radius: 50%;
background: var(--teal);
background-image: url("data:image/svg+xml;utf8,");
background-size: 11px 11px;
background-position: center;
background-repeat: no-repeat;
}
.pt-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 22px;
border-radius: 999px;
font-weight: 700;
font-size: 14px;
text-decoration: none;
border: 1px solid var(--line);
color: var(--ink);
background: transparent;
transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.pt-cta:hover {
background: var(--ink);
color: var(--bg-0);
border-color: var(--ink);
transform: translateY(-2px);
}
.pt-cta-primary {
background: var(--teal);
border-color: var(--teal);
color: var(--bg-0);
}
.pt-cta-primary:hover { background: var(--ink); border-color: var(--ink); }
.plans-foot {
margin: 36px 0 0;
text-align: center;
color: var(--ink-3);
font-size: 14px;
}
.plans-foot a {
color: var(--yellow);
text-decoration: none;
font-weight: 600;
margin-left: 8px;
}
/* ============ PRICING — feature matrix ============ */
.section-matrix { padding: 100px 0; }
.matrix-wrap {
margin-top: 56px;
overflow: hidden;
border-radius: 18px;
border: 1px solid var(--line);
background: var(--glass);
backdrop-filter: blur(16px);
}
.matrix-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
color: var(--ink-2);
}
.matrix-table thead th {
position: sticky;
top: 0;
background: var(--bg-0);
z-index: 2;
padding: 18px 20px;
text-align: center;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
color: var(--ink);
border-bottom: 1px solid var(--line);
}
.matrix-table thead th.m-col-feature {
text-align: left;
}
.matrix-table thead th.m-col-rec {
color: var(--teal);
}
.matrix-table tbody td {
padding: 14px 20px;
border-bottom: 1px solid rgba(255,255,255,0.05);
text-align: center;
}
.matrix-table tbody td:first-child {
text-align: left;
color: var(--ink);
font-weight: 500;
}
.matrix-table tbody td.m-col-rec {
background: rgba(0,175,185,0.06);
color: var(--ink);
font-weight: 600;
}
.matrix-table tbody tr.m-group td {
padding: 18px 20px 10px;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 700;
background: rgba(255,255,255,0.02);
text-align: left;
}
.m-check {
display: inline-block;
width: 18px;
height: 18px;
line-height: 18px;
border-radius: 50%;
background: var(--teal);
color: var(--bg-0);
font-size: 12px;
font-weight: 800;
}
/* Mobile accordions for matrix */
.matrix-mobile { display: none; margin-top: 32px; }
.mm-plan {
margin-bottom: 12px;
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
background: var(--glass);
}
.mm-plan.is-recommended { border-color: rgba(0,175,185,0.5); }
.mm-plan > summary {
list-style: none;
cursor: pointer;
padding: 16px 18px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14.5px;
color: var(--ink);
}
.mm-plan > summary::-webkit-details-marker { display: none; }
.mm-plan > summary::after {
content: "+";
font-size: 20px;
color: var(--ink-3);
margin-left: 12px;
}
.mm-plan[open] > summary::after { content: "−"; }
.mm-plan ul {
list-style: none;
margin: 0;
padding: 0 18px 18px;
display: flex;
flex-direction: column;
gap: 8px;
}
.mm-plan ul li {
font-size: 13.5px;
color: var(--ink-2);
padding-left: 18px;
position: relative;
}
.mm-plan ul li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--teal);
font-weight: 700;
}
@media (max-width: 900px) {
.matrix-wrap { display: none; }
.matrix-mobile { display: block; }
}
/* ============ PRICING — proof (short variant) ============ */
.section-proof-short { padding: 80px 0; }
.section-proof-short .proof-quote { margin-top: 0; }
/* ============ PRICING — FAQ ============ */
.section-faq { padding: 100px 0; }
.faq-list {
max-width: 760px;
margin: 56px auto 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
border: 1px solid var(--line);
border-radius: 16px;
background: var(--glass);
overflow: hidden;
transition: border-color .25s;
}
.faq-item[open] { border-color: rgba(234,193,5,0.3); }
.faq-item > summary {
list-style: none;
cursor: pointer;
padding: 20px 24px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
font-size: 15.5px;
font-weight: 600;
color: var(--ink);
line-height: 1.4;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-chev {
flex: 0 0 auto;
font-size: 22px;
color: var(--ink-3);
font-weight: 400;
transition: transform .25s;
}
.faq-item[open] .faq-chev { transform: rotate(45deg); color: var(--yellow); }
.faq-item p {
padding: 0 24px 22px;
margin: 0;
color: var(--ink-2);
font-size: 14.5px;
line-height: 1.6;
}
.faq-item p a { color: var(--yellow); }
/* ============ Light-theme overrides for Phase 3 ============ */
[data-theme="light"] .about-hero-headline,
[data-theme="light"] .pricing-hero-headline { color: #0a0c1a; }
[data-theme="light"] .quote-card {
background: linear-gradient(135deg, rgba(234,193,5,0.15), rgba(0,120,103,0.10));
border-color: rgba(234,193,5,0.4);
}
[data-theme="light"] .quote-card p { color: #0a0c1a; }
[data-theme="light"] .vision-card {
background: linear-gradient(180deg, rgba(0,175,185,0.10), rgba(0,87,114,0.15));
border-color: rgba(0,175,185,0.4);
}
[data-theme="light"] .sm-dot { background: #fff; border-color: var(--yellow); }
[data-theme="light"] .story-milestone h4 { color: #0a0c1a; }
[data-theme="light"] .story-milestone p { color: #4a5068; }
[data-theme="light"] .building-with-us { background: #fff; border-color: rgba(10,12,26,0.1); }
[data-theme="light"] .bwu-copy h3 { color: #0a0c1a; }
[data-theme="light"] .bwu-copy p { color: #4a5068; }
[data-theme="light"] .bwu-av { border-color: #fff; }
[data-theme="light"] .about-rail-track { background: rgba(10,12,26,0.10); }
[data-theme="light"] .about-rail-stops .dot { background: #fff; border-color: rgba(10,12,26,0.20); }
[data-theme="light"] .about-rail-stops .lbl { color: #6b7390; }
[data-theme="light"] .about-rail-stops li.is-active .lbl { color: #0a0c1a; }
[data-theme="light"] .billing-toggle { background: #fff; border-color: rgba(10,12,26,0.1); }
[data-theme="light"] .billing-toggle button { color: #6b7390; }
[data-theme="light"] .billing-toggle button.is-active { color: #fff; }
[data-theme="light"] .plan-tier { background: #fff; border-color: rgba(10,12,26,0.08); }
[data-theme="light"] .plan-tier.is-recommended {
background: linear-gradient(180deg, rgba(0,175,185,0.06), #fff);
border-color: rgba(0,175,185,0.6);
box-shadow: 0 30px 80px rgba(0,87,114,0.10);
}
[data-theme="light"] .pt-amount, [data-theme="light"] .pt-price { color: #0a0c1a; }
[data-theme="light"] .pt-features li { color: #4a5068; }
[data-theme="light"] .pt-cta { border-color: rgba(10,12,26,0.15); color: #0a0c1a; }
[data-theme="light"] .pt-cta:hover { background: #0a0c1a; color: #fff; border-color: #0a0c1a; }
[data-theme="light"] .pt-cta-primary { background: var(--teal); color: #fff; border-color: var(--teal); }
[data-theme="light"] .matrix-wrap { background: #fff; border-color: rgba(10,12,26,0.08); }
[data-theme="light"] .matrix-table thead th { background: #fff; color: #0a0c1a; border-bottom-color: rgba(10,12,26,0.08); }
[data-theme="light"] .matrix-table tbody td { border-bottom-color: rgba(10,12,26,0.05); color: #4a5068; }
[data-theme="light"] .matrix-table tbody td:first-child { color: #0a0c1a; }
[data-theme="light"] .matrix-table tbody td.m-col-rec { background: rgba(0,175,185,0.06); color: #0a0c1a; }
[data-theme="light"] .matrix-table tbody tr.m-group td { background: rgba(10,12,26,0.03); color: #6b7390; }
[data-theme="light"] .mm-plan { background: #fff; border-color: rgba(10,12,26,0.08); }
[data-theme="light"] .mm-plan > summary { color: #0a0c1a; }
[data-theme="light"] .mm-plan ul li { color: #4a5068; }
[data-theme="light"] .faq-item { background: #fff; border-color: rgba(10,12,26,0.08); }
[data-theme="light"] .faq-item > summary { color: #0a0c1a; }
[data-theme="light"] .faq-item p { color: #4a5068; }
/* ====================================================================== */
/* === REBUILD PHASE 2 — Business.html + Individual.html (Flow + Neon) === */
/* ====================================================================== */
/* ---------- shared: gradient text tokens used in P2 headlines ---------- */
.grad-biz {
background: linear-gradient(120deg, var(--teal) 0%, var(--blue) 60%, var(--green) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
padding: 0.05em 0.05em 0.18em;
margin: 0 -0.05em -0.18em;
line-height: 1.15;
}
.grad-ind {
background: linear-gradient(120deg, var(--yellow) 0%, var(--green) 60%, var(--teal) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
padding: 0.05em 0.05em 0.18em;
margin: 0 -0.05em -0.18em;
line-height: 1.15;
}
.italic {
font-style: italic;
font-weight: 500;
font-family: 'Instrument Serif', 'Playfair Display', serif;
}
/* ====================================================================== */
/* ==== BUSINESS.HTML ==================================================== */
/* ====================================================================== */
/* ---------- biz hero: 60/40 split ---------- */
.biz-hero { padding: 160px 0 80px; }
.biz-hero-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 64px;
align-items: center;
}
.biz-hero-title {
font-size: clamp(38px, 5.2vw, 68px);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.05;
margin: 26px 0 0;
}
.biz-hero-sub {
margin: 24px 0 0;
max-width: 52ch;
font-size: 17.5px;
line-height: 1.55;
color: var(--ink-2);
}
.biz-hero-actions {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
margin-top: 36px;
}
.biz-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, var(--teal), var(--blue));
color: #fff;
border-radius: 999px;
padding: 16px 26px;
font-weight: 600;
font-size: 15px;
box-shadow: 0 12px 36px rgba(0,175,185,0.32), inset 0 1px 0 rgba(255,255,255,0.18);
text-decoration: none;
transition: transform .25s, box-shadow .25s;
}
.biz-cta:hover {
transform: translateY(-2px);
box-shadow: 0 18px 50px rgba(0,175,185,0.4), inset 0 1px 0 rgba(255,255,255,0.22);
}
.biz-hero-altlink {
font-size: 14.5px;
font-weight: 600;
color: var(--ink-2);
text-decoration: none;
position: relative;
padding-bottom: 2px;
transition: color .25s;
}
.biz-hero-altlink::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: var(--ink-3);
opacity: 0.5;
transition: opacity .25s;
}
.biz-hero-altlink:hover { color: var(--ink); }
.biz-hero-altlink:hover::after { opacity: 1; }
/* Trust strip */
.biz-trust {
margin-top: 44px;
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.biz-trust-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
}
.biz-trust-logos {
display: flex;
align-items: center;
gap: 22px;
}
.biz-trust-logos span {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--ink-2);
opacity: 0.6;
transition: opacity .25s;
}
.biz-trust-logos span:hover { opacity: 1; }
/* ---------- biz hero visual: animated Demo Day calendar ---------- */
.biz-hero-visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 480px;
}
.biz-hero-visual::before {
content: '';
position: absolute;
width: 360px; height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,175,185,0.22), transparent 70%);
filter: blur(50px);
z-index: 0;
}
.demo-cal {
position: relative;
z-index: 1;
width: 100%;
max-width: 420px;
padding: 22px;
border-radius: 24px;
background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
border: 1px solid var(--line);
backdrop-filter: blur(18px);
box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.demo-cal-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.demo-cal-month {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ink-3);
}
.demo-cal-head strong {
display: block;
font-size: 17px;
font-weight: 700;
letter-spacing: -0.01em;
margin-top: 4px;
}
.demo-cal-live {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
border-radius: 999px;
background: rgba(0,175,185,0.18);
color: var(--teal);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.demo-cal-live .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 8px var(--teal);
animation: dc-pulse 1.4s ease-in-out infinite;
}
@keyframes dc-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.4); }
}
.demo-cal-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
margin-bottom: 18px;
}
.dc-day {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 12px 4px 14px;
border-radius: 14px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.04);
position: relative;
min-height: 70px;
}
.dc-day .d {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--ink-3);
}
.dc-day .n {
font-size: 18px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--ink);
}
.dc-day.glow {
background: linear-gradient(135deg, rgba(0,175,185,0.25), rgba(0,87,114,0.18));
border-color: rgba(0,175,185,0.45);
box-shadow: 0 0 24px rgba(0,175,185,0.30), inset 0 1px 0 rgba(255,255,255,0.08);
animation: dc-glow 2.4s ease-in-out infinite;
}
@keyframes dc-glow {
0%, 100% { box-shadow: 0 0 16px rgba(0,175,185,0.22), inset 0 1px 0 rgba(255,255,255,0.08); }
50% { box-shadow: 0 0 32px rgba(0,175,185,0.50), inset 0 1px 0 rgba(255,255,255,0.12); }
}
.dc-day .dc-event {
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--teal);
background: var(--bg-0);
padding: 2px 6px;
border-radius: 999px;
border: 1px solid rgba(0,175,185,0.4);
}
.demo-cal-card {
padding: 16px;
border-radius: 16px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--line);
}
.dcc-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.dcc-ic {
width: 36px; height: 36px;
border-radius: 10px;
flex-shrink: 0;
}
.dcc-ttl {
font-size: 13.5px;
font-weight: 700;
letter-spacing: -0.01em;
}
.dcc-sub {
margin-top: 2px;
font-size: 11px;
color: var(--ink-3);
}
.dcc-quote {
font-size: 12.5px;
line-height: 1.5;
color: var(--ink-2);
margin-bottom: 10px;
}
.dcc-meta {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.dcc-pill {
padding: 4px 9px;
border-radius: 999px;
background: rgba(255,255,255,0.06);
border: 1px solid var(--line);
font-size: 10.5px;
font-weight: 600;
color: var(--ink-2);
}
.dcc-pill.alt {
background: rgba(234,193,5,0.15);
border-color: rgba(234,193,5,0.3);
color: var(--yellow);
}
/* ---------- biz Demo Day event card (solution section) ---------- */
.biz-event-card {
/* override the schematic grid -> single column for this variant */
grid-template-columns: 1fr;
gap: 16px;
padding: 28px;
text-align: left;
background: linear-gradient(180deg, rgba(0,175,185,0.06), rgba(255,255,255,0.02));
}
.bec-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.bec-eyebrow {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ink-3);
}
.bec-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(0,120,103,0.18);
color: var(--green);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.bec-status .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 6px var(--green);
}
.bec-title {
margin: 0;
font-size: 22px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
}
.bec-meta-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.bec-pill {
padding: 5px 11px;
border-radius: 999px;
background: rgba(255,255,255,0.06);
border: 1px solid var(--line);
font-size: 11px;
font-weight: 600;
color: var(--ink-2);
}
.bec-pill.alt {
background: rgba(0,175,185,0.15);
border-color: rgba(0,175,185,0.3);
color: var(--teal);
}
.bec-agenda {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 0;
border-top: 1px dashed var(--line);
border-bottom: 1px dashed var(--line);
}
.bec-line {
display: flex;
align-items: center;
gap: 14px;
font-size: 13px;
color: var(--ink-2);
}
.bec-time {
display: inline-block;
min-width: 50px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--ink-3);
}
.bec-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.bec-fit {
font-size: 12px;
font-weight: 700;
color: var(--green);
letter-spacing: 0.02em;
}
.bec-cta {
font-size: 13px;
font-weight: 600;
color: var(--teal);
}
/* ---------- biz bento ---------- */
.biz-bento .b {
position: relative;
overflow: hidden;
}
.biz-bento .bb-stat {
font-size: clamp(36px, 4.5vw, 56px);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
background: linear-gradient(135deg, var(--yellow), var(--teal));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 12px;
}
.biz-bento-yellow {
background: linear-gradient(180deg, rgba(234,193,5,0.10), rgba(234,193,5,0.02));
border-color: rgba(234,193,5,0.22);
}
.biz-bento-yellow .bb-stat {
background: linear-gradient(135deg, var(--yellow), #ffd33d);
-webkit-background-clip: text;
background-clip: text;
}
.biz-bento-teal {
background: linear-gradient(180deg, rgba(0,175,185,0.10), rgba(0,175,185,0.02));
border-color: rgba(0,175,185,0.22);
}
.biz-bento-teal .bb-stat {
background: linear-gradient(135deg, var(--teal), var(--blue));
-webkit-background-clip: text;
background-clip: text;
}
.biz-bento-green {
background: linear-gradient(180deg, rgba(0,120,103,0.10), rgba(0,120,103,0.02));
border-color: rgba(0,120,103,0.22);
}
.biz-bento-green .bb-stat {
background: linear-gradient(135deg, var(--green), var(--teal));
-webkit-background-clip: text;
background-clip: text;
}
.biz-bento-blue {
background: linear-gradient(180deg, rgba(0,87,114,0.12), rgba(0,87,114,0.02));
border-color: rgba(0,87,114,0.22);
}
.biz-bento-blue .bb-stat {
background: linear-gradient(135deg, var(--blue), var(--teal));
-webkit-background-clip: text;
background-clip: text;
}
.bb-tile {
aspect-ratio: 1;
border-radius: 12px;
display: grid;
place-items: end;
padding: 10px;
font-weight: 700;
color: #1a1505;
}
.biz-bento-blue .bb-tile, .biz-bento-teal .bb-tile { color: #fff; }
/* ---------- proof: expanded layout (Biz page) ---------- */
.proof-quotes-grid {
margin: 56px 0 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.proof-quotes-grid .proof-quote { margin: 0; padding: 32px; }
.proof-quotes-grid .proof-quote p { font-size: clamp(18px, 1.8vw, 22px); }
@media (max-width: 820px) {
.proof-quotes-grid { grid-template-columns: 1fr; }
}
.proof-case-large {
padding: 48px 52px;
background: linear-gradient(135deg, rgba(0,175,185,0.10), rgba(234,193,5,0.06));
}
.proof-case-large h3 {
font-size: clamp(22px, 2.3vw, 30px);
}
/* ---------- pricing teaser ---------- */
.section-pricing-teaser { padding: 40px 0; }
.pricing-teaser {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 28px;
padding: 28px 32px;
border-radius: var(--radius);
border: 1px solid var(--line);
background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005));
text-decoration: none;
color: inherit;
transition: border-color .25s, transform .25s, box-shadow .3s;
}
.pricing-teaser * { text-decoration: none; }
.pricing-teaser:hover {
transform: translateY(-3px);
border-color: rgba(234,193,5,0.35);
box-shadow: 0 24px 50px rgba(0,0,0,0.3);
}
.pricing-teaser-eyebrow {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--yellow);
margin-bottom: 8px;
}
.pricing-teaser h3 {
margin: 0 0 6px;
font-size: clamp(20px, 2vw, 24px);
font-weight: 800;
letter-spacing: -0.02em;
}
.pricing-teaser p {
margin: 0;
font-size: 14.5px;
color: var(--ink-2);
}
.pricing-teaser-arrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
border-radius: 999px;
background: var(--ink);
color: var(--bg-0);
font-weight: 600;
font-size: 13.5px;
white-space: nowrap;
transition: transform .25s;
}
.pricing-teaser:hover .pricing-teaser-arrow { transform: translateX(4px); }
@media (max-width: 720px) {
.pricing-teaser { grid-template-columns: 1fr; }
}
/* ---------- biz signup form ---------- */
.biz-signup-section { padding: 80px 0 100px; }
.biz-signup-grid { /* keep contact-grid defaults */ }
.biz-form-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.biz-launch-radio {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-top: 8px;
}
.biz-launch-opt {
position: relative;
display: block;
padding: 14px 18px;
border-radius: 12px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.03);
cursor: pointer;
font-size: 13.5px;
font-weight: 600;
color: var(--ink-2);
transition: border-color .2s, background .2s, color .2s;
}
.biz-launch-opt input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.biz-launch-opt:hover {
border-color: rgba(0,175,185,0.4);
color: var(--ink);
}
.biz-launch-opt:has(input:checked) {
background: rgba(0,175,185,0.15);
border-color: var(--teal);
color: var(--ink);
}
@media (max-width: 600px) {
.biz-launch-radio { grid-template-columns: 1fr; }
}
/* ---------- biz hero responsive ---------- */
@media (max-width: 980px) {
.biz-hero { padding: 130px 0 60px; }
.biz-hero-grid { grid-template-columns: 1fr; gap: 48px; }
.biz-hero-visual { min-height: 380px; order: 2; }
}
/* ====================================================================== */
/* ==== INDIVIDUAL.HTML ================================================== */
/* ====================================================================== */
/* ---------- ind hero ---------- */
.ind-hero { padding: 160px 0 80px; }
.ind-hero-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 64px;
align-items: center;
}
.ind-hero-title {
font-size: clamp(38px, 5.2vw, 68px);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.05;
margin: 26px 0 0;
}
.ind-hero-sub {
margin: 24px 0 0;
max-width: 52ch;
font-size: 17.5px;
line-height: 1.55;
color: var(--ink-2);
}
.ind-hero-actions {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
margin-top: 36px;
}
.ind-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, var(--yellow), #ffd33d);
color: #1a1505;
border-radius: 999px;
padding: 16px 26px;
font-weight: 600;
font-size: 15px;
box-shadow: 0 12px 36px rgba(234,193,5,0.36), inset 0 1px 0 rgba(255,255,255,0.4);
text-decoration: none;
transition: transform .25s, box-shadow .25s;
}
.ind-cta:hover {
transform: translateY(-2px);
box-shadow: 0 18px 50px rgba(234,193,5,0.44), inset 0 1px 0 rgba(255,255,255,0.5);
}
.ind-hero-altlink {
font-size: 14.5px;
font-weight: 600;
color: var(--ink-2);
text-decoration: none;
position: relative;
padding-bottom: 2px;
transition: color .25s;
}
.ind-hero-altlink::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: var(--ink-3);
opacity: 0.5;
transition: opacity .25s;
}
.ind-hero-altlink:hover { color: var(--ink); }
.ind-hero-altlink:hover::after { opacity: 1; }
.ind-availability {
margin-top: 44px;
display: inline-flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 10px 16px;
border-radius: 999px;
border: 1px solid var(--line);
background: rgba(255,255,255,0.03);
}
.ind-store-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 700;
color: var(--ink-2);
}
.ind-availability-dot { color: var(--ink-3); }
.ind-availability-sub {
font-size: 12px;
color: var(--ink-3);
margin-left: 4px;
}
/* ---------- ind hero visual: phone with parallax ---------- */
.ind-hero-visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 540px;
}
.ind-hero-visual::before {
content: '';
position: absolute;
width: 360px; height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(234,193,5,0.25), transparent 70%);
filter: blur(50px);
z-index: 0;
}
.ind-phone-stage {
position: relative;
z-index: 1;
perspective: 1200px;
perspective-origin: 50% 50%;
}
.ind-hero-phone {
transition: transform .35s cubic-bezier(.2,.8,.2,1);
transform-style: preserve-3d;
will-change: transform;
}
/* ---------- ind solution phone ---------- */
.ind-solution-phone {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.ind-solution-phone::before {
content: '';
position: absolute;
width: 320px; height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,175,185,0.18), transparent 70%);
filter: blur(40px);
}
.ind-solution-phone .iphone {
position: relative;
z-index: 1;
}
/* ---------- experience types ---------- */
.ind-exp-grid {
margin-top: 56px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.ind-exp-card {
position: relative;
padding: 28px 24px 24px;
border-radius: 22px;
border: 1px solid var(--line);
background: var(--glass);
backdrop-filter: blur(14px);
display: flex;
flex-direction: column;
gap: 14px;
transition: transform .3s, border-color .3s, box-shadow .3s;
}
.ind-exp-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 50px rgba(0,0,0,0.3);
}
.ind-exp-icon {
width: 44px; height: 44px;
border-radius: 14px;
display: grid;
place-items: center;
background: rgba(255,255,255,0.06);
}
.ind-exp-card h4 {
margin: 0;
font-size: 19px;
font-weight: 700;
letter-spacing: -0.015em;
}
.ind-exp-card p {
margin: 0;
font-size: 13.5px;
color: var(--ink-3);
line-height: 1.5;
flex: 1;
}
.ind-exp-price {
display: inline-block;
margin-top: 4px;
padding: 5px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.05);
border: 1px solid var(--line);
font-size: 11.5px;
font-weight: 700;
color: var(--ink-2);
width: fit-content;
letter-spacing: 0.02em;
}
.ind-exp-yellow { border-color: rgba(234,193,5,0.22); }
.ind-exp-yellow .ind-exp-icon { background: rgba(234,193,5,0.18); color: var(--yellow); }
.ind-exp-yellow:hover { border-color: rgba(234,193,5,0.45); }
.ind-exp-teal { border-color: rgba(0,175,185,0.22); }
.ind-exp-teal .ind-exp-icon { background: rgba(0,175,185,0.18); color: var(--teal); }
.ind-exp-teal:hover { border-color: rgba(0,175,185,0.45); }
.ind-exp-green { border-color: rgba(0,120,103,0.22); }
.ind-exp-green .ind-exp-icon { background: rgba(0,120,103,0.18); color: var(--green); }
.ind-exp-green:hover { border-color: rgba(0,120,103,0.45); }
.ind-exp-blue { border-color: rgba(0,87,114,0.25); }
.ind-exp-blue .ind-exp-icon { background: rgba(0,87,114,0.22); color: var(--teal); }
.ind-exp-blue:hover { border-color: rgba(0,87,114,0.5); }
@media (max-width: 980px) {
.ind-exp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.ind-exp-grid { grid-template-columns: 1fr; }
}
/* ---------- ind quotes grid ---------- */
.ind-quotes-grid {
margin: 56px 0 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.ind-quotes-grid .proof-quote { margin: 0; padding: 28px; text-align: left; }
.ind-quotes-grid .proof-quote p { font-size: 17px; }
@media (max-width: 980px) {
.ind-quotes-grid { grid-template-columns: 1fr; }
}
/* ---------- become an exminder card ---------- */
.section-exminder { padding-top: 60px; padding-bottom: 60px; }
.ind-exminder-card {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 40px;
align-items: center;
padding: 48px 52px;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: linear-gradient(135deg, rgba(234,193,5,0.08), rgba(0,175,185,0.06));
position: relative;
overflow: hidden;
}
.ind-exminder-card::before {
content: '';
position: absolute;
inset: -20% -10% auto auto;
width: 380px; height: 380px;
border-radius: 50%;
background: radial-gradient(circle, rgba(234,193,5,0.18), transparent 70%);
filter: blur(40px);
pointer-events: none;
}
.ind-exminder-copy {
position: relative;
z-index: 1;
}
.ind-exminder-copy p {
margin: 0;
font-size: 16px;
line-height: 1.6;
color: var(--ink-2);
max-width: 50ch;
}
.ind-exminder-quote {
position: relative;
z-index: 1;
padding: 28px 32px;
border-radius: 24px;
background: rgba(0,0,0,0.18);
border: 1px solid var(--line);
}
.ind-exminder-mark {
display: block;
font-family: 'Instrument Serif', serif;
font-size: 80px;
line-height: 0.6;
color: var(--yellow);
margin-bottom: 8px;
}
.ind-exminder-quote p {
margin: 0;
font-family: 'Instrument Serif', serif;
font-style: italic;
font-size: 24px;
line-height: 1.4;
color: var(--ink);
}
@media (max-width: 860px) {
.ind-exminder-card { grid-template-columns: 1fr; padding: 36px 28px; }
}
/* ---------- ind explore / download band ---------- */
.section-explore { padding-bottom: 100px; }
.ind-explore-band {
text-align: center;
padding: 64px 40px;
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(234,193,5,0.10), rgba(255,255,255,0.02));
border: 1px solid rgba(234,193,5,0.22);
}
.ind-explore-band .section-lead {
margin-left: auto;
margin-right: auto;
max-width: 50ch;
}
.ind-stores {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.ind-stores-alt {
background: transparent !important;
color: var(--ink) !important;
border: 1px solid var(--line) !important;
box-shadow: none !important;
}
/* ---------- ind hero responsive ---------- */
@media (max-width: 980px) {
.ind-hero { padding: 130px 0 60px; }
.ind-hero-grid { grid-template-columns: 1fr; gap: 48px; }
.ind-hero-visual { min-height: 460px; order: 2; }
}
/* ====================================================================== */
/* ==== LIGHT THEME ADJUSTMENTS (P2) ===================================== */
/* ====================================================================== */
[data-theme="light"] .demo-cal { background: rgba(255,255,255,0.7); }
[data-theme="light"] .dc-day { background: rgba(10,12,26,0.04); border-color: rgba(10,12,26,0.06); }
[data-theme="light"] .dc-day .dc-event { background: #fff; }
[data-theme="light"] .demo-cal-card { background: rgba(10,12,26,0.04); }
[data-theme="light"] .ind-exminder-quote { background: rgba(255,255,255,0.7); }
[data-theme="light"] .biz-launch-opt { background: rgba(10,12,26,0.03); }
[data-theme="light"] .biz-launch-opt:has(input:checked) { background: rgba(0,175,185,0.15); }
/* ====================================================================== */
/* === REBUILD PHASE 5 — QA fixes (Flow + Neon) === */
/* ====================================================================== */
/* ---------- #5 Small-mobile container padding ----------
At 320px, the global `.container` padding of 56px leaves only 208px
of usable width. Trim to 20px below 480px. Sits intentionally late so
it wins against the Phase 1 / global rules. */
@media (max-width: 480px) {
.container { padding: 0 20px; }
/* Also clamp the explicit-padded override at site.css ~L1949 / L2010
so it doesn't keep the 32-64px values on the smallest mobiles. */
html body .container { padding-left: 20px !important; padding-right: 20px !important; }
}
/* ---------- #6 Keyboard focus visibility (fallback layer) ----------
Provides a visible yellow outline for ANY focused element that doesn't
already have its own :focus-visible rule. Does not override existing rules. */
:focus-visible {
outline: 2px solid var(--yellow);
outline-offset: 3px;
border-radius: 6px;
}
.btn:focus-visible,
.nav-link:focus-visible,
.nav-cta:focus-visible,
.nav-burger:focus-visible {
outline-offset: 4px;
}
/* ---------- #7 Reduced-motion compliance ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.aurora,
.marquee-track,
.cursor-glass,
.cursor-dot { animation: none !important; }
}
/* ---------- Contact-form validation error state (P5 #2) ----------
Marks fields that failed manual validation. Subtle red ring; preserves layout. */
.contact-form .is-error,
.contact-form input.is-error,
.contact-form select.is-error,
.contact-form textarea.is-error {
border-color: #ff6a6a !important;
box-shadow: 0 0 0 2px rgba(255, 106, 106, 0.18) !important;
}
.contact-form .contact-terms.is-error {
color: #ff6a6a;
}
.contact-form .contact-terms.is-error input[type="checkbox"] {
outline: 2px solid #ff6a6a;
outline-offset: 2px;
}
/* ====================================================================== */
/* === REBUILD PHASE 6 — Light & Fresh visual overhaul (Flow + Neon) === */
/* ====================================================================== */
/* Light is now the default. This block re-tunes the entire surface system
to a fresh yellow / turquoise / green gradient palette. All rules sit late
so they win against earlier phases via cascade. Everything is wrapped in
light scope where it matters; dark re-tuning lives at the very bottom. */
/* ---------- P6 #0 base body breath ---------- */
body {
background: var(--bg-0);
color: var(--ink);
}
/* Body type bump for legibility on lighter surfaces. */
body, p, li { font-size: 16.5px; }
.section-lead, .lead, .hero-sub, .fork-sub, .biz-hero-sub { line-height: 1.55; }
/* Consistent generous section rhythm. */
.section { padding: 110px 0; }
@media (max-width: 720px) { .section { padding: 80px 0; } }
/* Subtly alternate section bands so the page breathes. */
.section:nth-of-type(even) { background: linear-gradient(180deg, transparent, var(--bg-2) 35%, var(--bg-2) 65%, transparent); }
/* ---------- P6 #1 Aurora — pastel gradient mesh (light) ---------- */
.aurora::before, .aurora::after {
filter: blur(140px);
opacity: var(--aurora-opacity);
}
.aurora::before {
background:
radial-gradient(circle at 30% 30%, rgba(234,193,5,0.55) 0%, transparent 55%),
radial-gradient(circle at 70% 60%, rgba(0,175,185,0.50) 0%, transparent 55%);
}
.aurora::after {
background:
radial-gradient(circle at 30% 70%, rgba(0,120,103,0.45) 0%, transparent 55%),
radial-gradient(circle at 70% 30%, rgba(234,193,5,0.45) 0%, transparent 55%);
}
.aurora .grain {
background-image: radial-gradient(rgba(11,42,42,0.10) 1px, transparent 1px);
opacity: 0.18;
mix-blend-mode: multiply;
}
/* ---------- P6 #3 Buttons ---------- */
.btn-primary {
background: var(--grad-sun);
color: #0B2A2A;
border-color: transparent;
box-shadow:
0 10px 28px rgba(0,175,185,0.22),
0 4px 12px rgba(234,193,5,0.18),
inset 0 1px 0 rgba(255,255,255,0.45);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow:
0 16px 40px rgba(0,175,185,0.32),
0 6px 18px rgba(234,193,5,0.26),
inset 0 1px 0 rgba(255,255,255,0.45);
}
.btn-glass {
background: rgba(255,255,255,0.7);
border: 1px solid transparent;
color: var(--ink);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
/* Gradient ring via padding-box / border-box trick */
background-image:
linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),
var(--grad-spectrum);
background-origin: border-box;
background-clip: padding-box, border-box;
box-shadow: 0 6px 22px rgba(0,120,103,0.10);
}
.btn-glass:hover {
background-image:
linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)),
var(--grad-spectrum);
box-shadow: 0 10px 28px rgba(0,120,103,0.16);
}
/* Generic .btn-sun, .btn-meadow, .btn-citrus helpers — for future use */
.btn-sun { background: var(--grad-sun); color: #0B2A2A; border-color: transparent; }
.btn-meadow { background: var(--grad-meadow); color: #fff; border-color: transparent; }
.btn-citrus { background: var(--grad-citrus); color: #0B2A2A; border-color: transparent; }
/* ---------- P6 #4 Glass cards — light, airy, hairline ---------- */
.glass-card,
.problem-stat,
.solution-schematic,
.proof-quote,
.tcard,
.flow-step,
.dir-card,
.cta-block,
.contact-form-card,
.contact-collapse,
.matrix-wrap,
.demo-cal {
background: rgba(255,255,255,0.72) !important;
border: 1px solid rgba(0,120,103,0.16) !important;
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
box-shadow:
0 1px 0 rgba(255,255,255,0.85) inset,
0 18px 40px -22px rgba(0,120,103,0.22),
0 6px 18px -12px rgba(0,175,185,0.18) !important;
}
.glass-card:hover,
.problem-stat:hover,
.tcard:hover,
.flow-step:hover,
.dir-card:hover {
border-color: rgba(0,175,185,0.32) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.85) inset,
0 28px 60px -22px rgba(0,120,103,0.28),
0 10px 28px -14px rgba(0,175,185,0.26) !important;
}
/* Schematic mini-nodes inside the solution diagram */
.schematic-node {
background: rgba(255,255,255,0.6) !important;
border: 1px solid rgba(0,120,103,0.14) !important;
}
.schematic-node.n1 .schematic-label { color: var(--teal); }
.schematic-node.n2 .schematic-label { color: var(--green); }
.schematic-node.n3 .schematic-label { color: #b48b00; } /* darker yellow for AA */
/* Hero floating mockups */
.hero-floats .glass-card {
background: rgba(255,255,255,0.78) !important;
}
/* Demo-day calendar cells */
.dc-day {
background: rgba(255,255,255,0.55);
border-color: rgba(0,120,103,0.10);
}
.dc-day.glow {
background: var(--grad-soft-sun);
border-color: rgba(0,175,185,0.45);
box-shadow: 0 0 22px rgba(0,175,185,0.22), inset 0 1px 0 rgba(255,255,255,0.7);
}
.dc-day .d, .dc-day .n { color: var(--ink); }
.dc-day .d { color: var(--ink-3); }
/* ---------- P6 #2 Hero fork — split with new gradient halos ---------- */
.fork {
background:
linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.35)),
var(--grad-soft-spectrum);
border: 1px solid rgba(0,120,103,0.18);
box-shadow:
0 1px 0 rgba(255,255,255,0.7) inset,
0 40px 90px -30px rgba(0,120,103,0.24);
}
.fork-side { color: var(--ink); }
.fork-companies { background: linear-gradient(180deg, rgba(255,255,255,0.0), rgba(0,175,185,0.05)); }
.fork-candidates { background: linear-gradient(180deg, rgba(255,255,255,0.0), rgba(234,193,5,0.05)); }
.fork-companies .fork-eyebrow {
background: rgba(0,120,103,0.14);
color: #006858;
}
.fork-candidates .fork-eyebrow {
background: rgba(234,193,5,0.20);
color: #856e00;
}
.fork-companies .fork-glow {
background:
radial-gradient(circle at 80% 90%, rgba(0,175,185,0.28), transparent 55%),
radial-gradient(circle at 20% 10%, rgba(0,120,103,0.22), transparent 50%);
}
.fork-candidates .fork-glow {
background:
radial-gradient(circle at 20% 90%, rgba(234,193,5,0.30), transparent 55%),
radial-gradient(circle at 80% 10%, rgba(0,175,185,0.20), transparent 55%);
}
.fork-companies .fork-cta {
background: var(--grad-meadow);
color: #fff;
box-shadow:
0 10px 28px rgba(0,120,103,0.30),
inset 0 1px 0 rgba(255,255,255,0.22);
}
.fork-candidates .fork-cta {
background: var(--grad-sun);
color: #0B2A2A;
box-shadow:
0 10px 28px rgba(234,193,5,0.30),
inset 0 1px 0 rgba(255,255,255,0.42);
}
.fork-divider {
background: linear-gradient(180deg, transparent, rgba(0,120,103,0.18) 20%, rgba(0,120,103,0.18) 80%, transparent);
}
.fork-or {
background: rgba(255,255,255,0.88);
border: 1px solid rgba(0,120,103,0.18);
color: var(--ink-2);
}
@media (max-width: 900px) {
.fork-divider {
background: linear-gradient(90deg, transparent, rgba(0,120,103,0.18) 20%, rgba(0,120,103,0.18) 80%, transparent);
}
}
/* Hero brand headline — Foil's anchor moment treatment. */
.fork-headline {
font-size: clamp(42px, 6.4vw, 92px);
letter-spacing: -0.04em;
line-height: 1.02;
margin: 30px 0 0;
}
.fork-headline .grad {
background: var(--grad-spectrum);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 2px 18px rgba(0,175,185,0.18));
}
.fork-brand { margin: 0 auto 80px; }
.fork-sub { font-size: 19px; color: var(--ink-2); margin-top: 28px; max-width: 60ch; }
.fork-brand .hero-eyebrow .pill {
background: var(--grad-sun);
color: #0B2A2A;
}
/* ---------- P6 #5 Gradient text helpers (AA-safe over light bg) ---------- */
.txt-grad-yellow {
/* Yellow→deep-green keeps real contrast against off-white. */
background-image: linear-gradient(135deg, #b48b00 0%, #007867 100%) !important;
}
.txt-grad-blue {
background-image: linear-gradient(135deg, #00AFB9 0%, #005772 100%) !important;
}
.txt-grad-sun { background-image: var(--grad-sun) !important; }
.txt-grad-meadow { background-image: var(--grad-meadow) !important; }
.txt-grad-citrus { background-image: var(--grad-citrus) !important; }
.txt-grad-spectrum { background-image: var(--grad-spectrum) !important; }
.txt-grad-yellow, .txt-grad-blue,
.txt-grad-sun, .txt-grad-meadow, .txt-grad-citrus, .txt-grad-spectrum {
background-color: transparent !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
padding: 0.05em 0.05em 0.18em;
margin: 0 -0.05em -0.18em;
line-height: 1.15;
display: inline-block;
}
/* Other gradient-text classes used in headlines, re-tuned for AA on light */
.hero h1 .grad,
.cta-band h2 .grad,
.grad-biz,
.grad-ind {
background: var(--grad-spectrum) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
}
.grad-biz { background: var(--grad-meadow) !important; }
.grad-ind { background: var(--grad-sun) !important; }
/* ---------- P6 #6 Section bands & emphasis surfaces ---------- */
.section-problem, .problem-stats { background: transparent; }
.section-problem { background: var(--grad-soft-sun); }
.section-solution { background: transparent; }
.section-proof { background: var(--grad-soft-citrus); }
/* Proof quote pops on the citrus band */
.proof-quote {
background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.55)) !important;
border: 1px solid rgba(0,120,103,0.18) !important;
}
.proof-quote p { color: var(--ink); }
/* Proof case card */
.proof-case {
background: linear-gradient(135deg, rgba(0,175,185,0.10), rgba(234,193,5,0.10)) !important;
border: 1px solid rgba(0,120,103,0.18) !important;
}
.proof-case-eyebrow { color: #006858; }
.proof-case-arrow {
background: var(--grad-meadow);
color: #fff;
}
/* Problem stat numbers — keep yellow→teal but flip stops for contrast */
.problem-stat strong {
background: var(--grad-citrus);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ---------- P6 — Dual CTA single band (new index structure) ---------- */
.dualcta-band {
margin-top: 32px;
border-radius: var(--radius-lg);
padding: 4px;
background: var(--grad-spectrum);
box-shadow:
0 1px 0 rgba(255,255,255,0.6) inset,
0 30px 80px -28px rgba(0,120,103,0.32),
0 12px 32px -16px rgba(0,175,185,0.22);
}
.dualcta-band-inner {
display: flex;
align-items: stretch;
justify-content: center;
gap: 0;
padding: 28px 28px;
background: rgba(255,255,255,0.78);
border-radius: calc(var(--radius-lg) - 4px);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
}
.dualcta-link {
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 22px 28px;
font-size: clamp(20px, 2.4vw, 30px);
font-weight: 800;
letter-spacing: -0.022em;
text-decoration: none;
color: var(--ink);
border-radius: calc(var(--radius-lg) - 12px);
transition: background .3s, transform .25s, color .3s;
position: relative;
}
.dualcta-link-text {
background: var(--grad-meadow);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
transition: filter .3s;
}
.dualcta-link-ind .dualcta-link-text { background: var(--grad-sun); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dualcta-arrow-mark {
display: inline-grid;
place-items: center;
width: 44px; height: 44px;
border-radius: 50%;
font-size: 22px;
font-weight: 700;
background: var(--grad-meadow);
color: #fff;
transition: transform .25s, box-shadow .25s;
box-shadow: 0 6px 16px rgba(0,120,103,0.30);
}
.dualcta-link-ind .dualcta-arrow-mark {
background: var(--grad-sun);
color: #0B2A2A;
box-shadow: 0 6px 16px rgba(234,193,5,0.32);
}
.dualcta-link:hover .dualcta-arrow-mark { transform: translateX(4px); }
.dualcta-link:hover .dualcta-link-text { filter: brightness(1.05); }
.dualcta-band-sep {
width: 1px;
align-self: stretch;
background: linear-gradient(180deg, transparent, rgba(0,120,103,0.22), transparent);
margin: 0 8px;
}
@media (max-width: 720px) {
.dualcta-band-inner { flex-direction: column; padding: 18px; }
.dualcta-band-sep {
width: 100%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,120,103,0.22), transparent);
margin: 6px 0;
}
.dualcta-link { padding: 16px 14px; font-size: 22px; }
}
/* ---------- P6 #8 Glass cursor — light treatment ---------- */
.cursor-glass {
border: 1px solid rgba(0,175,185,0.45);
background: radial-gradient(circle at 30% 30%, rgba(234,193,5,0.18), rgba(255,255,255,0.04) 60%);
box-shadow:
0 0 0 1px rgba(255,255,255,0.4) inset,
0 8px 28px rgba(0,175,185,0.22),
0 0 50px rgba(0,120,103,0.14);
}
.cursor-glass.is-link {
background: radial-gradient(circle at 30% 30%, rgba(0,175,185,0.22), rgba(255,255,255,0.06) 60%);
border-color: rgba(0,120,103,0.55);
}
.cursor-dot {
background: var(--ink);
mix-blend-mode: multiply;
}
/* ---------- P6 #9 Footer — deep-teal band, light text ---------- */
.footer {
background: linear-gradient(180deg, #004e62 0%, #003d52 100%);
color: #EAF6F4;
border-top: 0;
padding: 110px 0 50px;
margin-top: 110px;
position: relative;
z-index: 2;
border-radius: 36px 36px 0 0;
}
.footer::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--grad-spectrum);
border-radius: 36px 36px 0 0;
}
.footer h6 { color: rgba(234,246,244,0.65); }
.footer-col a,
.footer-col a:visited,
[data-theme="light"] .footer p,
[data-theme="light"] .footer a,
[data-theme="light"] .footer-col a,
[data-theme="light"] .footer-col h6,
[data-theme="light"] .footer-bottom { color: rgba(234,246,244,0.82) !important; }
.footer-col a:hover { color: #fff !important; }
.footer .brand .logo { color: #fff; }
.footer .brand p { color: rgba(234,246,244,0.72); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.10);
color: rgba(234,246,244,0.55) !important;
}
.social {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.14);
color: #EAF6F4;
}
.social:hover {
background: var(--grad-sun);
color: #0B2A2A;
border-color: transparent;
}
[data-theme="light"] .footer-logo-img { filter: brightness(0) invert(1); }
/* ---------- P6 #10 Marquee — citrus band, ink dots ---------- */
.marquee {
background: var(--grad-soft-citrus);
border-top: 1px solid rgba(0,120,103,0.14);
border-bottom: 1px solid rgba(0,120,103,0.14);
}
.marquee::before { background: linear-gradient(90deg, var(--bg-0), transparent); }
.marquee::after { background: linear-gradient(-90deg, var(--bg-0), transparent); }
.marquee-item,
[data-theme="light"] .marquee-item {
color: #1f3a35 !important;
opacity: 0.85;
font-weight: 700;
}
.marquee-item .dot { background: var(--green); }
/* ---------- P6 #7 Bento + Plan cards (Business + Pricing) ---------- */
.bento .b {
background: rgba(255,255,255,0.72) !important;
border: 1px solid rgba(0,120,103,0.14) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.85) inset,
0 14px 36px -22px rgba(0,120,103,0.20) !important;
}
.bento .b:nth-child(6n+1) { background: linear-gradient(135deg, rgba(255,255,255,0.78), var(--grad-soft-sun)) !important; }
.bento .b:nth-child(6n+2) { background: linear-gradient(135deg, rgba(255,255,255,0.78), var(--grad-soft-meadow)) !important; }
.bento .b:nth-child(6n+3) { background: linear-gradient(135deg, rgba(255,255,255,0.78), var(--grad-soft-citrus)) !important; }
.bento .b:nth-child(6n+4) { background: linear-gradient(135deg, rgba(255,255,255,0.78), var(--grad-soft-spectrum)) !important; }
.bento .b:nth-child(6n+5) { background: linear-gradient(135deg, rgba(255,255,255,0.78), var(--grad-soft-meadow)) !important; }
.bento .b:nth-child(6n) { background: linear-gradient(135deg, rgba(255,255,255,0.78), var(--grad-soft-sun)) !important; }
.bento .b:hover {
border-color: rgba(0,175,185,0.32) !important;
transform: translateY(-6px);
}
/* Plan tiers (Pricing) */
.plan-tier {
background: rgba(255,255,255,0.78) !important;
border: 1px solid rgba(0,120,103,0.16) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.85) inset,
0 22px 50px -30px rgba(0,120,103,0.22) !important;
backdrop-filter: blur(18px) saturate(160%);
}
.plan-tier:hover {
border-color: rgba(0,175,185,0.32) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.85) inset,
0 32px 60px -28px rgba(0,120,103,0.28) !important;
}
.plan-tier.is-recommended {
background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65)) !important;
border: 1px solid transparent !important;
background-image:
linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.65)),
var(--grad-spectrum) !important;
background-origin: border-box;
background-clip: padding-box, border-box;
box-shadow:
0 1px 0 rgba(255,255,255,0.95) inset,
0 30px 70px -22px rgba(0,175,185,0.28),
0 14px 30px -18px rgba(234,193,5,0.22) !important;
}
.pt-halo {
background: conic-gradient(from 0deg,
rgba(234,193,5,0.0),
rgba(234,193,5,0.40),
rgba(0,175,185,0.40),
rgba(0,120,103,0.30),
rgba(234,193,5,0.0)
);
opacity: 0.45;
}
.pt-badge {
background: var(--grad-spectrum);
color: #0B2A2A;
}
.pt-features li::before { background-color: var(--green); }
.pt-cta-primary {
background: var(--grad-meadow);
border-color: transparent;
color: #fff;
}
.pt-cta-primary:hover {
background: var(--grad-spectrum);
border-color: transparent;
color: #0B2A2A;
filter: saturate(1.1);
}
.pt-cta {
border-color: rgba(0,120,103,0.32);
color: var(--ink);
}
.pt-cta:hover {
background: var(--ink);
border-color: var(--ink);
color: #fff;
}
/* ---------- P6 — Business hero & visual ---------- */
.biz-cta {
background: var(--grad-meadow);
color: #fff;
box-shadow:
0 12px 30px rgba(0,120,103,0.28),
inset 0 1px 0 rgba(255,255,255,0.20);
}
.biz-cta:hover {
box-shadow:
0 18px 44px rgba(0,120,103,0.38),
inset 0 1px 0 rgba(255,255,255,0.22);
}
.biz-hero-visual::before {
width: 420px; height: 420px;
background:
radial-gradient(circle at 35% 30%, rgba(0,175,185,0.32), transparent 55%),
radial-gradient(circle at 65% 70%, rgba(0,120,103,0.26), transparent 55%);
filter: blur(60px);
}
.demo-cal-live {
background: rgba(0,120,103,0.16);
color: #006858;
}
.demo-cal-live .dot {
background: var(--green);
box-shadow: 0 0 8px var(--green);
}
/* ---------- P6 — Individual hero halo flips to yellow→teal ---------- */
.ind-hero-visual::before {
background:
radial-gradient(circle at 35% 30%, rgba(234,193,5,0.32), transparent 55%),
radial-gradient(circle at 65% 70%, rgba(0,175,185,0.28), transparent 55%);
filter: blur(60px);
}
/* ---------- P6 — Dir cards (homepage choose-your-path) ---------- */
.dir-card.biz .label { background: rgba(0,120,103,0.16); color: #006858; }
.dir-card.ind .label { background: rgba(234,193,5,0.20); color: #856e00; }
.dir-card.biz .glow { background: var(--green); opacity: 0.18; }
.dir-card.ind .glow { background: var(--yellow); opacity: 0.18; }
/* ---------- P6 — Tabs (try-before-you-apply) ---------- */
.tabs {
background: rgba(255,255,255,0.7);
border: 1px solid rgba(0,120,103,0.14);
backdrop-filter: blur(12px);
}
.tabs button { color: var(--ink-2); }
.tabs button.on {
background: var(--grad-meadow);
color: #fff;
}
/* ---------- P6 — Stat row numbers gradient ---------- */
.stat-row .stat strong {
background: var(--grad-spectrum);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ---------- P6 — Selection & focus ---------- */
::selection { background: rgba(0,175,185,0.30); color: var(--ink); }
/* Focus rings: switch to deep teal so they don't bleed on yellow. */
:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 3px;
border-radius: 6px;
}
.btn:focus-visible,
.nav-link:focus-visible,
.nav-cta:focus-visible,
.nav-burger:focus-visible {
outline-offset: 4px;
outline-color: var(--blue);
}
/* ---------- P6 — Nav: pill + theme-toggle ---------- */
.nav {
background: rgba(255,255,255,0.72);
border: 1px solid rgba(0,120,103,0.14);
box-shadow:
0 1px 0 rgba(255,255,255,0.7) inset,
0 10px 36px rgba(0,120,103,0.14);
}
.nav-link { color: var(--ink-2) !important; }
.nav-link:hover { color: var(--ink) !important; }
.nav-cta {
background: var(--grad-meadow);
color: #fff !important;
border-color: transparent;
}
.nav-cta:hover { filter: saturate(1.1); }
.theme-toggle { color: var(--ink-2); }
.nav-burger { color: var(--ink); }
@media (max-width: 980px) {
.nav.is-open .nav-links {
background: rgba(255,255,255,0.92);
border-color: rgba(0,120,103,0.14);
box-shadow: 0 30px 60px rgba(0,120,103,0.18);
}
}
/* ---------- P6 — Dualcta-card (legacy: still used on other pages?) ---------- */
.dualcta-card {
background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.55)) !important;
border: 1px solid rgba(0,120,103,0.16) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.85) inset,
0 20px 50px -28px rgba(0,120,103,0.22) !important;
}
.dualcta-card.biz::before { background: radial-gradient(circle at 80% 100%, rgba(0,175,185,0.22), transparent 60%); }
.dualcta-card.ind::before { background: radial-gradient(circle at 80% 100%, rgba(234,193,5,0.22), transparent 60%); }
.dualcta-card.biz .dualcta-eyebrow { background: rgba(0,120,103,0.16); color: #006858; }
.dualcta-card.ind .dualcta-eyebrow { background: rgba(234,193,5,0.22); color: #856e00; }
.dualcta-arrow {
background: rgba(255,255,255,0.7);
border-color: rgba(0,120,103,0.18);
color: var(--ink);
}
/* ---------- P6 — CTA band (about / promocraft / pricing footers) ---------- */
.cta-band {
background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.45)),
var(--grad-soft-spectrum) !important;
border: 1px solid rgba(0,120,103,0.18) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.85) inset,
0 30px 70px -30px rgba(0,120,103,0.28) !important;
}
.cta-band h2 { color: var(--ink); }
.cta-band p { color: var(--ink-2); }
/* ---------- P6 — Testimonial cards ---------- */
.tcard p { color: var(--ink); }
.tcard p::before { color: var(--teal); }
.tcard .who .av { background: var(--grad-meadow); }
.tcard .who .name { color: var(--ink); }
/* ---------- P6 — Store buttons ---------- */
.store-btn {
background: var(--ink);
color: #FAFBF5;
}
/* ---------- P6 — Type bumps on light surfaces ---------- */
.section-title { letter-spacing: -0.03em; }
.section-eyebrow { letter-spacing: 0.18em; }
/* ---------- P6 — Hero floating cards readability ---------- */
.hero-float-card { color: var(--ink); }
.hero-float-card .lbl,
.hero-float-card .sub { color: var(--ink-3); }
.hero-float-card .ttl { color: var(--ink); }
/* ---------- P6 — Mobile breath check (kept brief) ---------- */
@media (max-width: 980px) {
.section { padding: 90px 0; }
}
@media (max-width: 600px) {
.section { padding: 72px 0; }
body, p, li { font-size: 16px; }
}
@media (max-width: 380px) {
.dualcta-band { padding: 3px; }
.dualcta-band-inner { padding: 14px; }
}
/* ====================================================================== */
/* === P6 — Dark-mode re-tune (secondary now, but stays elegant) === */
/* ====================================================================== */
[data-theme="dark"] body { background: var(--bg-0); color: var(--ink); }
[data-theme="dark"] .aurora::before {
background:
radial-gradient(circle at 30% 30%, rgba(0,175,185,0.45) 0%, transparent 60%),
radial-gradient(circle at 70% 60%, rgba(234,193,5,0.25) 0%, transparent 60%);
}
[data-theme="dark"] .aurora::after {
background:
radial-gradient(circle at 30% 70%, rgba(0,120,103,0.40) 0%, transparent 55%),
radial-gradient(circle at 70% 30%, rgba(234,193,5,0.30) 0%, transparent 55%);
}
[data-theme="dark"] .aurora .grain {
background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
opacity: 0.32;
mix-blend-mode: overlay;
}
[data-theme="dark"] .btn-primary {
background: var(--grad-sun);
color: #0B2A2A !important;
}
[data-theme="dark"] .btn-glass {
background-image:
linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)),
var(--grad-spectrum);
color: var(--ink);
}
[data-theme="dark"] .nav {
background: rgba(10,13,30,0.55);
border-color: rgba(255,255,255,0.08);
box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
[data-theme="dark"] .nav-link { color: var(--ink-2) !important; }
[data-theme="dark"] .nav-cta {
background: var(--grad-meadow);
color: #fff !important;
}
[data-theme="dark"] .glass-card,
[data-theme="dark"] .problem-stat,
[data-theme="dark"] .solution-schematic,
[data-theme="dark"] .proof-quote,
[data-theme="dark"] .tcard,
[data-theme="dark"] .flow-step,
[data-theme="dark"] .dir-card,
[data-theme="dark"] .cta-block,
[data-theme="dark"] .contact-form-card,
[data-theme="dark"] .contact-collapse,
[data-theme="dark"] .matrix-wrap,
[data-theme="dark"] .demo-cal {
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
box-shadow: 0 30px 80px rgba(0,0,0,0.35) !important;
}
[data-theme="dark"] .fork {
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border-color: rgba(255,255,255,0.10);
box-shadow: 0 30px 100px rgba(0,0,0,0.35);
}
[data-theme="dark"] .fork-companies .fork-eyebrow { background: rgba(0,175,185,0.18); color: var(--teal); }
[data-theme="dark"] .fork-candidates .fork-eyebrow { background: rgba(234,193,5,0.18); color: var(--yellow); }
[data-theme="dark"] .fork-or {
background: var(--bg-0);
border-color: rgba(255,255,255,0.10);
color: var(--ink-3);
}
[data-theme="dark"] .marquee {
background: transparent;
border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .marquee::before { background: linear-gradient(90deg, var(--bg-0), transparent); }
[data-theme="dark"] .marquee::after { background: linear-gradient(-90deg, var(--bg-0), transparent); }
[data-theme="dark"] .marquee-item { color: var(--ink-3) !important; opacity: 0.7; }
[data-theme="dark"] .marquee-item .dot { background: var(--teal); }
[data-theme="dark"] .footer {
background: transparent;
color: var(--ink-2);
border-top: 1px solid rgba(255,255,255,0.08);
border-radius: 0;
}
[data-theme="dark"] .footer::before { display: none; }
[data-theme="dark"] .footer h6 { color: var(--ink-3); }
[data-theme="dark"] .footer-col a { color: var(--ink-2) !important; }
[data-theme="dark"] .footer .brand p { color: var(--ink-3); }
[data-theme="dark"] .footer-bottom { color: var(--ink-3) !important; border-top-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .social { background: var(--glass); color: var(--ink-2); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .footer-logo-img { filter: none; }
[data-theme="dark"] .cursor-glass {
border: 1px solid rgba(255,255,255,0.35);
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), rgba(255,255,255,0.02) 60%);
box-shadow:
0 0 0 1px rgba(255,255,255,0.06) inset,
0 8px 32px rgba(0,175,185,0.25),
0 0 60px rgba(0,87,114,0.18);
}
[data-theme="dark"] .cursor-dot { background: var(--ink); mix-blend-mode: difference; }
[data-theme="dark"] .dualcta-band {
background: var(--grad-spectrum);
}
[data-theme="dark"] .dualcta-band-inner {
background: rgba(10,13,30,0.7);
}
[data-theme="dark"] .dualcta-link { color: var(--ink); }
[data-theme="dark"] .cta-band {
background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
}
[data-theme="dark"] .plan-tier {
background: var(--glass) !important;
border-color: rgba(255,255,255,0.10) !important;
}
[data-theme="dark"] .plan-tier.is-recommended {
background-image:
linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
var(--grad-spectrum) !important;
}
[data-theme="dark"] .bento .b {
background: rgba(255,255,255,0.04) !important;
border-color: rgba(255,255,255,0.10) !important;
}
[data-theme="dark"] .bento .b:nth-child(6n+1),
[data-theme="dark"] .bento .b:nth-child(6n+2),
[data-theme="dark"] .bento .b:nth-child(6n+3),
[data-theme="dark"] .bento .b:nth-child(6n+4),
[data-theme="dark"] .bento .b:nth-child(6n+5),
[data-theme="dark"] .bento .b:nth-child(6n) {
background: rgba(255,255,255,0.04) !important;
}
[data-theme="dark"] .section { background: transparent !important; }
[data-theme="dark"] .section-problem { background: transparent !important; }
[data-theme="dark"] .section-proof { background: transparent !important; }
[data-theme="dark"] .section:nth-of-type(even) { background: transparent; }
/* Dark focus ring: keep yellow for visibility on dark. */
[data-theme="dark"] :focus-visible {
outline-color: var(--yellow);
}
/* End Phase 6 */
/* ====================================================================== */
/* === REBUILD PHASE 8 — Market page + kill black + round every edge === */
/* ====================================================================== */
/* This block sits dead-last so it wins the cascade. It does three things:
A) introduces the Market.html masonry gallery system,
B) kills any remaining dark/black surfaces on cards/buttons/mockups,
C) ratifies the radius-token system and rounds every edge family-wide.
Append-only. Earlier phase blocks stay untouched. */
/* ---------- P8 #0 Radius token system ---------- */
:root {
--radius-xs: 8px; /* small chips, badges, tags */
--radius-sm: 12px; /* inputs, small buttons */
--radius-md: 18px; /* mid buttons, small cards */
--radius-lg: 24px; /* cards, sections */
--radius-xl: 32px; /* big hero cards, plan cards */
--radius-pill: 9999px; /* pills, avatars, store badges */
}
/* ---------- P8 #1 KILL THE BLACK — hero-float-card → light glass ---------- */
.hero-float-card,
html body .hero-float-card {
background: rgba(255,255,255,0.78) !important;
border: 1px solid transparent !important;
background-image:
linear-gradient(rgba(255,255,255,0.82), rgba(255,255,255,0.78)),
var(--grad-sun) !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
backdrop-filter: blur(18px) saturate(160%) !important;
-webkit-backdrop-filter: blur(18px) saturate(160%) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.9) inset,
0 22px 50px -22px rgba(0,120,103,0.28),
0 8px 20px -10px rgba(234,193,5,0.22) !important;
border-radius: var(--radius-lg) !important;
color: var(--ink) !important;
}
.hero-float-card.bot,
html body .hero-float-card.bot {
background-image:
linear-gradient(rgba(255,255,255,0.82), rgba(255,255,255,0.78)),
var(--grad-meadow) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.9) inset,
0 22px 50px -22px rgba(0,175,185,0.28),
0 8px 20px -10px rgba(0,120,103,0.22) !important;
}
.hero-float-card .ttl { color: var(--ink) !important; }
.hero-float-card .sub,
.hero-float-card .lbl { color: var(--ink-3) !important; }
.hero-float-card .lbl { color: #006858 !important; }
.hero-float-card .lbl::before { background: var(--green); box-shadow: 0 0 10px rgba(0,120,103,0.45); }
.hero-float-card .quote {
background: rgba(0,120,103,0.06) !important;
color: var(--ink-2) !important;
border-radius: var(--radius-md) !important;
}
.hero-float-card .price {
background: var(--grad-spectrum);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ---------- P8 #2 KILL THE BLACK — phone preview internals ---------- */
.phone-card,
html body .phone-card {
background: rgba(255,255,255,0.92) !important;
border: 1px solid rgba(0,120,103,0.12) !important;
box-shadow: 0 12px 28px -16px rgba(0,120,103,0.22) !important;
border-radius: var(--radius-lg) !important;
}
.phone-card-img,
html body .phone-card-img {
background: var(--grad-soft-spectrum) !important;
border-radius: var(--radius-md) !important;
}
.phone-card-img .cat { color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
.phone-card-img .bookmark { color: var(--ink-3); }
.phone-card-body { color: var(--ink); }
.phone-card-body .name { color: var(--ink); }
.phone-card-body .sub { color: var(--ink-2); }
.phone-card-body .years { color: var(--ink-3); }
.phone-card-body .reactions { color: var(--ink-3); }
.phone-card-body .check { color: var(--green); }
.phone-card .phone-cta,
html body .phone-card .phone-cta {
background: var(--grad-sun) !important;
color: var(--ink) !important;
border-radius: var(--radius-pill) !important;
}
/* App mobile m-card preview (legacy thumbnails) */
.app-mobile .m-card,
html body .app-mobile .m-card {
background: rgba(255,255,255,0.78) !important;
border: 1px solid rgba(0,120,103,0.12) !important;
color: var(--ink) !important;
border-radius: var(--radius-lg) !important;
}
.app-mobile .m-card .info .name { color: var(--ink); }
.app-mobile .m-card .info .role { color: var(--ink-3); }
.app-mobile .m-card .info .price { color: #856e00; }
.app-mobile .chip.on,
html body .app-mobile .chip.on {
background: var(--grad-sun);
color: var(--ink);
border-radius: var(--radius-pill);
}
/* ---------- P8 #3 KILL THE BLACK — store buttons → light glass ---------- */
.store-btn,
html body .store-btn {
background: rgba(255,255,255,0.92) !important;
color: var(--ink) !important;
border: 1px solid transparent !important;
background-image:
linear-gradient(rgba(255,255,255,0.92), rgba(255,255,255,0.92)),
var(--grad-spectrum) !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
box-shadow:
0 6px 16px -8px rgba(0,120,103,0.22),
0 1px 0 rgba(255,255,255,0.9) inset !important;
border-radius: var(--radius-pill) !important;
}
.store-btn:hover {
filter: brightness(1.02);
box-shadow:
0 10px 22px -10px rgba(0,120,103,0.28),
0 1px 0 rgba(255,255,255,0.9) inset !important;
}
/* Marquee — already light from P6 but lock ink-on-light here too */
.marquee, html body .marquee { border-radius: var(--radius-xl); }
.marquee-item, html body .marquee-item { color: var(--ink) !important; }
.marquee-item .dot, html body .marquee-item .dot { background: var(--green) !important; }
/* ---------- P8 #4 KILL THE BLACK — any remaining var(--ink) surfaces ---------- */
/* Anything that uses var(--ink) as a button/pill surface flips to a gradient.
We don't touch text colors — only known-visible surface elements. */
[data-theme="light"] .pt-cta:hover {
background: var(--grad-meadow);
border-color: transparent;
color: #fff;
}
[data-theme="light"] .dualcta-card:hover .dualcta-arrow,
[data-theme="light"] .dir-card:hover .arrow {
background: var(--grad-sun) !important;
color: var(--ink) !important;
border-color: transparent !important;
}
/* ---------- P8 #5 RADIUS CASCADE — pebbles, not bubbles ---------- */
/* Buttons & utility actions */
html body .btn,
html body .btn-primary,
html body .btn-glass,
html body .btn-sun,
html body .btn-meadow,
html body .btn-citrus,
html body .nav-cta,
html body .nav-link,
html body .store-btn,
html body .contact-submit,
html body .role-tab,
html body .fork-cta,
html body .biz-cta,
html body .ind-cta,
html body .bwu-cta,
html body .pt-cta,
html body .pt-cta-primary,
html body .dualcta-link,
html body .market-chip,
html body .phone-cta,
html body .mk-link {
border-radius: var(--radius-pill) !important;
}
/* Cards — standard */
html body .glass-card,
html body .problem-stat,
html body .solution-schematic,
html body .proof-quote,
html body .tcard,
html body .flow-step,
html body .dir-card,
html body .cta-block,
html body .contact-form-card,
html body .contact-collapse,
html body .matrix-wrap,
html body .demo-cal,
html body .schematic-node,
html body .bento .b,
html body .b,
html body .v,
html body .s-step,
html body .exp-card,
html body .pillar,
html body .pillar-card,
html body .person,
html body .reel,
html body .xminder,
html body .dualcta-card,
html body .proof-case,
html body .pricing-card,
html body .level,
html body .info-card,
html body .feature,
html body .feature-card,
html body .stat-card,
html body .quote-card {
border-radius: var(--radius-lg) !important;
}
/* Cards — hero/feature/plan tier */
html body .plan-tier,
html body .biz-hero-card,
html body .ind-hero-card,
html body .hero-card {
border-radius: var(--radius-xl) !important;
}
/* Bands & soft surfaces */
html body .marquee,
html body .section-problem .problem-stats,
html body .cta-band,
html body .dualcta-band,
html body .fork {
border-radius: var(--radius-xl) !important;
}
html body .dualcta-band-inner { border-radius: calc(var(--radius-xl) - 4px) !important; }
/* Inputs */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html body textarea,
html body select {
border-radius: var(--radius-sm) !important;
}
/* Content images (skip logos / decorative SVG) */
html body img:not(.logo-img):not(.footer-logo-img):not([alt*="logo" i]):not([alt*="Exminds" i]),
html body .mk-image,
html body .phone-card-img,
html body .card-img,
html body .feature-img,
html body .hero-img {
border-radius: var(--radius-md);
}
html body .hero-image,
html body .feature-img-lg,
html body .biz-hero-img,
html body .ind-hero-img {
border-radius: var(--radius-lg);
}
/* Pills, chips, badges, tags, labels */
html body .pill,
html body .chip,
html body .tag,
html body .badge,
html body .filter,
html body .toggle,
html body .role-tabs,
html body .billing-toggle,
html body .marquee-item,
html body .mk-tag,
html body .mk-source,
html body .dot {
border-radius: var(--radius-pill) !important;
}
/* Avatars */
html body .av,
html body .at-av,
html body .avatar,
html body .avatar-stack img,
html body .avatar-stack > *,
html body .profile-pic,
html body .person .img,
html body .reel-img,
html body .mk-initials {
border-radius: var(--radius-pill) !important;
}
/* Phone outer shells stay phone-shaped; their inner content rounds normally */
html body .iphone,
html body .phone,
html body .hero-phone {
border-radius: 56px !important;
}
html body .iphone .screen,
html body .phone .screen,
html body .hero-phone-screen {
border-radius: 44px !important;
}
html body .phone-card,
html body .m-card {
border-radius: var(--radius-md) !important;
}
/* Tables / matrix on Pricing */
html body table,
html body .matrix,
html body .matrix-wrap {
border-radius: var(--radius-lg) !important;
overflow: hidden;
}
/* Code / quote blocks */
html body pre,
html body code,
html body blockquote {
border-radius: var(--radius-md);
}
/* Mobile drawer */
html body .nav.is-open .nav-links {
border-radius: var(--radius-lg);
}
/* ---------- P8 #6 MARKET PAGE — hero ---------- */
.market-hero {
padding-top: 140px;
padding-bottom: 60px;
}
.market-hero-inner {
max-width: 920px;
margin: 0 auto;
text-align: center;
}
.market-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
color: var(--ink-2);
font-size: 12.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
}
.market-eyebrow .pill {
background: var(--grad-sun);
color: var(--ink);
padding: 6px 14px;
font-size: 11px;
letter-spacing: 0.16em;
border-radius: var(--radius-pill);
}
.market-headline {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: clamp(40px, 6vw, 84px);
line-height: 1.02;
letter-spacing: -0.04em;
margin: 0 0 28px;
color: var(--ink);
}
.market-headline .italic {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-weight: 400;
letter-spacing: -0.02em;
}
.market-sub {
font-size: 19px;
color: var(--ink-2);
max-width: 60ch;
margin: 0 auto;
line-height: 1.55;
}
/* ---------- P8 #7 MARKET PAGE — filter bar ---------- */
.market-filter-section {
padding: 0 0 24px;
}
.market-filter-bar {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
padding: 8px;
border-radius: var(--radius-pill);
background: rgba(255,255,255,0.7);
border: 1px solid rgba(0,120,103,0.14);
backdrop-filter: blur(12px) saturate(150%);
-webkit-backdrop-filter: blur(12px) saturate(150%);
box-shadow:
0 1px 0 rgba(255,255,255,0.85) inset,
0 10px 28px -16px rgba(0,120,103,0.20);
max-width: max-content;
margin: 0 auto;
}
.market-chip {
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent;
color: var(--ink-2);
font-family: inherit;
font-size: 13.5px;
font-weight: 700;
letter-spacing: -0.005em;
padding: 10px 18px;
border-radius: var(--radius-pill);
cursor: pointer;
transition: background .25s, color .25s, transform .25s;
}
.market-chip:hover { color: var(--ink); background: rgba(0,120,103,0.06); }
.market-chip.is-active {
background: var(--grad-meadow);
color: #fff;
box-shadow: 0 6px 16px -8px rgba(0,120,103,0.32);
}
/* ---------- P8 #8 MARKET PAGE — masonry gallery ---------- */
.market-gallery-section {
padding: 24px 0 80px;
}
.market-gallery {
column-count: 4;
column-gap: 22px;
}
@media (max-width: 1200px) { .market-gallery { column-count: 3; } }
@media (max-width: 800px) { .market-gallery { column-count: 2; column-gap: 16px; } }
@media (max-width: 500px) { .market-gallery { column-count: 1; } }
.mk-card {
display: block;
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
margin: 0 0 22px;
padding: 0;
background: rgba(255,255,255,0.82) !important;
border: 1px solid transparent !important;
background-image:
linear-gradient(rgba(255,255,255,0.82), rgba(255,255,255,0.82)),
var(--grad-soft-spectrum) !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border-radius: var(--radius-lg) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.9) inset,
0 18px 40px -22px rgba(0,120,103,0.22),
0 6px 18px -12px rgba(0,175,185,0.16);
overflow: hidden;
cursor: pointer;
transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s, border-color .28s;
color: var(--ink);
}
.mk-card:hover {
transform: translateY(-4px);
box-shadow:
0 1px 0 rgba(255,255,255,0.95) inset,
0 28px 60px -22px rgba(0,120,103,0.28),
0 12px 28px -14px rgba(0,175,185,0.24);
}
@media (max-width: 800px) { .mk-card { margin-bottom: 16px; } }
/* Card head: source mark + author */
.mk-card-head {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 18px 0;
}
.mk-source {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: var(--radius-md);
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.mk-source-linkedin {
background: linear-gradient(135deg, #0a66c2 0%, #00569e 100%);
color: #fff;
box-shadow: 0 4px 12px -4px rgba(10,102,194,0.4);
}
.mk-source-article {
background: var(--grad-meadow);
color: #fff;
font-family: 'Instrument Serif', serif;
font-size: 12px;
}
.mk-author { display: flex; flex-direction: column; min-width: 0; }
.mk-author strong {
font-size: 13.5px;
font-weight: 700;
color: var(--ink);
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mk-author small {
font-size: 11.5px;
color: var(--ink-3);
margin-top: 2px;
}
/* Card body text */
.mk-text,
.mk-snippet {
margin: 14px 18px 14px;
font-size: 14.5px;
line-height: 1.55;
color: var(--ink-2);
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mk-snippet {
-webkit-line-clamp: 3;
font-size: 14px;
}
.mk-title {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 18px;
letter-spacing: -0.015em;
line-height: 1.25;
color: var(--ink);
margin: 12px 18px 6px;
}
.mk-card-article .mk-title { font-size: 19px; margin-top: 14px; }
/* Tag pill on image-led cards */
.mk-tag {
display: inline-block;
padding: 5px 12px;
background: rgba(0,120,103,0.14);
color: #006858;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: var(--radius-pill);
margin: 16px 18px 0;
}
/* Image header for image-led cards */
.mk-image {
position: relative;
display: grid;
place-items: center;
width: 100%;
height: 180px;
border-radius: 0 !important; /* outer card already rounds — corners would clip */
overflow: hidden;
}
.mk-image-tall { height: 240px; }
.mk-initials {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-size: 64px;
font-weight: 400;
color: rgba(255,255,255,0.92);
text-shadow: 0 4px 14px rgba(0,0,0,0.18);
letter-spacing: -0.02em;
}
.mk-card-body { padding-bottom: 6px; }
/* Footer link inside each card */
.mk-link {
display: inline-block;
margin: 6px 18px 18px;
font-size: 13px;
font-weight: 700;
color: var(--ink);
text-decoration: none;
padding: 8px 14px;
background: rgba(0,120,103,0.06);
border: 1px solid rgba(0,120,103,0.12);
transition: background .25s, color .25s, border-color .25s;
}
.mk-link:hover {
background: var(--grad-sun);
color: var(--ink);
border-color: transparent;
}
/* ---------- P8 #9 DARK theme parity for new components ---------- */
[data-theme="dark"] .mk-card {
background: rgba(255,255,255,0.04) !important;
background-image: none !important;
border: 1px solid rgba(255,255,255,0.10) !important;
color: var(--ink);
}
[data-theme="dark"] .mk-text,
[data-theme="dark"] .mk-snippet { color: var(--ink-2); }
[data-theme="dark"] .mk-title,
[data-theme="dark"] .mk-author strong { color: var(--ink); }
[data-theme="dark"] .mk-link {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.12);
color: var(--ink);
}
[data-theme="dark"] .market-filter-bar {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .market-chip { color: var(--ink-2); }
[data-theme="dark"] .market-chip:hover { color: var(--ink); background: rgba(255,255,255,0.06); }
[data-theme="dark"] .market-headline { color: var(--ink); }
[data-theme="dark"] .market-sub { color: var(--ink-2); }
[data-theme="dark"] .market-eyebrow { color: var(--ink-3); }
[data-theme="dark"] .hero-float-card {
background: rgba(255,255,255,0.04) !important;
background-image: none !important;
border: 1px solid rgba(255,255,255,0.10) !important;
color: var(--ink) !important;
}
[data-theme="dark"] .hero-float-card .ttl { color: var(--ink) !important; }
[data-theme="dark"] .hero-float-card .sub { color: var(--ink-3) !important; }
[data-theme="dark"] .phone-card,
[data-theme="dark"] .app-mobile .m-card {
background: rgba(255,255,255,0.05) !important;
border-color: rgba(255,255,255,0.10) !important;
}
[data-theme="dark"] .store-btn {
background: rgba(255,255,255,0.04) !important;
background-image: none !important;
border-color: rgba(255,255,255,0.12) !important;
color: var(--ink) !important;
}
[data-theme="dark"] .marquee-item { color: var(--ink-3) !important; }
/* ---------- P8 #10 Section spacing tweak for Market gallery rhythm ---------- */
.market-hero + .market-filter-section { padding-top: 12px; }
.market-filter-section + .market-gallery-section { padding-top: 24px; }
/* End Phase 8 */
/* =====================================================================
REBUILD PHASE 9 — Market image-only cards + click-to-zoom lightbox
===================================================================== */
/* Cards are now full-bleed photo tiles (mk-card + mk-image on the ).
We need to neutralise the legacy .mk-image div rules (height 180px,
grid centring) when .mk-image is applied to the card itself, and let
the inner ![]()
drive natural masonry heights. */
html body a.mk-card.mk-image {
display: block;
width: 100%;
height: auto;
padding: 0;
margin: 0 0 22px;
text-decoration: none;
/* keep the card chrome (gradient hairline, shadow) but lose the
inner padding so the image goes edge-to-edge */
}
@media (max-width: 800px) {
html body a.mk-card.mk-image { margin-bottom: 16px; }
}
html body a.mk-card.mk-image > img {
display: block;
width: 100%;
height: auto;
border-radius: 0 !important; /* the card already rounds; image flush to corners */
margin: 0;
}
/* ---------- Lightbox ---------- */
.mk-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
padding: 24px;
animation: mkLbFade .22s ease;
}
.mk-lightbox[hidden] { display: none; }
@keyframes mkLbFade {
from { opacity: 0; }
to { opacity: 1; }
}
.mk-lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(11, 42, 42, 0.86);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
cursor: zoom-out;
}
.mk-lightbox-stage {
position: relative;
margin: 0;
display: grid;
place-items: center;
pointer-events: none; /* clicks pass through to backdrop except on img */
}
.mk-lightbox-stage > img {
pointer-events: auto;
max-width: 92vw;
max-height: 92vh;
width: auto;
height: auto;
border-radius: var(--radius-lg);
box-shadow:
0 30px 80px -20px rgba(0, 0, 0, 0.55),
0 8px 28px -12px rgba(0, 175, 185, 0.30);
background: #fff;
animation: mkLbPop .26s cubic-bezier(.2,.7,.2,1);
}
@keyframes mkLbPop {
from { opacity: 0; transform: scale(.96); }
to { opacity: 1; transform: scale(1); }
}
/* Buttons — circular glass with brand gradient hairline */
.mk-lb-btn {
position: absolute;
z-index: 2;
width: 48px;
height: 48px;
display: grid;
place-items: center;
border: 0;
padding: 0;
border-radius: 50%;
font-family: 'Montserrat', sans-serif;
font-size: 28px;
line-height: 1;
color: #fff;
cursor: pointer;
background: rgba(255, 255, 255, 0.08) !important;
background-image:
linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0.10)),
var(--grad-soft-spectrum) !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
border: 1px solid transparent !important;
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
box-shadow:
0 1px 0 rgba(255,255,255,0.18) inset,
0 12px 28px -12px rgba(0,0,0,0.45);
transition: transform .22s cubic-bezier(.2,.7,.2,1), background-color .22s;
}
.mk-lb-btn:hover { transform: scale(1.08); }
.mk-lb-btn:focus-visible {
outline: 2px solid var(--yellow, #EAC105);
outline-offset: 3px;
}
.mk-lb-close {
top: 20px;
right: 24px;
font-size: 26px;
font-weight: 300;
}
.mk-lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.mk-lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
.mk-lb-prev:hover { transform: translateY(-50%) scale(1.08); }
.mk-lb-next:hover { transform: translateY(-50%) scale(1.08); }
.mk-lb-prev { padding-right: 3px; } /* optical centring of ‹ */
.mk-lb-next { padding-left: 3px; } /* optical centring of › */
@media (max-width: 600px) {
.mk-lb-btn { width: 42px; height: 42px; font-size: 24px; }
.mk-lb-close { top: 14px; right: 14px; }
.mk-lb-prev { left: 10px; }
.mk-lb-next { right: 10px; }
.mk-lightbox-stage > img { max-width: 96vw; max-height: 86vh; }
}
/* Prevent body scroll while lightbox is open */
body.mk-lb-open { overflow: hidden; }
/* Dark theme parity — backdrop tone matches */
[data-theme="dark"] .mk-lightbox-backdrop {
background: rgba(4, 16, 18, 0.92);
}
/* End Phase 9 — Market lightbox */
/* =====================================================================
REBUILD PHASE 9 — BRAND RECOVERY (Neon + Flow)
=====================================================================
Audit & scope: this block addresses six concrete bugs reported on
index.html and lifts the visual energy across the unified shell.
Rules touched (override only — no edits to Phase 6/8 blocks):
- :root token retune (lighter, more "fresh" surfaces; aurora bump)
- .aurora::before / .aurora::after — new keyframes + extra blob layer
- .nav-logo, .logo-mark, .logo-word — gradient wordmark replaces PNG
- .nav-cta, .btn-primary, .dualcta-arrow, .pt-cta-primary, etc. —
shimmering brand gradient
- .fork-headline .grad, .grad — animated gradient text
- .theme-toggle — glass pill with gradient hairline (was dark)
- .hero-eyebrow .pill, .pill — soft citrus pill with green dot
- .demo-cal-live .dot — green not olive
- prefers-reduced-motion fallback for all new keyframes
- dark-theme overrides at the bottom
===================================================================== */
/* ---------- P9 #0 — Surface retune: fresher cream-mint ---------- */
:root {
/* Backgrounds: drift away from neutral grey toward warm cream + mint. */
--bg: #FBFEF8; /* very light mint-cream — primary surface */
--bg-0: #FBFEF8; /* re-tunes Phase 6 base */
--bg-1: #F5FCF1; /* mint cream — for subtle bands */
--bg-2: #FFFBEC; /* warm cream-yellow for alternating bands */
--bg-3: #E8F8EF; /* soft mint for emphasis bands (marquee, feature bands) */
/* Aurora pops a little louder on the brighter surface. */
--aurora-opacity: 0.62;
}
/* Make sure body picks up the new surface (Phase 6 set it from --bg-0). */
body { background: var(--bg-0); }
/* Alternating band re-tuned to warm cream */
.section:nth-of-type(even) {
background: linear-gradient(180deg, transparent, var(--bg-2) 35%, var(--bg-2) 65%, transparent);
}
/* Marquee + soft feature bands lean on the mint surface */
.marquee { background: var(--bg-3); }
/* ---------- P9 #1 — Animated aurora ---------- */
/* Three drifting blobs: yellow, teal, green. The Phase-6 base sets
the two pseudo-elements; we re-paint them with brand colours and
add a third blob via a body-level fixed pseudo so we get three layers. */
.aurora::before {
background:
radial-gradient(circle at 30% 30%, rgba(234,193,5,0.55) 0%, transparent 55%),
radial-gradient(circle at 70% 60%, rgba(0,175,185,0.50) 0%, transparent 55%);
/* let our new keyframe drive motion (overrides Phase 1 `drift`) */
animation: aurora-drift-a 24s cubic-bezier(0.4, 0, 0.2, 1) infinite;
transform-origin: center;
}
.aurora::after {
background:
radial-gradient(circle at 30% 70%, rgba(0,120,103,0.48) 0%, transparent 55%),
radial-gradient(circle at 70% 30%, rgba(234,193,5,0.42) 0%, transparent 55%);
animation: aurora-drift-b 28s cubic-bezier(0.4, 0, 0.2, 1) -8s infinite;
transform-origin: center;
}
/* Third blob — a wide teal/green halo painted on the .aurora element itself */
.aurora {
background:
radial-gradient(60vw 60vw at 50% 110%, rgba(0,175,185,0.22), transparent 60%),
radial-gradient(50vw 50vw at 110% 50%, rgba(0,120,103,0.18), transparent 60%);
animation: aurora-drift-c 26s cubic-bezier(0.4, 0, 0.2, 1) -14s infinite;
}
@media (prefers-reduced-motion: no-preference) {
@keyframes aurora-drift-a {
0% { transform: translate(0vw, 0vw) scale(1) rotate(0deg); filter: hue-rotate(0deg); }
25% { transform: translate(6vw, -3vw) scale(1.10) rotate(8deg); filter: hue-rotate(8deg); }
50% { transform: translate(10vw, 4vw) scale(1.18) rotate(-4deg); filter: hue-rotate(-4deg); }
75% { transform: translate(-4vw, 6vw) scale(1.08) rotate(6deg); filter: hue-rotate(6deg); }
100% { transform: translate(0vw, 0vw) scale(1) rotate(0deg); filter: hue-rotate(0deg); }
}
@keyframes aurora-drift-b {
0% { transform: translate(0vw, 0vw) scale(1) rotate(0deg); filter: hue-rotate(0deg); }
33% { transform: translate(-8vw, 4vw) scale(1.12) rotate(-6deg); filter: hue-rotate(-10deg); }
66% { transform: translate(6vw, -6vw) scale(1.20) rotate(10deg); filter: hue-rotate(12deg); }
100% { transform: translate(0vw, 0vw) scale(1) rotate(0deg); filter: hue-rotate(0deg); }
}
@keyframes aurora-drift-c {
0% { background-position: 0% 50%, 100% 50%; }
50% { background-position: 60% 30%, 40% 70%; }
100% { background-position: 0% 50%, 100% 50%; }
}
}
/* ---------- P9 #2 — Gradient wordmark (replaces black PNG logo) ---------- */
.nav-logo {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
height: auto;
line-height: 1;
/* unset legacy filter that was darkening the PNG */
filter: none !important;
}
.nav-logo .logo-mark {
display: inline-block;
width: 28px;
height: 28px;
border-radius: var(--radius-pill);
background: var(--grad-spectrum);
background-size: 200% 200%;
box-shadow:
0 6px 14px -6px rgba(0, 175, 185, 0.45),
0 2px 6px -2px rgba(234, 193, 5, 0.40),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
flex-shrink: 0;
}
.nav-logo .logo-word {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 22px;
letter-spacing: -0.025em;
line-height: 1;
background: linear-gradient(120deg, #EAC105, #00AFB9, #007867, #EAC105);
background-size: 300% 300%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
.nav-logo .logo-mark,
.nav-logo .logo-word {
animation: brand-shimmer 9s ease-in-out infinite;
}
}
.nav-logo:hover .logo-mark { transform: scale(1.05); transition: transform .25s; }
.nav-logo:hover .logo-word { filter: saturate(1.15); }
/* Kill the [data-theme="light"] .nav-logo .logo-img { filter: brightness(0) } from earlier */
[data-theme="light"] .nav-logo,
[data-theme="light"] .nav-logo .logo-word,
[data-theme="light"] .nav-logo .logo-mark { filter: none !important; }
/* Mobile sizing */
@media (max-width: 980px) {
.nav-logo .logo-mark { width: 24px; height: 24px; }
.nav-logo .logo-word { font-size: 19px; }
}
@media (max-width: 380px) {
.nav-logo { gap: 8px; }
.nav-logo .logo-mark { width: 22px; height: 22px; }
.nav-logo .logo-word { font-size: 17px; }
}
/* ---------- P9 #3 — Animated brand gradient on primary CTAs ---------- */
@media (prefers-reduced-motion: no-preference) {
@keyframes brand-shimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
}
/* Primary actions: paint with a moving 4-stop spectrum.
Use [data-theme="light"] so the dark-theme keeps Phase-6 treatment. */
[data-theme="light"] .btn-primary,
[data-theme="light"] .nav-cta,
[data-theme="light"] .pt-cta-primary,
[data-theme="light"] .biz-cta,
[data-theme="light"] .ind-cta,
[data-theme="light"] .bwu-cta,
[data-theme="light"] .contact-submit,
[data-theme="light"] .proof-case-arrow,
[data-theme="light"] .dualcta-arrow,
[data-theme="light"] .fork-companies .fork-cta,
[data-theme="light"] .dualcta-link-biz .dualcta-arrow-mark {
background: linear-gradient(120deg, #EAC105, #00AFB9, #007867, #EAC105) !important;
background-size: 300% 300% !important;
color: #ffffff !important;
border-color: transparent !important;
}
/* Candidate-flavour CTAs lean yellow → mint */
[data-theme="light"] .fork-candidates .fork-cta,
[data-theme="light"] .dualcta-link-ind .dualcta-arrow-mark {
background: linear-gradient(120deg, #EAC105, #FFD93D, #00AFB9, #EAC105) !important;
background-size: 300% 300% !important;
color: #0B2A2A !important;
border-color: transparent !important;
}
@media (prefers-reduced-motion: no-preference) {
[data-theme="light"] .btn-primary,
[data-theme="light"] .nav-cta,
[data-theme="light"] .pt-cta-primary,
[data-theme="light"] .biz-cta,
[data-theme="light"] .ind-cta,
[data-theme="light"] .bwu-cta,
[data-theme="light"] .contact-submit,
[data-theme="light"] .proof-case-arrow,
[data-theme="light"] .dualcta-arrow,
[data-theme="light"] .fork-companies .fork-cta,
[data-theme="light"] .fork-candidates .fork-cta,
[data-theme="light"] .dualcta-link-biz .dualcta-arrow-mark,
[data-theme="light"] .dualcta-link-ind .dualcta-arrow-mark {
animation: brand-shimmer 6s ease-in-out infinite;
}
}
/* ---------- P9 #4 — Animated gradient text (hero accent) ---------- */
.fork-headline .grad,
.hero h1 .grad,
.cta-band h2 .grad,
.grad-biz,
.grad-ind {
background: linear-gradient(120deg, #EAC105, #00AFB9, #007867, #EAC105) !important;
background-size: 300% 300% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
}
@media (prefers-reduced-motion: no-preference) {
.fork-headline .grad,
.hero h1 .grad,
.cta-band h2 .grad,
.grad-biz,
.grad-ind {
animation: brand-shimmer 11s ease-in-out infinite;
}
}
/* ---------- P9 #5 — Theme toggle: soft glass pill ---------- */
[data-theme="light"] .theme-toggle {
background: rgba(255, 255, 255, 0.62) !important;
border: 1px solid transparent !important;
background-image:
linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.62)),
var(--grad-spectrum) !important;
background-origin: border-box !important;
background-clip: padding-box, border-box !important;
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
color: var(--ink) !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.7) inset,
0 4px 12px -4px rgba(0, 120, 103, 0.20);
}
[data-theme="light"] .theme-toggle:hover {
background-image:
linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)),
var(--grad-spectrum) !important;
border-color: transparent !important;
}
/* ---------- P9 #6 — Pill ("LIVE") correction: soft citrus, green dot ---------- */
[data-theme="light"] .hero-eyebrow .pill,
[data-theme="light"] .demo-cal-live {
background: rgba(0, 120, 103, 0.14) !important;
color: #006858 !important;
-webkit-text-fill-color: #006858 !important;
}
[data-theme="light"] .hero-eyebrow .pill::before,
[data-theme="light"] .demo-cal-live .dot {
background: #007867 !important; /* green, not olive */
box-shadow: 0 0 0 0 rgba(0, 120, 103, 0.6);
}
/* The .pill inside the fork hero (with grad-sun) keeps its citrus look
from Phase 6; this rule just makes sure the inner ::before dot is green. */
[data-theme="light"] .fork-brand .hero-eyebrow .pill::before { background: #007867 !important; }
/* ---------- P9 #7 — Recommended-tier conic halo: slow rotation ---------- */
@media (prefers-reduced-motion: no-preference) {
@keyframes pt-halo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.plan-tier.is-recommended .pt-halo {
animation: pt-halo-spin 22s linear infinite;
}
}
/* ---------- P9 #8 — Footer wordmark variant (deep teal background) ---------- */
/* If/when footer logo is swapped to the gradient wordmark, this keeps it
readable on the deep teal band. Currently inert (footer still uses PNG). */
.footer .nav-logo .logo-word {
background: linear-gradient(120deg, #ffffff, #d8f4f0, #ffffff) !important;
background-size: 250% 250% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
}
/* ---------- P9 #9 — Marquee polish on the new mint band ---------- */
[data-theme="light"] .marquee {
background: var(--bg-3);
border-top-color: rgba(0, 120, 103, 0.18);
border-bottom-color: rgba(0, 120, 103, 0.18);
}
[data-theme="light"] .marquee::before { background: linear-gradient(90deg, var(--bg-0), transparent); }
[data-theme="light"] .marquee::after { background: linear-gradient(-90deg, var(--bg-0), transparent); }
/* ---------- P9 #10 — Dark-theme parity ---------- */
[data-theme="dark"] {
/* Restore the deep-night base so the cream tokens above don't bleed in. */
--bg: #060814;
--bg-0: #060814;
--bg-1: #0a0d1f;
--bg-2: #0f1330;
--bg-3: #0c1126;
--aurora-opacity: 0.55;
}
[data-theme="dark"] body { background: var(--bg-0); }
[data-theme="dark"] .section:nth-of-type(even) { background: transparent; }
[data-theme="dark"] .marquee { background: transparent; }
[data-theme="dark"] .nav-logo .logo-mark {
box-shadow:
0 6px 14px -6px rgba(0, 175, 185, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
[data-theme="dark"] .theme-toggle {
background: rgba(255, 255, 255, 0.05) !important;
background-image: none !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
color: var(--ink) !important;
}
[data-theme="dark"] .hero-eyebrow .pill,
[data-theme="dark"] .demo-cal-live {
background: rgba(0, 175, 185, 0.18) !important;
color: var(--teal) !important;
-webkit-text-fill-color: var(--teal) !important;
}
[data-theme="dark"] .hero-eyebrow .pill::before,
[data-theme="dark"] .demo-cal-live .dot {
background: var(--teal) !important;
}
/* ---------- P9 — Reduced-motion explicit kill switch ---------- */
@media (prefers-reduced-motion: reduce) {
.aurora,
.aurora::before,
.aurora::after,
.nav-logo .logo-mark,
.nav-logo .logo-word,
.fork-headline .grad,
.hero h1 .grad,
.cta-band h2 .grad,
.grad-biz,
.grad-ind,
.btn-primary,
.nav-cta,
.pt-cta-primary,
.biz-cta,
.ind-cta,
.bwu-cta,
.contact-submit,
.proof-case-arrow,
.dualcta-arrow,
.fork-cta,
.dualcta-arrow-mark,
.plan-tier.is-recommended .pt-halo {
animation: none !important;
}
}
/* End Phase 9 — Brand Recovery */
/* ============================================================ */
/* === PHASE 10 — SUBTRACT === */
/* Premium through restraint. Strips visual noise, replaces */
/* loud components with quiet ones, slows decorative motion. */
/* Append-only — uses high specificity / !important to win the */
/* cascade against earlier P6 / P8 / P9 declarations. */
/* ============================================================ */
/* --- 10.1 Global cursor: restore the system cursor --- */
html body { cursor: auto !important; }
html body .cursor-glass,
html body .cursor-dot { display: none !important; }
/* --- 10.2 Aurora: calmer opacity, slower drift --- */
:root { --aurora-opacity: 0.30 !important; }
[data-theme="dark"] { --aurora-opacity: 0.34 !important; }
@media (prefers-reduced-motion: no-preference) {
.aurora-a { animation-duration: 60s !important; }
.aurora-b { animation-duration: 65s !important; }
.aurora-c { animation-duration: 70s !important; }
}
/* --- 10.3 Brand shimmer: slow breathing, not a kinetic shimmer --- */
@media (prefers-reduced-motion: no-preference) {
html body .btn-primary,
html body .nav-cta,
html body .pt-cta-primary,
html body .biz-cta,
html body .ind-cta,
html body .bwu-cta,
html body .contact-submit,
html body .proof-case-arrow,
html body .dualcta-arrow,
html body .fork-cta,
html body .dualcta-arrow-mark,
html body [data-theme="light"] .dualcta-link-biz .dualcta-arrow-mark,
html body [data-theme="light"] .dualcta-link-ind .dualcta-arrow-mark,
html body .fork-headline .grad,
html body .hero h1 .grad,
html body .cta-band h2 .grad,
html body .grad-biz,
html body .grad-ind {
animation-duration: 18s !important;
}
}
/* --- 10.4 Theme toggle: borderless, icon-only --- */
html body .theme-toggle,
html body [data-theme="light"] .theme-toggle,
html body [data-theme="dark"] .theme-toggle {
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
color: var(--ink) !important;
transition: opacity .2s, transform .2s !important;
opacity: 0.72;
}
html body .theme-toggle:hover {
background: transparent !important;
opacity: 1;
transform: none !important;
}
/* --- 10.5 Dual CTA — quiet version --- */
/* Reset Phase 6 gradient ring, glass fill, arrow circles, etc. */
html body .section-dualcta .dualcta-band,
html body .section-dualcta .dualcta-band--quiet {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
margin-top: 56px !important;
box-shadow: none !important;
}
html body .section-dualcta .dualcta-band-inner {
display: flex !important;
align-items: stretch !important;
justify-content: stretch !important;
gap: 0 !important;
padding: 96px 24px !important;
background: transparent !important;
border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important;
border-radius: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Each half */
html body .section-dualcta .dualcta-link,
html body .section-dualcta .dualcta-link:visited {
flex: 1 1 0;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 18px !important;
padding: 24px clamp(20px, 5vw, 64px) !important;
text-decoration: none !important;
color: var(--ink) !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
font-weight: 400 !important;
letter-spacing: normal !important;
font-size: inherit !important;
transition: opacity .25s ease !important;
}
html body .section-dualcta .dualcta-link:hover { opacity: 1; }
/* Eyebrow */
html body .section-dualcta .dualcta-eyebrow {
font-family: inherit;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: color-mix(in srgb, var(--ink) 55%, transparent) !important;
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: currentColor !important;
}
/* Big serif italic headline */
html body .section-dualcta .dualcta-headline {
font-family: "Instrument Serif", "Times New Roman", Georgia, serif !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(32px, 4.4vw, 56px) !important;
line-height: 1.05 !important;
letter-spacing: -0.01em !important;
color: var(--ink) !important;
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: currentColor !important;
display: inline-flex;
align-items: baseline;
gap: 0.35em;
transition: color .25s ease;
}
html body .section-dualcta .dualcta-link:hover .dualcta-headline {
color: color-mix(in srgb, var(--ink) 78%, var(--teal, #00AFB9)) !important;
}
/* Single trailing arrow — no circle, no gradient, no shadow */
html body .section-dualcta .dualcta-arrow {
display: inline-block;
font-family: inherit;
font-style: normal;
font-size: 0.7em;
font-weight: 400;
line-height: 1;
color: inherit !important;
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: currentColor !important;
width: auto !important;
height: auto !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: translateX(0);
transition: transform .25s ease;
}
html body .section-dualcta .dualcta-link:hover .dualcta-arrow { transform: translateX(4px); }
/* Hairline vertical divider */
html body .section-dualcta .dualcta-band-sep {
width: 1px !important;
height: auto !important;
align-self: stretch !important;
background: color-mix(in srgb, var(--ink) 8%, transparent) !important;
margin: 0 !important;
}
/* Hide the deleted secondary row if any stragglers exist */
html body .section-dualcta .dualcta-secondary { display: none !important; }
/* Section padding — generous whitespace */
html body .section-dualcta { padding: 96px 0 96px !important; }
/* Mobile: stack, divider becomes horizontal */
@media (max-width: 760px) {
html body .section-dualcta .dualcta-band-inner {
flex-direction: column !important;
padding: 56px 16px !important;
}
html body .section-dualcta .dualcta-link {
padding: 36px 8px !important;
}
html body .section-dualcta .dualcta-band-sep {
width: 100% !important;
height: 1px !important;
margin: 0 !important;
}
html body .section-dualcta .dualcta-headline {
font-size: clamp(28px, 8vw, 40px) !important;
}
}
/* --- 10.6 Footer — light Option A (same surface as page) --- */
html body .footer,
html body[data-theme="light"] .footer,
html body[data-theme="dark"] .footer {
background: var(--bg) !important;
color: var(--ink) !important;
border-radius: 0 !important;
border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important;
padding: 80px 0 60px !important;
margin-top: 96px !important;
}
/* Kill the gradient stripe */
html body .footer::before,
html body .footer::after {
content: none !important;
background: none !important;
display: none !important;
}
/* Brand block */
html body .footer .brand { gap: 22px !important; max-width: 360px !important; }
html body .footer .brand p {
color: color-mix(in srgb, var(--ink) 62%, transparent) !important;
font-size: 14px !important;
line-height: 1.65 !important;
}
/* Gradient wordmark in the footer mirrors the nav */
html body .footer .footer-wordmark { text-decoration: none; }
html body .footer .footer-wordmark .logo-word {
background: linear-gradient(120deg, #EAC105, #00AFB9, #007867) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
/* Grid spacing */
html body .footer .footer-grid {
gap: clamp(32px, 5vw, 72px) !important;
align-items: start !important;
}
/* Column headers: tracked uppercase 11px */
html body .footer h6,
html body[data-theme="light"] .footer h6,
html body[data-theme="dark"] .footer h6 {
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: color-mix(in srgb, var(--ink) 50%, transparent) !important;
margin: 0 0 18px !important;
}
/* Column links: calm, underline on hover only */
html body .footer .footer-col a,
html body[data-theme="light"] .footer .footer-col a,
html body[data-theme="dark"] .footer .footer-col a {
color: color-mix(in srgb, var(--ink) 82%, transparent) !important;
font-size: 14px !important;
padding: 6px 0 !important;
text-decoration: none !important;
transition: color .2s ease;
}
html body .footer .footer-col a:hover {
color: var(--ink) !important;
text-decoration: underline !important;
text-underline-offset: 4px !important;
text-decoration-thickness: 1px !important;
}
html body .footer .footer-col span {
color: color-mix(in srgb, var(--ink) 70%, transparent) !important;
font-size: 14px !important;
display: block;
padding: 6px 0;
}
/* Socials: borderless icon buttons, no pill background */
html body .footer .socials { gap: 14px !important; margin-top: 10px !important; }
html body .footer .social,
html body[data-theme="light"] .footer .social,
html body[data-theme="dark"] .footer .social {
background: transparent !important;
border: 0 !important;
width: 28px !important;
height: 28px !important;
padding: 0 !important;
border-radius: 0 !important;
color: color-mix(in srgb, var(--ink) 60%, transparent) !important;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color .2s ease, transform .2s ease;
}
html body .footer .social:hover {
background: transparent !important;
color: var(--ink) !important;
transform: none !important;
border: 0 !important;
}
/* Bottom row */
html body .footer .footer-bottom,
html body[data-theme="light"] .footer .footer-bottom,
html body[data-theme="dark"] .footer .footer-bottom {
border-top: 1px solid color-mix(in srgb, var(--ink) 6%, transparent) !important;
color: color-mix(in srgb, var(--ink) 50%, transparent) !important;
font-size: 13px !important;
font-weight: 400 !important;
padding-top: 28px !important;
margin-top: 48px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 24px !important;
flex-wrap: wrap !important;
}
html body .footer .footer-bottom a {
color: inherit !important;
text-decoration: none !important;
transition: color .2s ease;
}
html body .footer .footer-bottom a:hover {
color: var(--ink) !important;
text-decoration: underline !important;
text-underline-offset: 4px !important;
}
/* Mobile footer */
@media (max-width: 720px) {
html body .footer .footer-bottom {
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
}
}
/* === END PHASE 10 === */
/* ============================================================ */
/* === PHASE 11 — HERO REBUILD (Liquid Glass / Apple) === */
/* Surgical: the homepage hero becomes a monument. One */
/* statement, one CTA, one Liquid Glass panel. Marquee + fork */
/* moved OUT to their own sections below. Append-only. */
/* Overrides Phase 1/6/8/9/10 hero rules via specificity. */
/* ============================================================ */
/* --- 11.0 Tokens (scoped) ---------------------------------- */
:root {
--radius-xl: 28px;
--p11-mesh-yellow: #EAC105;
--p11-mesh-teal: #00AFB9;
--p11-mesh-green: #007867;
--p11-mesh-deep: #005772;
}
/* --- 11.1 .glass-surface utility --------------------------- */
/* Reusable Liquid Glass — used on the hero CTA, the hero */
/* statement panel, and the Pick-your-side panels. Don't */
/* apply globally — that's exactly the over-decoration trap. */
html body .glass-surface {
background: linear-gradient(135deg, rgba(255,255,255,0.62), rgba(255,255,255,0.38));
backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
-webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
border: 0.5px solid rgba(255,255,255,0.6);
box-shadow:
0 1px 0 rgba(255,255,255,0.85) inset,
0 24px 60px -30px rgba(0,87,114,0.35),
0 0 0 1px rgba(0,120,103,0.06);
border-radius: var(--radius-xl);
}
[data-theme="dark"] html body .glass-surface,
html body[data-theme="dark"] .glass-surface {
background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
border-color: rgba(255,255,255,0.10);
box-shadow:
0 1px 0 rgba(255,255,255,0.10) inset,
0 24px 60px -30px rgba(0,0,0,0.55),
0 0 0 1px rgba(255,255,255,0.04);
}
/* --- 11.2 Hero monument layout ----------------------------- */
html body .hero.hero-fork.hero-monument {
padding: clamp(120px, 16vh, 180px) 0 clamp(80px, 10vh, 120px) !important;
position: relative;
overflow: hidden;
isolation: isolate;
/* soft mask at the bottom so the mesh fades into the page */
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
}
html body .hero-monument .hero-monument-inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 28px;
position: relative;
z-index: 2;
}
/* --- 11.3 Theatrical mesh background (HERO ONLY) ----------- */
html body .hero-monument .hero-mesh {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
border-radius: inherit;
}
html body .hero-monument .mesh-blob {
position: absolute;
display: block;
width: 70vw;
height: 70vw;
max-width: 1100px;
max-height: 1100px;
border-radius: 50%;
filter: blur(80px);
opacity: 0.65;
mix-blend-mode: normal;
will-change: transform;
}
html body .hero-monument .mesh-blob-a {
top: -18vw; left: -12vw;
background: radial-gradient(circle at 30% 30%, var(--p11-mesh-yellow) 0%, rgba(234,193,5,0) 65%);
animation: p11-mesh-drift-a 90s ease-in-out infinite alternate;
}
html body .hero-monument .mesh-blob-b {
top: -10vw; right: -20vw;
background: radial-gradient(circle at 50% 50%, var(--p11-mesh-teal) 0%, rgba(0,175,185,0) 65%);
animation: p11-mesh-drift-b 96s ease-in-out infinite alternate;
}
html body .hero-monument .mesh-blob-c {
bottom: -28vw; left: 18vw;
background: radial-gradient(circle at 40% 60%, var(--p11-mesh-green) 0%, rgba(0,120,103,0) 65%);
animation: p11-mesh-drift-c 110s ease-in-out infinite alternate;
}
@keyframes p11-mesh-drift-a {
0% { transform: translate3d(0,0,0) scale(1); }
100% { transform: translate3d(6vw, 3vw, 0) scale(1.08); }
}
@keyframes p11-mesh-drift-b {
0% { transform: translate3d(0,0,0) scale(1); }
100% { transform: translate3d(-5vw, 4vw, 0) scale(1.06); }
}
@keyframes p11-mesh-drift-c {
0% { transform: translate3d(0,0,0) scale(1); }
100% { transform: translate3d(4vw, -3vw, 0) scale(1.10); }
}
/* CSS-only film grain via inline SVG noise */
html body .hero-monument .mesh-grain {
position: absolute; inset: -10%;
pointer-events: none;
opacity: 0.03;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
}
[data-theme="dark"] html body .hero-monument .mesh-blob { opacity: 0.55; }
[data-theme="dark"] html body .hero-monument .mesh-grain { opacity: 0.06; }
/* --- 11.4 Eyebrow ------------------------------------------ */
html body .hero-monument .hero-monument-eyebrow {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: color-mix(in srgb, var(--ink) 58%, transparent);
padding: 0;
background: none;
border: 0;
margin: 0;
}
/* --- 11.5 Monument typography ------------------------------ */
html body .hero-monument .hero-monument-headline {
margin: 6px 0 0 0;
font-family: "Montserrat", system-ui, -apple-system, sans-serif;
font-weight: 800;
font-size: clamp(56px, 11vw, 160px);
line-height: 0.95;
letter-spacing: -0.04em;
color: var(--ink);
text-rendering: optimizeLegibility;
-webkit-text-stroke: 0;
font-feature-settings: "ss01", "ss02";
max-width: 18ch;
}
html body .hero-monument .hero-monument-headline .hm-line {
display: block;
}
html body .hero-monument .hero-monument-headline .hm-line-1 {
animation: p11-letter-open 1.2s ease-out 0.05s both;
}
html body .hero-monument .hero-monument-headline .hm-line-2 {
font-family: "Instrument Serif", "Times New Roman", Georgia, serif;
font-style: italic;
font-weight: 400;
letter-spacing: -0.02em;
/* The .grad class on it inherits the Phase 10 shimmer at 18s */
animation: p11-letter-open 1.2s ease-out 0.15s both;
}
@keyframes p11-letter-open {
from { letter-spacing: -0.02em; opacity: 0.001; transform: translateY(6px); }
to { letter-spacing: -0.04em; opacity: 1; transform: translateY(0); }
}
/* --- 11.6 Subhead ------------------------------------------ */
html body .hero-monument .hero-monument-sub {
margin: 14px 0 0;
font-size: clamp(18px, 1.6vw, 24px);
line-height: 1.45;
color: color-mix(in srgb, var(--ink) 68%, transparent);
max-width: 720px;
font-weight: 400;
}
/* --- 11.7 Actions: one primary CTA + one text link --------- */
html body .hero-monument .hero-monument-actions {
margin: 22px 0 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
html body .hero-monument .hero-monument-cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 20px 36px;
font-size: 17px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--ink);
text-decoration: none;
/* glass-surface utility provides background + border + radius */
transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
/* no shimmer here — reserved for the brand line accent */
background-image: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,255,255,0.42));
}
html body .hero-monument .hero-monument-cta svg {
transform: translateX(0);
transition: transform .3s ease;
}
html body .hero-monument .hero-monument-cta:hover {
transform: scale(1.02);
box-shadow:
0 1px 0 rgba(255,255,255,0.9) inset,
0 28px 70px -28px rgba(0,87,114,0.5),
0 0 0 1px rgba(0,175,185,0.18);
}
html body .hero-monument .hero-monument-cta:hover svg { transform: translateX(3px); }
html body .hero-monument .hero-monument-link {
font-size: 14px;
font-weight: 500;
color: color-mix(in srgb, var(--ink) 60%, transparent);
text-decoration: none;
transition: color .2s ease;
}
html body .hero-monument .hero-monument-link:hover {
color: var(--ink);
text-decoration: underline;
text-underline-offset: 4px;
}
/* --- 11.8 Statement visual panel --------------------------- */
html body .hero-monument .hero-statement-wrap {
margin: 48px auto 0;
width: 100%;
max-width: 720px;
/* scroll-tied parallax (JS sets --scroll on the hero section) */
transform: translateY(calc(var(--scroll, 0px) * -0.06));
transition: transform .15s linear;
will-change: transform;
}
html body .hero-monument .hero-statement-panel {
width: 100%;
min-height: 440px;
padding: 32px clamp(24px, 4vw, 44px);
display: flex;
flex-direction: column;
gap: 24px;
text-align: left;
}
html body .hero-statement-panel .hsp-top {
display: flex;
align-items: center;
justify-content: space-between;
}
html body .hero-statement-panel .hsp-eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: color-mix(in srgb, var(--ink) 55%, transparent);
}
html body .hero-statement-panel .hsp-live {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--p11-mesh-green);
padding: 6px 10px;
border-radius: 999px;
background: rgba(0,120,103,0.10);
}
html body .hero-statement-panel .hsp-live i {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--p11-mesh-green);
box-shadow: 0 0 0 0 rgba(0,120,103,0.55);
animation: p11-live-pulse 2.4s ease-out infinite;
}
@keyframes p11-live-pulse {
0% { box-shadow: 0 0 0 0 rgba(0,120,103,0.55); }
70% { box-shadow: 0 0 0 8px rgba(0,120,103,0); }
100% { box-shadow: 0 0 0 0 rgba(0,120,103,0); }
}
html body .hero-statement-panel .hsp-tile {
flex: 1;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: clamp(16px, 3vw, 28px);
padding: clamp(20px, 3vw, 28px);
border-radius: 20px;
background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.25));
border: 0.5px solid rgba(255,255,255,0.55);
box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
}
html body .hero-statement-panel .hsp-tile-date {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 76px;
padding: 14px 16px;
border-radius: 16px;
background: linear-gradient(135deg, var(--p11-mesh-teal), var(--p11-mesh-deep));
color: #fff;
}
html body .hero-statement-panel .hsp-tile-dow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
opacity: 0.85;
}
html body .hero-statement-panel .hsp-tile-day {
font-family: "Instrument Serif", Georgia, serif;
font-size: 38px;
line-height: 1;
font-weight: 400;
margin-top: 2px;
}
html body .hero-statement-panel .hsp-tile-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
html body .hero-statement-panel .hsp-tile-host {
font-family: "Instrument Serif", Georgia, serif;
font-style: italic;
font-size: clamp(22px, 3vw, 30px);
line-height: 1.1;
color: var(--ink);
}
html body .hero-statement-panel .hsp-tile-role {
font-size: 14px;
font-weight: 500;
color: color-mix(in srgb, var(--ink) 70%, transparent);
}
html body .hero-statement-panel .hsp-tile-meta {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font-size: 12.5px;
color: color-mix(in srgb, var(--ink) 58%, transparent);
}
html body .hero-statement-panel .hsp-dot {
width: 3px; height: 3px;
border-radius: 50%;
background: color-mix(in srgb, var(--ink) 30%, transparent);
}
html body .hero-statement-panel .hsp-tile-cta {
align-self: center;
padding: 12px 18px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: #fff;
background: linear-gradient(120deg, var(--p11-mesh-yellow), var(--p11-mesh-teal), var(--p11-mesh-green));
white-space: nowrap;
box-shadow: 0 8px 24px -10px rgba(0,87,114,0.45);
}
html body .hero-statement-panel .hsp-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
html body .hero-statement-panel .hsp-stack {
display: inline-flex;
align-items: center;
}
html body .hero-statement-panel .hsp-av {
width: 26px; height: 26px;
border-radius: 50%;
margin-left: -8px;
border: 2px solid rgba(255,255,255,0.85);
box-shadow: 0 2px 6px rgba(0,87,114,0.18);
display: inline-block;
}
html body .hero-statement-panel .hsp-av:first-child { margin-left: 0; }
html body .hero-statement-panel .hsp-av-num {
background: color-mix(in srgb, var(--ink) 85%, transparent);
color: #fff;
font-size: 10px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
html body .hero-statement-panel .hsp-foot-text {
font-size: 12.5px;
font-weight: 500;
color: color-mix(in srgb, var(--ink) 60%, transparent);
}
/* --- 11.9 Trust band (marquee moved out of hero) ----------- */
html body .trust-band {
padding: 28px 0 32px;
border-top: 1px solid color-mix(in srgb, var(--ink) 5%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--ink) 5%, transparent);
background: transparent;
}
html body .trust-band .marquee { margin: 0; }
/* --- 11.10 Pick-your-side section (the old fork, restrained) */
html body .section-pickside {
padding: clamp(96px, 12vh, 140px) 0 !important;
}
html body .section-pickside .section-head {
margin-bottom: 56px;
}
html body .section-pickside .section-title .italic {
font-family: "Instrument Serif", Georgia, serif;
font-style: italic;
font-weight: 400;
}
html body .pickside-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: clamp(20px, 3vw, 36px);
align-items: stretch;
}
html body .pickside-panel {
display: flex;
flex-direction: column;
gap: 14px;
padding: clamp(32px, 4vw, 48px);
min-height: 320px;
text-decoration: none;
color: var(--ink);
transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
html body .pickside-panel:hover {
transform: translateY(-3px);
box-shadow:
0 1px 0 rgba(255,255,255,0.9) inset,
0 28px 70px -28px rgba(0,87,114,0.5),
0 0 0 1px rgba(0,175,185,0.18);
}
html body .pickside-eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: color-mix(in srgb, var(--ink) 55%, transparent);
}
html body .pickside-companies .pickside-eyebrow { color: var(--p11-mesh-teal); }
html body .pickside-candidates .pickside-eyebrow { color: var(--p11-mesh-yellow); }
html body .pickside-title {
font-family: "Montserrat", system-ui, sans-serif;
font-size: clamp(26px, 3vw, 36px);
line-height: 1.1;
letter-spacing: -0.025em;
font-weight: 700;
margin: 0;
color: var(--ink);
}
html body .pickside-sub {
font-size: 15.5px;
line-height: 1.55;
color: color-mix(in srgb, var(--ink) 68%, transparent);
margin: 0;
max-width: 44ch;
}
html body .pickside-cta {
margin-top: auto;
padding-top: 18px;
font-size: 15px;
font-weight: 600;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 8px;
}
html body .pickside-cta .pickside-arrow {
display: inline-block;
transition: transform .3s ease;
}
html body .pickside-panel:hover .pickside-cta .pickside-arrow { transform: translateX(4px); }
html body .pickside-divider {
width: 1px;
align-self: stretch;
background: color-mix(in srgb, var(--ink) 8%, transparent);
position: relative;
}
html body .pickside-divider .pickside-or {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-family: "Instrument Serif", Georgia, serif;
font-style: italic;
font-size: 18px;
color: color-mix(in srgb, var(--ink) 50%, transparent);
background: var(--bg);
padding: 6px 10px;
border-radius: 999px;
}
/* --- 11.11 Hide ALL leftover hero-fork chrome (safety net) - */
/* The old fork shells were left in legacy CSS — make sure */
/* nothing leaks back inside the new monument hero. */
html body .hero-monument .fork,
html body .hero-monument .fork-side,
html body .hero-monument .fork-glow,
html body .hero-monument .fork-visual,
html body .hero-monument .hero-float-card,
html body .hero-monument .hero-phone,
html body .hero-monument .marquee { display: none !important; }
/* --- 11.12 Mobile parity ----------------------------------- */
@media (max-width: 980px) {
html body .pickside-grid {
grid-template-columns: 1fr;
gap: 12px;
}
html body .pickside-divider {
width: 100%;
height: 1px;
align-self: auto;
}
html body .hero-monument .hero-statement-panel { min-height: 380px; }
}
@media (max-width: 600px) {
html body .hero.hero-fork.hero-monument {
padding: clamp(96px, 14vh, 140px) 0 64px !important;
}
html body .hero-monument .hero-monument-headline {
font-size: clamp(48px, 13vw, 88px);
line-height: 0.98;
}
html body .hero-monument .hero-monument-sub {
font-size: 17px;
max-width: 92vw;
}
html body .hero-monument .hero-monument-cta {
padding: 18px 28px;
font-size: 16px;
}
html body .hero-monument .hero-statement-wrap { margin-top: 36px; }
html body .hero-monument .hero-statement-panel {
min-height: 0;
padding: 22px;
gap: 18px;
}
html body .hero-statement-panel .hsp-tile {
grid-template-columns: auto 1fr;
gap: 14px;
}
html body .hero-statement-panel .hsp-tile-cta {
grid-column: 1 / -1;
text-align: center;
width: 100%;
}
html body .hero-statement-panel .hsp-foot {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
@media (max-width: 380px) {
html body .hero-monument .hero-monument-headline {
font-size: clamp(40px, 14vw, 64px);
}
html body .hero-monument .hero-monument-eyebrow { letter-spacing: 0.22em; }
html body .pickside-panel { padding: 28px; min-height: 0; }
}
/* --- 11.13 prefers-reduced-motion -------------------------- */
@media (prefers-reduced-motion: reduce) {
html body .hero-monument .mesh-blob,
html body .hero-monument .hero-monument-headline .hm-line-1,
html body .hero-monument .hero-monument-headline .hm-line-2,
html body .hero-monument .hero-statement-wrap,
html body .hero-statement-panel .hsp-live i {
animation: none !important;
transform: none !important;
transition: none !important;
}
html body .hero-monument .hero-monument-headline .hm-line-1,
html body .hero-monument .hero-monument-headline .hm-line-2 {
opacity: 1 !important;
letter-spacing: -0.04em !important;
}
}
/* === END PHASE 11 === */
/* ============================================================
PHASE 12 — site.css overrides
1. Pick-a-side: contain the aurora bleed from neighbouring sections.
2. Market: collapse the empty space between hero, filter pills,
and the start of the gallery — they should feel like one
composition, not three stacked sections.
3. Hide the deleted .section-dualcta if it ever re-appears.
============================================================ */
/* Pick-a-side: scope it so the hero mesh + aurora can't bleed in/out */
html body .section-pickside {
position: relative;
overflow: hidden;
}
html body .section-pickside > * { position: relative; z-index: 1; }
/* Market hero: tighten the gap to the filter bar.
.market-hero inherited .section padding (110px top/bottom). The filters
then added their own padding. Visually felt like 300px of dead space. */
html body .market-hero {
padding-top: clamp(72px, 9vw, 120px) !important;
padding-bottom: 24px !important;
}
html body .market-hero-inner { gap: 16px !important; }
html body .market-hero .market-sub { margin-top: 6px !important; }
html body .market-filter-section {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
html body .market-gallery-section {
padding-top: 24px !important;
}
/* Safety: if a stale .section-dualcta survives somewhere, hide it.
.section-pickside is the only fork moment on the homepage. */
html body .section-dualcta { display: none !important; }
/* ============================================================
PHASE 14 — VISUAL SWEEP + Services / Companies / teasers
Append-only overrides. Don't touch earlier phase blocks.
------------------------------------------------------------
Goals:
1. Contain aurora/mesh bleed across every section that owns
its own gradient background (Phase 12 only did pick-side).
2. Normalise vertical rhythm: every .section pads with
clamp(72px, 9vw, 120px), full stop. The 110/140px legacy
rules created the "dead space" complaints.
3. Re-allow .section-dualcta on the NEW Services/Companies
pages — Phase 12's blanket hide killed it everywhere.
We keep it hidden on the homepage where pick-side rules.
4. Quiet a few stubborn inline dark backgrounds + ALL-CAPS
pills inherited from the dark era (Business/Individual
hero pills, dualcta arrow circles).
5. Build the Services tile grid, the Companies portrait
grid, the homepage Model-company teaser, and the
About → Services teaser.
============================================================ */
/* --- 14.1 Universal section rhythm reset ------------------- */
html body main .section,
html body main .section.section-problem,
html body main .section.section-solution,
html body main .section.section-how,
html body main .section.section-proof,
html body main .section.section-pickside,
html body main .section.section-experience-types,
html body main .section.section-exminder,
html body main .section.section-explore,
html body main .section.section-team,
html body main .section.section-story,
html body main .section.section-editorial,
html body main .section.section-vision {
padding-top: clamp(72px, 9vw, 120px);
padding-bottom: clamp(72px, 9vw, 120px);
}
/* Hero variants tighten the top spacing — they own their own padding */
html body main .hero,
html body main .hero-fork,
html body main .hero-monument,
html body main .hero-about-editorial,
html body main .hero-pricing,
html body main .market-hero { padding-bottom: clamp(48px, 6vw, 80px); }
/* --- 14.2 Aurora / mesh containment ------------------------ */
/* Sections that paint their own glow can't bleed into siblings. */
html body main .section,
html body main .hero { position: relative; }
html body main .section-solution,
html body main .section-proof,
html body main .section-how,
html body main .section-team,
html body main .section-story,
html body main .section-editorial,
html body main .section-experience-types,
html body main .section-exminder,
html body main .section-services-grid,
html body main .section-companies-grid,
html body main .section-manifesto-teaser,
html body main .section-model-company,
html body main .section-about-services {
overflow: hidden;
}
/* --- 14.3 Re-allow .section-dualcta on Services + Companies */
/* Phase 12 hid it everywhere with !important. On the new pages
the quiet ribbon dualcta is the correct closing pattern. */
html body main .section-dualcta.dualcta-ribbon { display: block !important; }
/* --- 14.4 Quiet leftover dark inline styles ---------------- */
/* Hero eyebrow pills on Business / Individual used inline dark
backgrounds. Translate them into glass-friendly tints. */
[data-theme="light"] html body .hero .hero-eyebrow .pill[style*="background:var(--teal)"],
[data-theme="light"] html body .hero .hero-eyebrow .pill[style*="background: var(--teal)"] {
background: color-mix(in srgb, var(--teal) 16%, transparent) !important;
color: var(--teal) !important;
font-weight: 600;
letter-spacing: 0.16em;
}
[data-theme="light"] html body .hero .hero-eyebrow .pill[style*="background:var(--yellow)"],
[data-theme="light"] html body .hero .hero-eyebrow .pill[style*="background: var(--yellow)"] {
background: color-mix(in srgb, var(--yellow) 22%, transparent) !important;
color: color-mix(in srgb, var(--ink) 80%, transparent) !important;
font-weight: 600;
letter-spacing: 0.16em;
}
/* --- 14.5 Dualcta arrow circles — quiet, no chunky disc ---- */
[data-theme="light"] html body .dualcta-arrow {
background: transparent !important;
border: 0 !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
color: var(--ink) !important;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
}
[data-theme="light"] html body .dualcta-arrow svg { width: 18px; height: 18px; }
[data-theme="light"] html body .dualcta-card:hover .dualcta-arrow {
background: transparent !important;
color: var(--green) !important;
transform: translateX(4px);
}
/* --- 14.6 Footer parity (every page = light Phase 10) ------ */
html body .footer { background: transparent !important; color: var(--ink); }
html body .footer .footer-bottom { color: color-mix(in srgb, var(--ink) 60%, transparent); }
/* --- 14.7 Round literal 18px corners up to the radius scale */
/* (visible drift on a couple of laptop-frame mockups) */
html body .laptop, html body .laptop .screen,
html body .macbook, html body .macbook .screen { border-radius: var(--radius-sm) !important; }
/* --- 14.8 Body forbids cursor:none everywhere -------------- */
/* Some legacy hover rules still flipped cursor:none. Reset. */
html body, html body * { cursor: auto; }
html body a, html body button,
html body [role="button"],
html body summary,
html body label,
html body .role-tab,
html body .market-chip,
html body input[type="checkbox"],
html body input[type="submit"] { cursor: pointer; }
html body input[type="text"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="url"],
html body input[type="number"],
html body select,
html body textarea { cursor: text; }
/* ============================================================
14.9 SERVICES PAGE
============================================================ */
html body .hero-services {
padding: clamp(120px, 16vh, 180px) 0 clamp(40px, 6vw, 80px) !important;
position: relative;
overflow: hidden;
isolation: isolate;
text-align: center;
}
html body .hero-services .container { max-width: 880px; }
html body .hero-services .hero-services-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--green);
padding: 8px 14px;
border-radius: 999px;
background: color-mix(in srgb, var(--green) 10%, transparent);
margin-bottom: 24px;
}
html body .hero-services .hero-services-headline {
font-family: "Montserrat", system-ui, sans-serif;
font-size: clamp(48px, 7vw, 96px);
line-height: 1.02;
letter-spacing: -0.035em;
font-weight: 700;
margin: 0 0 8px;
color: var(--ink);
}
html body .hero-services .hero-services-headline .accent {
display: block;
font-family: "Instrument Serif", Georgia, serif;
font-style: italic;
font-weight: 400;
background: var(--grad-spectrum, linear-gradient(120deg,#EAC105,#00AFB9 45%,#007867));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
html body .hero-services .hero-services-sub {
font-size: clamp(17px, 1.5vw, 20px);
line-height: 1.5;
color: color-mix(in srgb, var(--ink) 70%, transparent);
margin: 24px auto 32px;
max-width: 60ch;
}
html body .hero-services .hero-services-actions {
display: inline-flex;
flex-wrap: wrap;
gap: 18px 28px;
align-items: center;
justify-content: center;
}
html body .hero-services .hero-services-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 28px;
font-weight: 600;
font-size: 16px;
color: var(--ink);
text-decoration: none;
border-radius: 999px;
transition: transform .3s ease, box-shadow .3s ease;
}
html body .hero-services .hero-services-cta:hover {
transform: translateY(-2px);
box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 28px 60px -28px rgba(0,87,114,0.45);
}
html body .hero-services .hero-services-link {
font-weight: 500;
color: color-mix(in srgb, var(--ink) 70%, transparent);
text-decoration: none;
font-size: 15.5px;
transition: color .2s ease;
}
html body .hero-services .hero-services-link:hover { color: var(--green); }
html body .section-services-grid { padding: clamp(72px, 9vw, 120px) 0; }
html body .section-services-grid .services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(20px, 2.5vw, 32px);
margin-top: clamp(40px, 5vw, 64px);
}
html body .section-services-grid .service-tile {
padding: clamp(28px, 3vw, 40px);
display: flex;
flex-direction: column;
gap: 14px;
min-height: 240px;
transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
html body .section-services-grid .service-tile:hover {
transform: translateY(-3px);
box-shadow:
0 1px 0 rgba(255,255,255,0.9) inset,
0 28px 70px -28px rgba(0,87,114,0.5),
0 0 0 1px rgba(0,175,185,0.18);
}
html body .section-services-grid .service-tile .st-num {
display: inline-block;
font-family: "Instrument Serif", Georgia, serif;
font-style: italic;
font-size: 28px;
color: color-mix(in srgb, var(--ink) 35%, transparent);
margin-bottom: 4px;
}
html body .section-services-grid .service-tile h3 {
font-family: "Montserrat", system-ui, sans-serif;
font-size: clamp(22px, 2.2vw, 28px);
line-height: 1.15;
letter-spacing: -0.02em;
font-weight: 700;
margin: 0;
color: var(--ink);
}
html body .section-services-grid .service-tile p {
font-size: 15.5px;
line-height: 1.55;
color: color-mix(in srgb, var(--ink) 68%, transparent);
margin: 0;
}
/* Manifesto teaser */
html body .section-manifesto-teaser { padding: clamp(72px, 9vw, 120px) 0; }
html body .section-manifesto-teaser .manifesto-card {
padding: clamp(40px, 5vw, 64px);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(24px, 3vw, 48px);
align-items: end;
}
html body .section-manifesto-teaser .mt-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--yellow);
margin-bottom: 14px;
}
html body .section-manifesto-teaser h2 {
font-family: "Montserrat", system-ui, sans-serif;
font-size: clamp(32px, 4vw, 52px);
line-height: 1.08;
letter-spacing: -0.03em;
font-weight: 700;
margin: 0 0 18px;
color: var(--ink);
}
html body .section-manifesto-teaser h2 .italic {
font-family: "Instrument Serif", Georgia, serif;
font-style: italic;
font-weight: 400;
}
html body .section-manifesto-teaser .mt-body {
font-size: clamp(16px, 1.3vw, 18px);
line-height: 1.6;
color: color-mix(in srgb, var(--ink) 72%, transparent);
max-width: 62ch;
margin: 0;
}
html body .section-manifesto-teaser .mt-cta {
font-weight: 600;
color: var(--ink);
text-decoration: none;
font-size: 15.5px;
white-space: nowrap;
transition: color .2s ease, transform .2s ease;
}
html body .section-manifesto-teaser .mt-cta:hover { color: var(--green); transform: translateX(4px); }
/* Quiet ribbon dualcta (re-usable on Services + Companies) */
html body .section-dualcta.dualcta-ribbon { padding: clamp(72px, 9vw, 120px) 0; }
html body .section-dualcta.dualcta-ribbon .dualcta-ribbon-inner {
padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 64px);
display: grid;
grid-template-columns: minmax(0, 1.4fr) auto auto;
gap: clamp(20px, 3vw, 40px);
align-items: center;
}
html body .section-dualcta.dualcta-ribbon h3 {
font-family: "Montserrat", system-ui, sans-serif;
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.15;
letter-spacing: -0.02em;
font-weight: 700;
margin: 0;
color: var(--ink);
}
html body .section-dualcta.dualcta-ribbon .dualcta-link {
font-weight: 600;
font-size: 15.5px;
color: var(--ink);
text-decoration: none;
white-space: nowrap;
transition: color .2s ease, transform .2s ease;
}
html body .section-dualcta.dualcta-ribbon .dualcta-link.primary { color: var(--green); }
html body .section-dualcta.dualcta-ribbon .dualcta-link:hover { transform: translateX(4px); color: var(--green); }
@media (max-width: 980px) {
html body .section-services-grid .services-grid { grid-template-columns: 1fr; }
html body .section-manifesto-teaser .manifesto-card { grid-template-columns: 1fr; align-items: start; }
html body .section-dualcta.dualcta-ribbon .dualcta-ribbon-inner { grid-template-columns: 1fr; gap: 20px; }
}
/* ============================================================
14.10 COMPANIES PAGE
============================================================ */
html body .hero-companies { padding: clamp(120px, 16vh, 180px) 0 clamp(40px, 6vw, 80px) !important; position: relative; overflow: hidden; text-align: center; }
html body .hero-companies .container { max-width: 880px; }
html body .hero-companies .hero-companies-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--teal);
padding: 8px 14px;
border-radius: 999px;
background: color-mix(in srgb, var(--teal) 12%, transparent);
margin-bottom: 24px;
}
html body .hero-companies .hero-companies-headline {
font-family: "Montserrat", system-ui, sans-serif;
font-size: clamp(48px, 7vw, 96px);
line-height: 1.02;
letter-spacing: -0.035em;
font-weight: 700;
margin: 0;
color: var(--ink);
}
html body .hero-companies .hero-companies-headline .accent {
display: block;
font-family: "Instrument Serif", Georgia, serif;
font-style: italic;
font-weight: 400;
background: var(--grad-spectrum, linear-gradient(120deg,#EAC105,#00AFB9 45%,#007867));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
html body .hero-companies .hero-companies-sub {
font-size: clamp(17px, 1.5vw, 20px);
line-height: 1.5;
color: color-mix(in srgb, var(--ink) 70%, transparent);
margin: 24px auto 32px;
max-width: 60ch;
}
html body .hero-companies .hero-companies-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 28px;
font-weight: 600;
font-size: 16px;
color: var(--ink);
text-decoration: none;
border-radius: 999px;
transition: transform .3s ease, box-shadow .3s ease;
}
html body .hero-companies .hero-companies-cta:hover {
transform: translateY(-2px);
box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 28px 60px -28px rgba(0,87,114,0.45);
}
html body .section-companies-grid { padding: clamp(72px, 9vw, 120px) 0; }
html body .section-companies-grid .companies-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(24px, 3vw, 40px);
margin-top: clamp(40px, 5vw, 64px);
}
html body .company-card {
padding: clamp(20px, 2.5vw, 28px);
display: flex;
flex-direction: column;
gap: 18px;
}
html body .company-card .cc-video {
aspect-ratio: 16 / 9;
width: 100%;
border-radius: var(--radius-sm);
overflow: hidden;
position: relative;
background: var(--grad-spectrum, linear-gradient(135deg,#EAC105,#00AFB9 50%,#007867));
}
html body .company-card .cc-video video {
width: 100%; height: 100%; display: block; object-fit: cover; background: #000;
}
html body .company-card .cc-video.is-placeholder {
display: grid;
place-items: center;
color: rgba(255,255,255,0.95);
font-weight: 600;
text-align: center;
letter-spacing: 0.02em;
}
html body .company-card .cc-video.is-placeholder .cc-play {
width: 56px; height: 56px;
border-radius: 999px;
background: rgba(255,255,255,0.92);
display: grid; place-items: center;
margin-bottom: 10px;
box-shadow: 0 12px 30px -10px rgba(0,0,0,0.35);
}
html body .company-card .cc-video.is-placeholder .cc-play::after {
content: '';
width: 0; height: 0;
border-left: 14px solid var(--ink);
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
margin-left: 4px;
}
html body .company-card .cc-name-row {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
html body .company-card .cc-name {
font-family: "Montserrat", system-ui, sans-serif;
font-size: clamp(22px, 2.2vw, 28px);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0;
}
html body .company-card .cc-tagline {
font-family: "Instrument Serif", Georgia, serif;
font-style: italic;
font-size: clamp(18px, 1.8vw, 22px);
color: color-mix(in srgb, var(--ink) 65%, transparent);
}
html body .company-card .cc-desc {
font-size: 15.5px;
line-height: 1.55;
color: color-mix(in srgb, var(--ink) 70%, transparent);
margin: 0;
}
html body .company-card .cc-pills {
display: flex; flex-wrap: wrap; gap: 6px;
}
html body .company-card .cc-pill {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.06em;
padding: 5px 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--green) 10%, transparent);
color: color-mix(in srgb, var(--ink) 75%, transparent);
border: 0.5px solid color-mix(in srgb, var(--green) 18%, transparent);
}
html body .company-card .cc-foot {
display: flex; flex-wrap: wrap; gap: 8px 14px;
font-size: 13px;
color: color-mix(in srgb, var(--ink) 60%, transparent);
border-top: 0.5px solid color-mix(in srgb, var(--ink) 10%, transparent);
padding-top: 14px;
align-items: center;
}
html body .company-card .cc-foot .cc-dot { width: 3px; height: 3px; border-radius: 999px; background: currentColor; opacity: .5; }
html body .company-card .cc-case-link {
margin-top: auto;
font-weight: 600;
font-size: 14.5px;
color: var(--green);
text-decoration: none;
transition: transform .2s ease;
align-self: flex-start;
}
html body .company-card .cc-case-link:hover { transform: translateX(4px); }
@media (max-width: 980px) {
html body .section-companies-grid .companies-grid { grid-template-columns: 1fr; }
}
/* ============================================================
14.11 HOMEPAGE "Model company" teaser
============================================================ */
html body .section-model-company { padding: clamp(72px, 9vw, 120px) 0; }
html body .section-model-company .mc-card {
padding: clamp(36px, 4vw, 56px);
display: grid;
grid-template-columns: minmax(0, 1.2fr) auto;
gap: clamp(28px, 3vw, 48px);
align-items: center;
}
html body .section-model-company .mc-copy { min-width: 0; }
html body .section-model-company .mc-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 14px;
}
html body .section-model-company h2 {
font-family: "Montserrat", system-ui, sans-serif;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 700;
margin: 0 0 14px;
color: var(--ink);
}
html body .section-model-company h2 .italic {
font-family: "Instrument Serif", Georgia, serif;
font-style: italic;
font-weight: 400;
background: var(--grad-spectrum, linear-gradient(120deg,#EAC105,#00AFB9 45%,#007867));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
html body .section-model-company .mc-body {
font-size: 16px;
line-height: 1.6;
color: color-mix(in srgb, var(--ink) 72%, transparent);
margin: 0 0 22px;
max-width: 56ch;
}
html body .section-model-company .mc-logos {
display: flex; flex-wrap: wrap; gap: 10px;
margin: 0 0 24px;
}
html body .section-model-company .mc-logo {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px 8px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--ink) 4%, transparent);
border: 0.5px solid color-mix(in srgb, var(--ink) 10%, transparent);
font-size: 13.5px;
font-weight: 600;
color: color-mix(in srgb, var(--ink) 80%, transparent);
}
html body .section-model-company .mc-logo .mc-init {
width: 28px; height: 28px;
border-radius: 999px;
display: grid; place-items: center;
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: 0;
}
html body .section-model-company .mc-logo:nth-child(1) .mc-init { background: linear-gradient(135deg,#EAC105,#00AFB9); }
html body .section-model-company .mc-logo:nth-child(2) .mc-init { background: linear-gradient(135deg,#00AFB9,#007867); }
html body .section-model-company .mc-logo:nth-child(3) .mc-init { background: linear-gradient(135deg,#007867,#EAC105); }
html body .section-model-company .mc-logo:nth-child(4) .mc-init { background: linear-gradient(135deg,#005772,#00AFB9); }
html body .section-model-company .mc-cta {
font-weight: 600;
font-size: 15.5px;
color: var(--ink);
text-decoration: none;
transition: color .2s ease, transform .2s ease;
}
html body .section-model-company .mc-cta:hover { color: var(--green); transform: translateX(4px); }
html body .section-model-company .mc-visual {
width: clamp(140px, 16vw, 220px);
aspect-ratio: 1 / 1;
border-radius: var(--radius);
background:
radial-gradient(circle at 30% 30%, rgba(234,193,5,0.45), transparent 60%),
radial-gradient(circle at 70% 70%, rgba(0,175,185,0.4), transparent 60%),
linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.2));
border: 0.5px solid rgba(255,255,255,0.6);
box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset, 0 24px 60px -30px rgba(0,87,114,0.35);
}
@media (max-width: 980px) {
html body .section-model-company .mc-card { grid-template-columns: 1fr; }
html body .section-model-company .mc-visual { display: none; }
}
/* ============================================================
14.12 ABOUT — "What we offer" services teaser
============================================================ */
html body .section-about-services { padding: clamp(72px, 9vw, 120px) 0; }
html body .section-about-services .as-card {
padding: clamp(36px, 4vw, 56px);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(24px, 3vw, 40px);
align-items: end;
}
html body .section-about-services .as-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--green);
margin-bottom: 14px;
}
html body .section-about-services h2 {
font-family: "Montserrat", system-ui, sans-serif;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 700;
margin: 0 0 14px;
color: var(--ink);
}
html body .section-about-services .as-body {
font-size: 16px;
line-height: 1.6;
color: color-mix(in srgb, var(--ink) 72%, transparent);
margin: 0;
max-width: 62ch;
}
html body .section-about-services .as-cta {
font-weight: 600;
font-size: 15.5px;
color: var(--ink);
text-decoration: none;
white-space: nowrap;
transition: color .2s ease, transform .2s ease;
}
html body .section-about-services .as-cta:hover { color: var(--green); transform: translateX(4px); }
@media (max-width: 980px) {
html body .section-about-services .as-card { grid-template-columns: 1fr; align-items: start; }
}
/* --- 14.13 Nav active-link consistency --------------------- */
html body .nav-links .nav-link.active {
color: var(--ink);
font-weight: 600;
position: relative;
}
html body .nav-links .nav-link.active::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -6px;
height: 2px;
border-radius: 2px;
background: var(--grad-spectrum, linear-gradient(90deg,#EAC105,#00AFB9));
}
/* === END PHASE 14 === */
/* ============================================================
PHASE 15 — Nav glitch fix (dark theme) + menu polish
The aurora was bleeding through the nav glass in dark mode,
creating that green smear behind the logo. Solid the surface
in dark mode and isolate the nav from background blur.
============================================================ */
/* Dark-theme nav: solidify the surface so the aurora can't bleed through */
html body [data-theme="dark"] .nav,
[data-theme="dark"] .nav {
background: rgba(8, 24, 28, 0.92) !important;
backdrop-filter: blur(28px) saturate(140%) !important;
-webkit-backdrop-filter: blur(28px) saturate(140%) !important;
border: 0.5px solid rgba(255,255,255,0.08) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.06) inset,
0 14px 40px -20px rgba(0, 0, 0, 0.55) !important;
isolation: isolate; /* prevents body filter/blend leakage */
position: fixed; /* keep it sticky regardless of phase drift */
z-index: 1000 !important;
}
/* The wordmark inside the dark nav: keep gradient text crisp on dark */
[data-theme="dark"] .nav .nav-logo .logo-word {
filter: brightness(1.05) saturate(1.1);
}
/* Active nav-link indicator in dark mode */
[data-theme="dark"] .nav-link:hover {
color: #fff !important;
background: rgba(255,255,255,0.05);
border-radius: var(--radius-pill, 9999px);
}
/* Get started CTA: keep brand gradient legible in both themes */
[data-theme="dark"] .nav-cta {
color: #ffffff !important;
background: linear-gradient(135deg, var(--teal), var(--green)) !important;
box-shadow: 0 8px 24px -10px rgba(0, 175, 185, 0.55) !important;
}
/* Light-theme nav: tighten background so aurora doesn't show through there either */
html body [data-theme="light"] .nav,
[data-theme="light"] .nav {
background: rgba(255, 255, 255, 0.78) !important;
backdrop-filter: blur(28px) saturate(160%) !important;
-webkit-backdrop-filter: blur(28px) saturate(160%) !important;
border: 0.5px solid color-mix(in srgb, var(--green) 14%, transparent) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.85) inset,
0 10px 30px -16px rgba(0, 87, 114, 0.18) !important;
isolation: isolate;
}
/* Compact nav when items are many — slightly tighter gap so 8 items fit cleanly */
html body .nav .nav-links {
gap: 4px !important;
}
html body .nav .nav-link {
padding: 8px 12px !important;
font-size: 14px !important;
}
@media (max-width: 1180px) {
html body .nav .nav-link { padding: 8px 10px !important; font-size: 13.5px !important; }
}
/* Mobile (< 980px): hide the dense nav-links, show burger */
@media (max-width: 980px) {
html body .nav .nav-cta { display: none !important; } /* CTA lives in the drawer */
}
/* ============================================================
PHASE 16 — VISUAL BOOST (Neon + Pulse + Flow)
------------------------------------------------------------
Goals:
1. Add a real photo layer (Unsplash hotlinks placed in HTML).
This block owns the photo CARD container, hover Ken-Burns,
framing, lazy-load shimmer fallback.
2. Extend motion: scroll-reveal variants (up/left/right/scale/
blur + stagger), parallax hook, number-ticker placeholder
styling (avoid layout shift while counting).
3. Expand gradient presence with intention:
- section eyebrow gradient utility
- stat-value gradient rotation (rhythm across a row)
- subtle spectrum hairline dividers
- ultra-low-opacity ambient orbs per section
4. Radius audit — every chunky chrome value gets mapped to a
design token. Phase 6 introduced --radius-xs/sm/md/lg/xl/pill;
we lean on those, never new px.
Append-only. Overrides earlier blocks via cascade specificity.
Flat exceptions (deliberate):
- .logo-mark, footer hairline, .marquee-track > * (already
pill, no-op), nav burger bars (3px lines), .hsp-dot (1px).
============================================================ */
/* --- 16.0 Photo card system -------------------------------- */
/* The .photo-card holds an ![]()
at fixed aspect ratio with a
gentle inner Ken-Burns on hover. Used on About, Business,
Individual, Services, Index. */
html body .photo-card {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--green) 8%, var(--bg-1));
box-shadow:
0 1px 0 rgba(255,255,255,0.55) inset,
0 24px 60px -28px rgba(0, 87, 114, 0.28);
isolation: isolate;
}
html body .photo-card img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s cubic-bezier(.2,.6,.2,1),
filter 1.4s cubic-bezier(.2,.6,.2,1);
will-change: transform;
}
html body .photo-card::after {
/* Subtle ink wash so photos always sit with the rest of the page
(cream-mint palette). Keeps any random Unsplash crop on-brand. */
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(0,87,114,0) 60%, rgba(0,87,114,0.18) 100%),
radial-gradient(120% 120% at 0% 0%, rgba(234,193,5,0.10) 0%, transparent 55%);
mix-blend-mode: multiply;
border-radius: inherit;
}
html body .photo-card:hover img { transform: scale(1.05); }
html body .photo-card.no-motion img { transition: none; transform: none !important; }
/* Aspect helpers */
html body .photo-card.is-4x3 { aspect-ratio: 4 / 3; }
html body .photo-card.is-16x9 { aspect-ratio: 16 / 9; }
html body .photo-card.is-1x1 { aspect-ratio: 1 / 1; }
html body .photo-card.is-3x4 { aspect-ratio: 3 / 4; }
html body .photo-card.is-21x9 { aspect-ratio: 21 / 9; }
/* Small photo thumbnail used in service tiles + experience cards */
html body .photo-thumb {
position: relative;
overflow: hidden;
border-radius: var(--radius-md);
aspect-ratio: 16 / 10;
margin-bottom: 18px;
}
html body .photo-thumb img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
will-change: transform;
}
html body .photo-thumb::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,87,114,0) 65%, rgba(0,87,114,0.16) 100%);
pointer-events: none;
border-radius: inherit;
}
html body .service-tile:hover .photo-thumb img,
html body .ind-exp-card:hover .photo-thumb img,
html body .flow-step:hover .photo-thumb img { transform: scale(1.04); }
/* --- 16.1 Reveal variants ---------------------------------- */
/* New attribute API; the existing .reveal/.reveal.in keeps working. */
html body [data-reveal] {
opacity: 0;
transform: translateY(28px);
filter: none;
transition:
opacity 1s cubic-bezier(.2,.8,.2,1),
transform 1s cubic-bezier(.2,.8,.2,1),
filter 1s cubic-bezier(.2,.8,.2,1);
transition-delay: var(--delay, 0ms);
}
html body [data-reveal="up"] { transform: translateY(28px); }
html body [data-reveal="left"] { transform: translateX(-28px); }
html body [data-reveal="right"] { transform: translateX(28px); }
html body [data-reveal="scale"] { transform: scale(.96); }
html body [data-reveal="blur"] { filter: blur(10px); transform: translateY(14px); }
html body [data-reveal].is-in {
opacity: 1;
transform: none;
filter: none;
}
/* Stagger reveal — children animate in sequence */
html body [data-reveal-stagger] > * {
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.85s cubic-bezier(.2,.8,.2,1),
transform 0.85s cubic-bezier(.2,.8,.2,1);
transition-delay: calc(var(--stagger-i, 0) * var(--stagger, 80ms));
}
html body [data-reveal-stagger] > .is-in {
opacity: 1;
transform: none;
}
/* Parallax target — pure CSS using a custom property the JS pokes */
html body [data-parallax]:not(.ind-phone-stage) {
transform: translate3d(0, var(--parallax-y, 0px), 0);
will-change: transform;
transition: transform 80ms linear;
}
/* Counter stability: numbers reserve width as they tick */
html body [data-counter] { font-variant-numeric: tabular-nums; }
/* --- 16.2 Gradient eyebrow utility ------------------------- */
/* Single utility — drop on any eyebrow / kicker to paint with the
brand spectrum. Slow shimmer; opt-out on reduced motion. */
html body .grad-eyebrow,
html body .section-eyebrow.is-grad,
html body .pickside-eyebrow.is-grad,
html body .mc-eyebrow.is-grad,
html body .mt-eyebrow.is-grad,
html body .as-eyebrow.is-grad {
background-image: var(--grad-spectrum);
background-size: 220% 100%;
background-position: 0% 50%;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
animation: phase16-eyebrowShift 14s ease-in-out infinite alternate;
}
@keyframes phase16-eyebrowShift {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
/* --- 16.3 Stat-value gradient rotation --------------------- */
/* Inside a .stat-row or .problem-stats, the big strong numbers
paint with rotating brand gradients — sun / meadow / citrus /
spectrum — creating rhythm. */
html body .stat-row .stat strong,
html body .problem-stats .problem-stat strong {
background-image: var(--grad-sun);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
html body .stat-row .stat:nth-child(4n+2) strong,
html body .problem-stats .problem-stat:nth-child(4n+2) strong {
background-image: var(--grad-meadow);
}
html body .stat-row .stat:nth-child(4n+3) strong,
html body .problem-stats .problem-stat:nth-child(4n+3) strong {
background-image: var(--grad-citrus);
}
html body .stat-row .stat:nth-child(4n) strong,
html body .problem-stats .problem-stat:nth-child(4n) strong {
background-image: var(--grad-spectrum);
}
/* --- 16.4 Spectrum hairline divider ------------------------ */
/* Drop a
or place between sections via
class on the next section: .section.has-grad-rule::before. */
html body .grad-rule,
html body hr.grad-rule {
border: 0;
height: 1px;
margin: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(234,193,5,0.55) 22%,
rgba(0,175,185,0.65) 50%,
rgba(0,120,103,0.55) 78%,
transparent 100%);
opacity: 0.55;
}
html body .section.has-grad-rule { position: relative; }
html body .section.has-grad-rule::before {
content: '';
position: absolute;
top: 0; left: 12%; right: 12%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(234,193,5,0.55) 25%,
rgba(0,175,185,0.65) 50%,
rgba(0,120,103,0.55) 75%,
transparent 100%);
opacity: 0.55;
}
/* --- 16.5 Ambient orbs (subtle, 5-8% opacity) -------------- */
/* Drop inside a section.
Variants: ao-tl, ao-tr, ao-bl, ao-br (corner anchors). */
html body .ambient-orb {
position: absolute;
pointer-events: none;
width: 540px;
height: 540px;
border-radius: var(--radius-pill);
filter: blur(96px);
opacity: 0.07;
z-index: 0;
background: var(--grad-spectrum);
}
html body .ambient-orb.ao-tl { top: -180px; left: -160px; }
html body .ambient-orb.ao-tr { top: -180px; right: -160px; background: var(--grad-sun); }
html body .ambient-orb.ao-bl { bottom: -180px; left: -160px; background: var(--grad-meadow); }
html body .ambient-orb.ao-br { bottom: -180px; right: -160px; background: var(--grad-citrus); }
html body .ambient-orb.ao-sm { width: 320px; height: 320px; opacity: 0.06; filter: blur(80px); }
html body .section { position: relative; }
html body .section > .container { position: relative; z-index: 1; }
@media (max-width: 600px) {
html body .ambient-orb { width: 380px; height: 380px; opacity: 0.05; }
}
/* --- 16.6 Companies portrait — better placeholder ---------- */
/* Phase 14 left .cc-video.is-placeholder feeling flat. Give it a
stylized gradient-mesh + a real play icon — intentional even
before the video lands. */
html body .company-card .cc-video.is-placeholder {
position: relative;
overflow: hidden;
border-radius: var(--radius-md);
background:
radial-gradient(60% 80% at 20% 30%, rgba(234,193,5,0.30) 0%, transparent 60%),
radial-gradient(70% 90% at 80% 70%, rgba(0,175,185,0.30) 0%, transparent 60%),
linear-gradient(135deg, color-mix(in srgb, var(--green) 14%, var(--bg-1)) 0%,
color-mix(in srgb, var(--teal) 8%, var(--bg-1)) 100%);
isolation: isolate;
}
html body .company-card .cc-video.is-placeholder::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
background-size: 4px 4px;
mix-blend-mode: overlay;
opacity: 0.6;
border-radius: inherit;
}
html body .company-card .cc-video.is-placeholder > div {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
color: var(--ink-2);
}
html body .company-card .cc-video .cc-play {
width: 64px; height: 64px;
border-radius: var(--radius-pill);
background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.75));
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow:
0 1px 0 rgba(255,255,255,0.85) inset,
0 16px 40px -16px rgba(0, 87, 114, 0.35);
display: grid;
place-items: center;
position: relative;
transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
html body .company-card .cc-video .cc-play::after {
content: '';
display: block;
width: 0; height: 0;
border-left: 16px solid var(--green);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
margin-left: 4px;
}
html body .company-card:hover .cc-video .cc-play { transform: scale(1.08); }
/* --- 16.7 Hover micro-interactions on glass cards ---------- */
/* Apply a consistent lift across every glass-surface card. */
html body .glass-surface,
html body .pickside-panel,
html body .mc-card,
html body .manifesto-card,
html body .as-card,
html body .dualcta-card,
html body .service-tile,
html body .company-card,
html body .ind-exp-card,
html body .flow-step,
html body .b,
html body .person,
html body .v {
transition:
transform 0.5s cubic-bezier(.2,.8,.2,1),
box-shadow 0.5s cubic-bezier(.2,.8,.2,1),
border-color 0.4s cubic-bezier(.2,.8,.2,1);
}
html body .service-tile:hover,
html body .company-card:hover,
html body .ind-exp-card:hover,
html body .flow-step:hover,
html body .person:hover,
html body .v:hover,
html body .b:hover {
transform: translateY(-4px);
box-shadow:
0 1px 0 rgba(255,255,255,0.6) inset,
0 32px 70px -28px rgba(0, 87, 114, 0.32);
}
/* Service tile number — playful scale + rotate on hover */
html body .service-tile .st-num {
display: inline-block;
transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
transform-origin: 50% 60%;
}
html body .service-tile:hover .st-num {
transform: scale(1.12) rotate(-4deg);
}
/* Experience card icon — gentle scale */
html body .ind-exp-card .ind-exp-icon {
transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
html body .ind-exp-card:hover .ind-exp-icon {
transform: scale(1.1) rotate(4deg);
}
/* --- 16.8 Radius audit — token sweep ----------------------- */
/* Every legacy hardcoded value (8/10/12/14/16/18/20/24/26/28/32/
36/38/44/48/56px and 999px) gets remapped to a token.
Specificity via html body. We are NOT editing earlier blocks. */
/* Chips, pills, badges, store badges, marquee items, all small
round bits land on --radius-pill. */
html body .chip,
html body .pill,
html body .bec-pill,
html body .cc-pill,
html body .dcc-pill,
html body .hpu-pill,
html body .ind-store-pill,
html body .marquee-item,
html body .phone-tabs span,
html body .pt-badge,
html body .bt-save,
html body .price-pill,
html body .cta-band,
html body .hsp-eyebrow,
html body .hsp-live,
html body .hsp-av,
html body .hsp-av-num,
html body .schematic-label,
html body .demo-cal-live,
html body .bec-status,
html body .role-tab,
html body .form-pill,
html body .pickside-or {
border-radius: var(--radius-pill);
}
/* Generic cards / large panels */
html body .b,
html body .b.span-2,
html body .b.span-3,
html body .card,
html body .glass-surface,
html body .quote-card,
html body .vision-card,
html body .editorial-aside .quote-card,
html body .mc-card,
html body .as-card,
html body .manifesto-card,
html body .pickside-panel,
html body .dualcta-card,
html body .ind-exp-card,
html body .company-card,
html body .service-tile,
html body .plan-tier,
html body .demo-cal,
html body .demo-cal-card,
html body .bec,
html body .biz-event-card,
html body .iphone .screen,
html body .iphone,
html body .laptop,
html body .macbook,
html body .app-ui,
html body .proof-case,
html body .pricing-teaser,
html body .building-with-us,
html body .contact-form-card {
border-radius: var(--radius-xl);
}
/* Mid-density: flow steps, levels, tiles, buttons, sub-cards */
html body .flow-step,
html body .level,
html body .v,
html body .person,
html body .bb-tile,
html body .schematic-node,
html body .ind-availability,
html body .m-card,
html body .m-card .av,
html body .demo-cal-grid .dc-day,
html body .biz-trust,
html body .hsp-tile,
html body .hsp-tile-cta,
html body .editorial-copy blockquote,
html body .as-cta,
html body .mc-logo,
html body .mt-cta,
html body .mc-cta,
html body .pt-cta {
border-radius: var(--radius-md);
}
/* Buttons & CTAs land on pill */
html body .btn,
html body .btn-primary,
html body .biz-cta,
html body .ind-cta,
html body .nav-cta,
html body .dualcta-link,
html body .dualcta-link.primary,
html body .pickside-cta,
html body .hero-monument-cta,
html body .hero-services-cta,
html body .hero-companies-cta,
html body .hero-pricing-cta,
html body .proof-case-arrow,
html body .pricing-teaser-arrow,
html body .billing-toggle,
html body .billing-toggle .bt-thumb,
html body .billing-toggle button,
html body .bwu-cta,
html body .cc-case-link {
border-radius: var(--radius-pill);
}
/* Photos / images always at least md radius. We round inside cards
that already own a larger radius (photo-card / photo-thumb / glass)
by letting their inherited overflow:hidden clip the ![]()
. So we
skip a blanket img selector to avoid double-rounding artifacts and
surprises in logos / svg icons. The .photo-card and .photo-thumb
wrappers already handle radius for content imagery. */
/* Tiny chips / dots stay circular */
html body .dot,
html body .cc-dot,
html body .hsp-dot,
html body .sm-dot,
html body .av,
html body .avatar,
html body .gradient-1,
html body .gradient-2,
html body .gradient-3,
html body .gradient-4,
html body .bwu-av {
border-radius: var(--radius-pill);
}
/* Footer + nav already pill in their last definitions — no-op
here keeps cascade simple. */
/* --- 16.9 prefers-reduced-motion --------------------------- */
@media (prefers-reduced-motion: reduce) {
html body [data-reveal],
html body [data-reveal-stagger] > * {
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
html body .photo-card img,
html body .photo-thumb img,
html body .service-tile .st-num,
html body .ind-exp-card .ind-exp-icon,
html body .company-card .cc-video .cc-play {
transition: none !important;
transform: none !important;
}
html body .grad-eyebrow,
html body .is-grad { animation: none !important; }
html body [data-parallax] { transform: none !important; }
}
/* --- 16.10 Mobile parity ----------------------------------- */
@media (max-width: 980px) {
html body .photo-card.is-21x9 { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
html body .photo-card,
html body .photo-thumb { border-radius: var(--radius-md); }
html body .ambient-orb { display: none; } /* keep mobile clean */
}
/* === END PHASE 16 === */
/* ============================================================
PHASE 16.5 — Restore the original store-btn look
Strip the dark capsule treatment; return App Store / Google Play
to the official-badge look (light surface, brand-color icons,
ink text). The "Launch a Demo Day" companion is now a brand
gradient pill instead of a third dark store-btn impostor.
============================================================ */
/* Light glass store buttons (Apple/Google official badge feel) */
html body .ind-stores .store-btn,
html body .stores .store-btn {
background: rgba(255, 255, 255, 0.92) !important;
color: var(--ink) !important;
border: 1px solid color-mix(in srgb, var(--ink) 92%, transparent) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.95) inset,
0 8px 24px -14px rgba(0, 87, 114, 0.25) !important;
padding: 10px 22px !important;
border-radius: var(--radius-md, 18px) !important;
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
transition: transform .25s ease, box-shadow .25s ease;
}
html body .ind-stores .store-btn:hover,
html body .stores .store-btn:hover {
transform: translateY(-2px);
box-shadow:
0 1px 0 rgba(255,255,255,0.95) inset,
0 14px 32px -14px rgba(0, 87, 114, 0.35) !important;
}
html body .ind-stores .store-btn .ic,
html body .stores .store-btn .ic {
width: 28px; height: 28px;
display: grid; place-items: center;
background: transparent;
flex-shrink: 0;
}
html body .ind-stores .store-btn .ic svg,
html body .stores .store-btn .ic svg { width: 22px; height: 22px; display: block; }
html body .ind-stores .store-btn .label,
html body .stores .store-btn .label {
display: flex; flex-direction: column; line-height: 1.05;
text-align: left;
}
html body .ind-stores .store-btn .label small,
html body .stores .store-btn .label small {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.01em;
text-transform: none;
opacity: 0.7;
margin-bottom: 2px;
}
html body .ind-stores .store-btn .label strong,
html body .stores .store-btn .label strong {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
}
/* Apple bitten-apple in ink color (matches official treatment on light) */
html body .ind-stores .store-btn:first-child .ic svg path,
html body .stores .store-btn:first-child .ic svg path {
fill: var(--ink) !important;
}
/* Dark-mode parity: invert to white surface? No — go dark glass with white ink */
[data-theme="dark"] html body .ind-stores .store-btn,
[data-theme="dark"] html body .stores .store-btn {
background: rgba(255,255,255,0.06) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,0.14) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.08) inset,
0 8px 24px -10px rgba(0, 0, 0, 0.45) !important;
}
[data-theme="dark"] html body .ind-stores .store-btn:first-child .ic svg path,
[data-theme="dark"] html body .stores .store-btn:first-child .ic svg path {
fill: #fff !important;
}
/* The "Launch a Demo Day" companion CTA — brand gradient pill, not a store button */
html body .ind-launch-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
background: var(--grad-meadow);
color: #fff !important;
font-weight: 600;
font-size: 15px;
letter-spacing: -0.01em;
border-radius: var(--radius-pill, 9999px);
text-decoration: none;
box-shadow: 0 14px 32px -12px rgba(0, 120, 103, 0.4);
transition: transform .25s ease, box-shadow .25s ease;
}
html body .ind-launch-cta:hover {
transform: translateY(-2px) scale(1.015);
box-shadow: 0 18px 40px -12px rgba(0, 120, 103, 0.55);
}
html body .ind-launch-cta svg {
transition: transform .25s ease;
}
html body .ind-launch-cta:hover svg {
transform: translateX(4px);
}
/* Mobile: the three CTAs stack and centre */
@media (max-width: 720px) {
html body .ind-stores {
flex-direction: column;
align-items: stretch;
gap: 12px !important;
}
html body .ind-stores .store-btn,
html body .ind-launch-cta {
justify-content: center;
}
}
/* =========================================================
PHASE 17 — BUG SWEEP
---------------------------------------------------------
Scope: bug fixes only — no new features, no redesigns.
Sections:
A. Ambient orbs containment (overflow leak fix)
B. Stagger / reveal fallbacks for CMS-swapped grids
C. CMS visibility (disabled section + unpublished page)
D. Long-text safety (overflow-wrap on copy)
E. Hidden lightbox image sizing
F. Mobile nav drawer body lock
G. Misc small alignment / z-index fixes
========================================================= */
/* --- A. Ambient orbs must never escape their host section. ---
The orbs are -180px positioned and 540px wide, which would
bleed into adjacent sections if the host weren't clipped.
Hero containers vary, so we target any element that contains
an .ambient-orb child. */
html body .hero,
html body .market-hero,
html body section:has(> .ambient-orb) {
overflow: hidden;
}
/* --- B. (intentionally empty) ---
Stagger reveal CSS is kept in the Phase 16 block. Re-init for
CMS-rendered children is handled in motion.js's cms:rendered
listener (Phase 17 JS fix). No CSS override needed here. */
/* --- C. CMS visibility ---
`section[hidden]` is set by cms-loader.js when CMS disables a
section kind. Browsers respect [hidden] but flex/grid contexts
sometimes still allocate space — force display:none to be safe. */
html body section[hidden] { display: none !important; }
/* Soft visual hint on unpublished pages (admin preview only catches
this since it iframes the page; live visitors should never hit an
unpublished slug in production). */
html.cms-page-unpublished body::before {
content: "Draft — not published";
position: fixed;
top: 8px; left: 50%;
transform: translateX(-50%);
z-index: 9999;
padding: 4px 12px;
background: rgba(234, 193, 5, 0.95);
color: #1a1505;
font: 600 11px/1 'Montserrat', sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 999px;
pointer-events: none;
}
/* --- D. Long-text safety ---
Long URLs / unbroken strings in CMS-edited copy could blow out
card widths. Apply to common copy containers. */
html body .cc-desc,
html body .mc-body,
html body .service-tile p,
html body .ind-exp-card p,
html body .person p,
html body .story-milestone p,
html body .faq-item p,
html body .pt-features li {
overflow-wrap: anywhere;
word-break: break-word;
}
/* --- E. Lightbox image sizing ---
When the lightbox is hidden via the `hidden` attribute, the
image's `src` may already be loaded into memory. Force the
inner image to never overflow the viewport when open. */
html body .mk-lightbox:not([hidden]) #mkLightboxImg {
max-width: 92vw;
max-height: 86vh;
width: auto;
height: auto;
object-fit: contain;
}
/* --- F. Mobile nav drawer body lock ---
Without this, the page underneath the open drawer can still
scroll on iOS Safari. */
html body.nav-open {
overflow: hidden;
touch-action: none;
}
/* --- G. Misc small fixes ---
1. Footer wordmark colour drifts in dark theme on some pages
where .footer-wordmark .logo-word inherits a brand colour.
Force inherit so it always matches the surrounding text. */
html body .footer-wordmark .logo-word { color: inherit; }
/* 2. Theme toggle / burger sit above CMS-rendered nav glitch */
html body .nav .theme-toggle,
html body .nav .nav-burger { position: relative; z-index: 3; }
/* 3. Reveal-safe fallback removed: a blanket animation could
stomp legitimate scroll reveals that fire later. We instead
rely on the IntersectionObserver in motion.js plus the
cms:rendered re-observe path. */
/* 4. Companies grid cards now align top — when descriptions vary
in length the card heights mismatched. Stretch the article
itself, and push the case-study link to the bottom. */
html body .companies-grid { align-items: stretch; }
html body .company-card {
display: flex;
flex-direction: column;
height: 100%;
}
html body .company-card .cc-case-link { margin-top: auto; }
/* 5. Service tile copy alignment — same pattern. */
html body .services-grid .service-tile {
display: flex;
flex-direction: column;
}
html body .services-grid .service-tile p { margin-bottom: 0; }
/* === END PHASE 17 === */
/* ============================================================
PHASE 18 — DARK RESCUE + DENSITY
Targeting the seven specific issues the founder flagged in
dark-mode screenshots. No new components, no new decorations.
Just: lift dark surfaces, tighten cards, boost stat typography,
give floating sections real containers, fix invisible arrows.
============================================================ */
/* ---- 18.1 Dark surface tier (lift cards out of the void) ----
The default card background was too close to the body color.
Cards need 8-12% lightness lift to feel like surfaces, not voids. */
[data-theme="dark"] {
--bg: #0a1014;
--bg-2: #0e1519;
--bg-3: #121b21;
--card: rgba(255, 255, 255, 0.045);
--card-hi: rgba(255, 255, 255, 0.075);
--line: rgba(255, 255, 255, 0.10);
--ink: #eef4f6;
--ink-2: rgba(238, 244, 246, 0.72);
--ink-3: rgba(238, 244, 246, 0.54);
}
/* Every glass-surface card in dark mode: real definition */
[data-theme="dark"] html body .glass-surface,
[data-theme="dark"] html body .pickside-panel,
[data-theme="dark"] html body .problem-stat,
[data-theme="dark"] html body .flow-step,
[data-theme="dark"] html body .service-tile,
[data-theme="dark"] html body .company-card,
[data-theme="dark"] html body .mc-panel,
[data-theme="dark"] html body .contact-section-secondary > .container,
[data-theme="dark"] html body details.contact-collapse,
[data-theme="dark"] html body details.contact-collapse > summary {
background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)) !important;
border: 1px solid rgba(255,255,255,0.10) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.06) inset,
0 24px 60px -32px rgba(0, 0, 0, 0.6) !important;
}
/* ---- 18.2 Stat typography (the #1 hierarchy bug) ----
Both .stat-row and .problem-stat had stats far smaller than they
should be. Display sizing reads as confidence; small reads as draft. */
html body .stat-row .stat strong,
html body .problem-stat strong {
font-size: clamp(42px, 5.5vw, 64px) !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: -0.03em !important;
display: block !important;
margin-bottom: 8px !important;
}
html body .stat-row .stat span,
html body .problem-stat span {
font-size: 14px !important;
line-height: 1.45 !important;
color: var(--ink-2) !important;
max-width: 24ch;
}
/* ---- 18.3 .stat-row needs a real container in dark mode ----
Currently floats as bare numbers on a dark void. Wrap it in glass. */
html body .stat-row {
padding: 32px 28px !important;
border-radius: var(--radius-xl, 32px) !important;
margin-top: 56px !important;
gap: 24px !important;
}
[data-theme="dark"] html body .stat-row {
background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
}
/* ---- 18.4 Pick-a-side cards: cut the empty space ----
Cards were 48px padded with sparse content = wireframe vibe.
Tighten padding, raise content density, lock min-height down. */
html body .pickside-panel {
padding: clamp(24px, 2.6vw, 32px) !important;
min-height: 0 !important;
gap: 10px !important;
}
html body .pickside-eyebrow {
font-size: 11.5px !important;
margin-bottom: 4px !important;
}
html body .pickside-title {
font-size: clamp(28px, 3.2vw, 38px) !important;
line-height: 1.1 !important;
margin: 0 0 6px !important;
}
html body .pickside-sub {
font-size: 15px !important;
line-height: 1.55 !important;
margin: 0 0 18px !important;
}
html body .pickside-cta {
margin-top: 0 !important;
padding-top: 0 !important;
font-weight: 600 !important;
}
/* ---- 18.5 Hero CTA: not a half-rendered glass ----
The glass-surface treatment on .hero-monument-cta read as broken.
Replace with a solid brand-meadow pill (still Liquid Glass family). */
html body .hero-monument .hero-monument-cta {
background: linear-gradient(135deg, var(--teal), var(--green)) !important;
color: #fff !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 1px solid rgba(255,255,255,0.18) !important;
padding: 16px 28px !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.25) inset,
0 18px 36px -14px rgba(0, 120, 103, 0.55) !important;
font-weight: 600 !important;
font-size: 16px !important;
}
html body .hero-monument .hero-monument-cta:hover {
transform: translateY(-2px) scale(1.015);
box-shadow:
0 1px 0 rgba(255,255,255,0.25) inset,
0 24px 48px -14px rgba(0, 120, 103, 0.7) !important;
}
/* ---- 18.6 Hero statement panel: collapse glass-on-glass ----
The panel had a translucent shell with another translucent tile inside.
Strip the inner tile's surface so it reads as one composition. */
html body .hero-statement-panel .hsp-tile {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 8px 0 0 !important;
}
html body .hero-statement-panel .hsp-tile-cta {
background: linear-gradient(135deg, var(--yellow), var(--teal)) !important;
color: #0a1014 !important;
font-weight: 700 !important;
padding: 10px 18px !important;
border-radius: var(--radius-pill, 9999px) !important;
}
html body .hero-statement-panel .hsp-foot-text {
color: var(--ink-2) !important;
font-size: 13px !important;
}
/* ---- 18.7 How It Works connector arrows: make them visible ----
Currently the connector arrows between flow-step cards are barely
rendered. Boost them, color them with the brand. */
html body .flow {
display: grid !important;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 16px !important;
align-items: stretch;
}
html body .flow-step + .flow-step::before,
html body .flow .flow-arrow {
content: '→';
display: grid;
place-items: center;
font-size: 24px;
color: var(--teal) !important;
opacity: 0.7;
align-self: center;
}
/* If markup doesn't have explicit .flow-arrow, fall back to gap-based arrows */
html body .flow-step {
padding: 28px 24px !important;
gap: 12px !important;
}
html body .flow-step h4 { font-size: 19px !important; line-height: 1.25 !important; margin: 4px 0 6px !important; }
html body .flow-step p { font-size: 14.5px !important; line-height: 1.55 !important; color: var(--ink-2) !important; }
html body .flow-step .num {
font-size: 12px !important;
letter-spacing: 0.16em !important;
font-weight: 700 !important;
text-transform: uppercase !important;
}
@media (max-width: 900px) {
html body .flow { grid-template-columns: 1fr !important; }
html body .flow .flow-arrow { display: none !important; }
}
/* ---- 18.8 Model company teaser: kill the decorative blob ----
The right-side gradient blob has no content. Replace the two-column
layout with a one-column composition that includes a real preview row. */
html body .mc-panel {
display: block !important;
padding: clamp(32px, 4vw, 48px) !important;
}
html body .mc-panel .mc-visual,
html body .mc-panel .mc-blob {
display: none !important;
}
html body .mc-panel .mc-body {
font-size: 16px !important;
line-height: 1.6 !important;
max-width: 60ch;
margin: 0 0 22px !important;
}
html body .mc-panel .mc-preview {
margin-top: 8px;
}
/* ---- 18.9 Contact "Not ready to pick a side?" — tighten width ----
Currently stretches the full viewport into a thin banner. Constrain. */
html body .contact-section-secondary {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
html body .contact-section-secondary > .container {
max-width: 920px !important;
margin: 0 auto !important;
padding: 0 24px !important;
}
html body details.contact-collapse,
html body .contact-section-secondary details {
max-width: 920px !important;
margin: 0 auto !important;
border-radius: var(--radius-xl, 32px) !important;
}
html body details.contact-collapse > summary,
html body .contact-section-secondary details > summary {
padding: 18px 24px !important;
font-size: 15px !important;
font-weight: 500 !important;
}
/* ---- 18.10 Section padding: kill empty void below contact ----
The bottom of the homepage had ~300px of dead space below contact. */
html body main > section:last-of-type,
html body main > footer {
margin-top: 0 !important;
}
html body footer.footer { padding-top: 60px !important; }
/* ---- 18.11 Dark-mode text contrast for body copy ----
Many .section-lead, .ind-hero-sub, .market-sub strings were at
45-55% opacity — fine on light, washed-out on dark. */
[data-theme="dark"] html body .section-lead,
[data-theme="dark"] html body .ind-hero-sub,
[data-theme="dark"] html body .market-sub,
[data-theme="dark"] html body .hero-monument-sub,
[data-theme="dark"] html body .mc-body,
[data-theme="dark"] html body .pickside-sub,
[data-theme="dark"] html body .flow-step p {
color: rgba(238, 244, 246, 0.78) !important;
}
/* ---- 18.12 Pickside divider "or" pill: visible in dark ----
The "or" between the two doors was dark-on-dark. */
[data-theme="dark"] html body .pickside-divider .pickside-or {
background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
color: var(--ink) !important;
}
/* ============================================================
PHASE 19 — MEDIA KIT page styles
New component classes for the MediaKit.html page (mk-*).
Append-only, follows the Liquid Glass language.
============================================================ */
/* Hero */
html body .section-mediakit-hero { padding-top: clamp(80px, 11vw, 140px) !important; padding-bottom: 56px !important; }
html body .mk-hero-inner { max-width: 920px; }
html body .mk-headline {
font-size: clamp(44px, 6.4vw, 88px);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.02;
margin: 16px 0 18px;
}
html body .mk-headline span { display: block; }
html body .mk-headline .italic.grad {
font-family: "Instrument Serif", Georgia, serif;
font-style: italic;
font-weight: 400;
background: var(--grad-spectrum);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
html body .mk-sub {
font-size: clamp(17px, 1.7vw, 21px);
line-height: 1.5;
color: var(--ink-2);
max-width: 56ch;
margin: 0 0 30px;
}
html body .mk-hero-actions {
display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
html body .mk-cta-primary {
background: linear-gradient(135deg, var(--teal), var(--green)) !important;
color: #fff !important;
padding: 16px 28px !important;
border-radius: var(--radius-pill, 9999px) !important;
font-weight: 600 !important;
font-size: 15.5px !important;
display: inline-flex; align-items: center; gap: 10px;
text-decoration: none;
border: 1px solid rgba(255,255,255,0.18);
box-shadow:
0 1px 0 rgba(255,255,255,0.25) inset,
0 16px 36px -14px rgba(0, 120, 103, 0.55);
transition: transform .25s ease, box-shadow .25s ease;
}
html body .mk-cta-primary:hover { transform: translateY(-2px) scale(1.015); }
html body .mk-link {
color: var(--ink);
font-weight: 500;
text-decoration: none;
font-size: 15px;
transition: color .2s ease;
}
html body .mk-link:hover { color: var(--green); }
/* Section head shared */
html body .mk-section-head { max-width: 760px; margin: 0 0 32px; }
html body .mk-section-title {
font-size: clamp(28px, 3.6vw, 46px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
margin: 10px 0 12px;
color: var(--ink);
}
html body .mk-section-body {
font-size: 16px;
line-height: 1.6;
color: var(--ink-2);
max-width: 60ch;
margin: 0;
}
html body .mk-subsection-title {
font-size: 22px; font-weight: 600;
letter-spacing: -0.015em;
margin: 56px 0 18px;
color: var(--ink);
}
/* Boilerplate cards */
html body .mk-boilerplate-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 900px) { html body .mk-boilerplate-grid { grid-template-columns: 1fr; } }
html body .mk-boilerplate-card {
padding: 24px;
border-radius: var(--radius-xl, 32px);
display: flex; flex-direction: column; gap: 14px;
}
html body .mk-boilerplate-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
html body .mk-tag {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: color-mix(in srgb, var(--ink) 55%, transparent);
}
html body .mk-copy {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px;
border-radius: 9999px;
border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
background: rgba(255,255,255,0.6);
font-size: 12px;
font-weight: 500;
color: var(--ink);
cursor: pointer;
transition: background .2s ease, border-color .2s ease;
}
html body .mk-copy:hover { background: rgba(255,255,255,0.9); }
html body .mk-copy.mk-copy-flash, html body .mk-copy span.mk-copy-flash { color: var(--green); }
html body .mk-boilerplate-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
/* Logos grid */
html body .mk-logo-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
margin-top: 24px;
}
@media (max-width: 900px) { html body .mk-logo-grid { grid-template-columns: 1fr; } }
html body .mk-logo-card {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 0;
border-radius: var(--radius-xl, 32px);
overflow: hidden;
}
@media (max-width: 600px) { html body .mk-logo-card { grid-template-columns: 1fr; } }
html body .mk-logo-preview {
display: grid; place-items: center;
padding: 36px;
min-height: 180px;
}
html body .mk-logo-light .mk-logo-preview { background: rgba(255,255,255,0.6); }
html body .mk-logo-dark .mk-logo-preview { background: #0a1014; }
html body .mk-logo-preview img { max-width: 70%; max-height: 110px; display: block; }
html body .mk-logo-meta {
padding: 22px;
display: flex; flex-direction: column; gap: 8px; justify-content: center;
}
html body .mk-logo-meta h4 { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }
html body .mk-logo-meta p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
html body .mk-download {
margin-top: 8px;
align-self: flex-start;
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600;
color: var(--green);
text-decoration: none;
padding: 7px 12px;
border-radius: 9999px;
background: color-mix(in srgb, var(--green) 12%, transparent);
transition: background .2s ease;
}
html body .mk-download:hover { background: color-mix(in srgb, var(--green) 22%, transparent); }
/* Color swatches */
html body .mk-swatch-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 18px;
}
@media (max-width: 900px) { html body .mk-swatch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { html body .mk-swatch-grid { grid-template-columns: 1fr; } }
html body .mk-swatch {
appearance: none;
border: 0;
padding: 0;
background: rgba(255,255,255,0.5);
border-radius: var(--radius-lg, 24px);
overflow: hidden;
text-align: left;
cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease;
border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
html body .mk-swatch:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0, 87, 114, 0.2); }
html body .mk-swatch.mk-copy-flash { box-shadow: 0 0 0 2px var(--green); }
html body .mk-swatch-fill {
display: block;
height: 92px;
background: var(--c);
}
html body .mk-swatch--bordered .mk-swatch-fill { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
html body .mk-swatch-meta {
display: flex; flex-direction: column; gap: 2px;
padding: 14px 16px;
}
html body .mk-swatch-meta strong { font-size: 14.5px; color: var(--ink); }
html body .mk-swatch-meta span { font-size: 12.5px; color: var(--ink-2); }
html body .mk-swatch-meta code { font-size: 12px; font-family: ui-monospace, SFMono-Regular, monospace; color: var(--ink-2); margin-top: 4px; }
/* Gradient swatches */
html body .mk-gradient-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 900px) { html body .mk-gradient-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { html body .mk-gradient-grid { grid-template-columns: 1fr; } }
html body .mk-gradient {
border-radius: var(--radius-lg, 24px);
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
background: rgba(255,255,255,0.5);
cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease;
}
html body .mk-gradient:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0, 87, 114, 0.2); }
html body .mk-gradient.mk-copy-flash { box-shadow: 0 0 0 2px var(--green); }
html body .mk-gradient-fill { display: block; height: 96px; background: var(--g); }
html body .mk-gradient-meta { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; }
html body .mk-gradient-meta strong { font-size: 14px; color: var(--ink); }
html body .mk-gradient-meta code { font-size: 11.5px; font-family: ui-monospace, monospace; color: var(--ink-2); }
/* Typography specimens */
html body .mk-type-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-top: 24px;
}
@media (max-width: 900px) { html body .mk-type-grid { grid-template-columns: 1fr; } }
html body .mk-type-card {
padding: 30px;
border-radius: var(--radius-xl, 32px);
display: flex; flex-direction: column; gap: 16px;
}
html body .mk-type-specimen { font-size: clamp(48px, 6vw, 76px); line-height: 1; color: var(--ink); }
html body .mk-type-meta { display: flex; flex-direction: column; gap: 4px; }
html body .mk-type-meta strong { font-size: 17px; font-weight: 600; color: var(--ink); }
html body .mk-type-meta span { font-size: 13.5px; color: var(--ink-2); }
html body .mk-type-meta code { font-size: 12px; font-family: ui-monospace, monospace; color: var(--ink-2); }
html body .mk-type-meta a { font-size: 13px; color: var(--green); text-decoration: none; margin-top: 6px; }
/* Founders / team */
html body .mk-team-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
margin-top: 24px;
}
@media (max-width: 700px) { html body .mk-team-grid { grid-template-columns: 1fr; } }
html body .mk-team-card {
display: grid;
grid-template-columns: 80px 1fr;
gap: 18px;
padding: 22px;
border-radius: var(--radius-xl, 32px);
align-items: start;
}
html body .mk-team-avatar {
width: 64px; height: 64px;
border-radius: 9999px;
display: grid; place-items: center;
background: var(--c, var(--teal));
color: #fff;
font-weight: 700;
font-size: 22px;
letter-spacing: -0.02em;
}
html body .mk-team-avatar--img { background-size: cover; background-position: center; color: transparent; }
html body .mk-team-meta h4 { margin: 0 0 4px; font-size: 17px; font-weight: 600; color: var(--ink); }
html body .mk-team-role { margin: 0 0 8px; font-size: 13.5px; color: var(--green); font-weight: 500; }
html body .mk-team-bio { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
html body .mk-team-linkedin { font-size: 13px; color: var(--ink); text-decoration: none; font-weight: 500; }
html body .mk-team-linkedin:hover { color: var(--green); }
/* Fact sheet */
html body .mk-facts-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 18px;
}
@media (max-width: 1100px) { html body .mk-facts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { html body .mk-facts-grid { grid-template-columns: 1fr; } }
html body .mk-fact {
background: rgba(255,255,255,0.55);
border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
border-radius: var(--radius-lg, 24px);
padding: 18px;
display: flex; flex-direction: column; gap: 4px;
}
html body .mk-fact-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 55%, transparent); }
html body .mk-fact-value { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
/* Press mentions */
html body .mk-press-list {
list-style: none;
padding: 0; margin: 24px 0 0;
display: flex; flex-direction: column; gap: 14px;
}
html body .mk-press-item {
display: grid;
grid-template-columns: 110px 1fr auto;
gap: 18px;
padding: 22px;
border-radius: var(--radius-xl, 32px);
align-items: center;
}
@media (max-width: 700px) {
html body .mk-press-item { grid-template-columns: 1fr; align-items: start; gap: 10px; }
}
html body .mk-press-kind {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--green);
background: color-mix(in srgb, var(--green) 12%, transparent);
padding: 6px 10px;
border-radius: 9999px;
align-self: start;
width: fit-content;
}
html body .mk-press-kind[data-kind="podcast"] { color: var(--teal); background: color-mix(in srgb, var(--teal) 14%, transparent); }
html body .mk-press-kind[data-kind="interview"] { color: #8B6F00; background: color-mix(in srgb, var(--yellow) 22%, transparent); }
html body .mk-press-kind[data-kind="event"] { color: var(--blue); background: color-mix(in srgb, var(--blue) 14%, transparent); }
html body .mk-press-body h4 { margin: 0 0 4px; font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.3; }
html body .mk-press-outlet { margin: 0 0 6px; font-size: 13px; color: var(--ink-2); }
html body .mk-press-excerpt { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
html body .mk-press-link {
font-size: 13px;
font-weight: 600;
color: var(--green);
text-decoration: none;
padding: 8px 14px;
border-radius: 9999px;
background: color-mix(in srgb, var(--green) 12%, transparent);
white-space: nowrap;
transition: background .2s ease;
}
html body .mk-press-link:hover { background: color-mix(in srgb, var(--green) 22%, transparent); }
/* Downloads */
html body .mk-downloads-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin-top: 18px;
}
@media (max-width: 700px) { html body .mk-downloads-grid { grid-template-columns: 1fr; } }
html body .mk-download-card {
display: grid;
grid-template-columns: 44px 1fr;
gap: 16px;
padding: 20px 22px;
border-radius: var(--radius-xl, 32px);
align-items: center;
text-decoration: none;
color: var(--ink);
transition: transform .2s ease, box-shadow .2s ease;
}
html body .mk-download-card:hover { transform: translateY(-2px); }
html body .mk-download-icon {
width: 44px; height: 44px;
border-radius: 12px;
display: grid; place-items: center;
background: linear-gradient(135deg, var(--teal), var(--green));
color: #fff;
}
html body .mk-download-meta h4 { margin: 0 0 2px; font-size: 15.5px; font-weight: 600; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
html body .mk-download-size { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
html body .mk-download-meta p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
/* Press contact */
html body .mk-contact-card {
max-width: 760px;
margin: 0 auto;
padding: clamp(28px, 4vw, 44px);
border-radius: var(--radius-xl, 32px);
}
html body .mk-contact-grid {
display: flex; flex-direction: column; gap: 12px;
margin-top: 24px;
padding-top: 22px;
border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
html body .mk-contact-row {
display: grid;
grid-template-columns: 110px 1fr;
gap: 16px;
align-items: baseline;
}
@media (max-width: 540px) { html body .mk-contact-row { grid-template-columns: 1fr; } }
html body .mk-contact-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: color-mix(in srgb, var(--ink) 55%, transparent);
}
html body .mk-contact-value {
font-size: 16px;
color: var(--ink);
text-decoration: none;
font-weight: 500;
}
html body a.mk-contact-value:hover { color: var(--green); }
/* Dark-theme overrides for the Media Kit specifically */
[data-theme="dark"] html body .mk-logo-light .mk-logo-preview { background: rgba(255,255,255,0.05); }
[data-theme="dark"] html body .mk-swatch,
[data-theme="dark"] html body .mk-gradient,
[data-theme="dark"] html body .mk-fact,
[data-theme="dark"] html body .mk-copy { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] html body .mk-copy:hover { background: rgba(255,255,255,0.10); }
/* ============================================================
PHASE 20 — MOBILE RESCUE ===
Append-only. Establishes a 4-breakpoint policy and adds
targeted overrides for layout, typography, touch targets,
forms, photos and per-page collapse. No HTML restructure.
============================================================
STANDARD BREAKPOINT POLICY (use these going forward):
>=1100px -> desktop default
768-1099 -> tablet / small laptop (collapse to 2-col where natural)
480-767 -> phone landscape / large phone (1-col, tighter padding)
<480px -> small phone (further pad cut, font-size tuning)
Legacy scattered breakpoints (900/980/720/600/...) remain in
place; rules here override only where the patchy behavior shows.
============================================================ */
/* ----- 1. Universal safety nets ----------------------------- */
/* Stop horizontal scroll caused by stray overflow at any width. */
html, body { max-width: 100%; overflow-x: hidden; }
/* All raster images stay inside the viewport, ignore intrinsic
width="600"/height="..." attributes that overflow at 320px. */
html body img:not([class*="logo"]):not([alt*="logo" i]) {
max-width: 100%;
height: auto;
}
/* iOS safe-area-inset support for nav + footer (notched phones). */
@supports (padding: max(0px)) {
html body .nav {
padding-left: max(14px, env(safe-area-inset-left));
padding-right: max(14px, env(safe-area-inset-right));
}
html body .site-footer,
html body footer {
padding-left: max(0px, env(safe-area-inset-left));
padding-right: max(0px, env(safe-area-inset-right));
padding-bottom: max(0px, env(safe-area-inset-bottom));
}
}
/* ----- 2. Container + section padding tuning per breakpoint - */
@media (max-width: 1099px) {
html body .container { max-width: 100% !important; padding-left: 40px !important; padding-right: 40px !important; }
}
@media (max-width: 767px) {
html body .container { padding-left: 22px !important; padding-right: 22px !important; }
html body .section { padding-top: 64px !important; padding-bottom: 64px !important; }
html body .section-mediakit-hero { padding-top: 96px !important; padding-bottom: 40px !important; }
html body .hero,
html body .hero-fork,
html body .hero-monument,
html body .biz-hero,
html body .ind-hero,
html body .market-hero { padding-top: 120px !important; padding-bottom: 40px !important; }
}
@media (max-width: 479px) {
html body .container { padding-left: 16px !important; padding-right: 16px !important; }
html body .section { padding-top: 52px !important; padding-bottom: 52px !important; }
html body .hero,
html body .hero-fork,
html body .hero-monument,
html body .biz-hero,
html body .ind-hero,
html body .market-hero { padding-top: 108px !important; padding-bottom: 32px !important; }
}
/* ----- 3. Typography scaling fallbacks (phone) -------------- */
@media (max-width: 767px) {
html body h1, html body .hero-headline, html body .market-headline,
html body .fork-headline, html body .mk-headline,
html body .hero-monument-headline {
font-size: clamp(32px, 9vw, 52px) !important;
line-height: 1.05 !important;
letter-spacing: -0.03em !important;
}
html body h2, html body .section-title {
font-size: clamp(26px, 6.8vw, 40px) !important;
line-height: 1.1 !important;
}
html body h3 { font-size: clamp(20px, 5vw, 26px) !important; line-height: 1.2 !important; }
html body p, html body .section-lead, html body .market-sub,
html body .hero-monument-sub, html body .mk-sub {
font-size: 16px !important;
line-height: 1.55 !important;
}
html body .section-lead { max-width: 38ch !important; }
/* Tame letter-spacing on tiny labels so they don't wrap mid-word */
html body .section-eyebrow,
html body .hero-monument-eyebrow,
html body .mk-tag,
html body .mk-fact-label,
html body .mk-contact-label {
letter-spacing: 0.10em !important;
}
}
@media (max-width: 479px) {
html body h1, html body .hero-headline, html body .market-headline,
html body .fork-headline, html body .mk-headline,
html body .hero-monument-headline {
font-size: clamp(28px, 9.5vw, 40px) !important;
}
html body h2, html body .section-title {
font-size: clamp(22px, 7vw, 30px) !important;
}
}
/* ----- 4. Touch target enforcement (Apple HIG: 44x44) ------- */
@media (max-width: 767px) {
html body .nav-cta,
html body .nav-burger,
html body .theme-toggle,
html body .btn,
html body .pickside-cta,
html body .hero-monument-cta,
html body .hero-monument-link,
html body .mk-cta-primary,
html body .mk-link,
html body .mk-copy,
html body .mk-download,
html body .mk-press-link,
html body .market-chip,
html body .role-tabs button,
html body .cc-case-link,
html body .dualcta-link,
html body .store-btn,
html body .faq-item > summary,
html body .social,
html body a.social,
html body .footer-col a {
min-height: 44px;
}
html body .nav-burger,
html body .theme-toggle { min-width: 44px; min-height: 44px; }
/* Footer link rows: give comfortable vertical spacing for thumbs. */
html body .footer-col a { display: inline-flex; align-items: center; padding: 6px 0; }
/* Drawer link comfort (8 items + theme + CTA): hit area 48px. */
html body .nav.is-open .nav-links .nav-link {
min-height: 48px;
display: flex;
align-items: center;
font-size: 16px !important;
}
}
/* ----- 5. Form fields — iOS-safe sizing --------------------- */
@media (max-width: 767px) {
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html body textarea,
html body select {
font-size: 16px !important; /* prevents iOS zoom-on-focus */
min-height: 44px;
padding: 12px 14px;
}
html body textarea { min-height: 96px; }
html body label { font-size: 14px; }
html body .role-tabs { flex-wrap: wrap; gap: 6px; }
html body .role-tabs button { padding: 10px 14px; font-size: 14px; }
html body .contact-form-card,
html body .biz-signup-section .contact-form-card {
padding: 20px !important;
border-radius: 22px !important;
}
html body .contact-grid,
html body .biz-signup-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
}
/* ----- 6. Per-page collapse rules --------------------------- */
/* INDEX — hero monument, statement panel, pickside, model teaser */
@media (max-width: 767px) {
html body .hero-monument .hero-statement-wrap { margin-top: 32px !important; }
html body .hero-monument .hero-statement-panel {
padding: 18px !important;
width: 100% !important;
max-width: 100% !important;
}
html body .hero-statement-panel .hsp-tile { padding: 14px !important; }
html body .pickside-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
html body .pickside-divider { display: none !important; }
html body .pickside-panel { padding: 24px !important; min-height: 0 !important; }
html body .hero-monument-actions { flex-wrap: wrap; gap: 14px !important; }
html body .hero-monument-cta { width: 100%; justify-content: center; }
}
/* INDEX — trust band marquee height tap */
@media (max-width: 479px) {
html body .trust-band { padding: 28px 0 !important; }
}
/* ABOUT — values 4-col -> 2 -> 1; team 4 -> 2 -> 1; mvv stack */
@media (max-width: 767px) {
html body .values { grid-template-columns: 1fr !important; gap: 14px !important; }
html body .team { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
html body .mvv { grid-template-columns: 1fr !important; }
html body .about-teaser .at-grid { grid-template-columns: 1fr !important; gap: 32px !important; padding: 24px !important; }
}
@media (max-width: 479px) {
html body .team { grid-template-columns: 1fr !important; }
}
/* BUSINESS — bento, photo strip, signup */
@media (max-width: 767px) {
html body .bento,
html body .biz-bento { grid-template-columns: 1fr !important; }
html body .bento .span-3,
html body .bento .span-2,
html body .bento .span-4,
html body .bento .span-6 { grid-column: span 1 !important; }
html body .bento .tall { min-height: 0 !important; }
/* Photo thumbs in How-it-works — keep aspect ratio, full width */
html body .photo-thumb img { width: 100%; height: auto; display: block; }
}
/* INDIVIDUAL — experience types + store buttons row */
@media (max-width: 767px) {
html body .experiences,
html body .exp-types { grid-template-columns: 1fr !important; gap: 14px !important; }
html body .hero-stores,
html body .store-buttons,
html body .download-stores { flex-wrap: wrap !important; gap: 12px !important; }
html body .store-btn { width: 100%; justify-content: center; }
}
@media (min-width: 480px) and (max-width: 767px) {
/* On larger phones in landscape allow two store buttons side by side */
html body .hero-stores .store-btn,
html body .store-buttons .store-btn { width: auto; min-width: 180px; }
}
/* PRICING — plans stack, matrix already has mobile accordion */
@media (max-width: 767px) {
html body .plans,
html body .plan-grid,
html body .pricing-plans { grid-template-columns: 1fr !important; gap: 18px !important; }
html body .plan,
html body .plan-card { min-height: 0 !important; }
/* Make sure the desktop matrix table doesn't try to render at phone size */
html body .matrix-wrap { display: none !important; }
html body .matrix-mobile { display: block !important; }
html body .faq-item { padding: 0 !important; }
html body .faq-item > summary { padding: 16px 18px !important; font-size: 15px !important; line-height: 1.35; }
html body .faq-item p { padding: 0 18px 16px !important; font-size: 14px !important; }
}
/* COMPANIES — portrait grid stacks; video aspect locked */
@media (max-width: 767px) {
html body .section-companies-grid .companies-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
html body .company-card { padding: 16px !important; }
html body .company-card .cc-video { aspect-ratio: 16 / 9; height: auto !important; }
html body .company-card .cc-pills { flex-wrap: wrap; gap: 6px !important; }
html body .company-card .cc-foot { flex-wrap: wrap; gap: 8px !important; }
}
/* SERVICES — 2x2 -> 1 col */
@media (max-width: 767px) {
html body .section-services-grid .services-grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
html body .section-services-grid .service-tile { padding: 28px !important; }
}
/* MARKET — gallery columns + lightbox safety */
@media (max-width: 767px) {
html body .market-gallery { column-count: 1 !important; column-gap: 0 !important; }
html body .market-card { break-inside: avoid; margin-bottom: 14px; }
html body .market-filter-bar { flex-wrap: wrap; gap: 6px !important; justify-content: flex-start; }
html body .market-chip { padding: 10px 14px !important; font-size: 13px !important; }
/* Lightbox: never exceed viewport */
html body .market-lightbox,
html body .market-lightbox img { max-width: 100vw; max-height: 100vh; }
html body .market-lightbox .lb-inner { padding: 16px !important; }
}
/* MEDIA KIT — collapse every grid cleanly; tame logo preview */
@media (max-width: 767px) {
html body .mk-boilerplate-grid,
html body .mk-logo-grid,
html body .mk-type-grid,
html body .mk-downloads-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
html body .mk-swatch-grid { grid-template-columns: repeat(2, 1fr) !important; }
html body .mk-gradient-grid { grid-template-columns: repeat(2, 1fr) !important; }
html body .mk-facts-grid { grid-template-columns: repeat(2, 1fr) !important; }
html body .mk-team-grid { grid-template-columns: 1fr !important; }
html body .mk-logo-card { grid-template-columns: 1fr !important; }
html body .mk-logo-preview { min-height: 140px !important; padding: 24px !important; }
html body .mk-press-item { grid-template-columns: 1fr !important; padding: 18px !important; gap: 8px !important; }
html body .mk-press-link { align-self: flex-start; }
html body .mk-team-card { grid-template-columns: 64px 1fr !important; padding: 18px !important; gap: 14px !important; }
html body .mk-contact-row { grid-template-columns: 1fr !important; }
html body .mk-contact-card { padding: 22px !important; }
html body .mk-type-card { padding: 22px !important; }
html body .mk-type-specimen { font-size: clamp(40px, 11vw, 60px) !important; }
html body .mk-section-title { font-size: clamp(24px, 6.2vw, 34px) !important; }
}
@media (max-width: 479px) {
html body .mk-swatch-grid,
html body .mk-gradient-grid,
html body .mk-facts-grid { grid-template-columns: 1fr !important; }
html body .mk-hero-actions { flex-direction: column; align-items: stretch; gap: 12px !important; }
html body .mk-cta-primary { width: 100%; justify-content: center; }
}
/* DUAL CTA + dual CTA band — stack on phone */
@media (max-width: 767px) {
html body .dualcta { grid-template-columns: 1fr !important; gap: 14px !important; }
html body .dualcta-card { padding: 24px !important; }
html body .dualcta-band-inner { flex-direction: column !important; gap: 14px !important; padding: 18px !important; }
html body .dualcta-band-sep { display: none !important; }
}
/* ----- 7. Nav drawer comfort (8 items + theme + CTA) -------- */
@media (max-width: 979px) {
html body .nav.is-open .nav-links {
padding: 14px !important;
gap: 6px !important;
max-height: calc(100vh - 100px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
html body .nav.is-open .nav-links .nav-link {
padding: 14px 18px !important;
font-size: 15.5px !important;
border-radius: 18px !important;
}
}
@media (max-width: 479px) {
html body .nav.is-open .nav-links .nav-link {
padding: 13px 16px !important;
font-size: 15px !important;
}
}
/* ----- 8. Footer + misc grid safety ------------------------- */
@media (max-width: 767px) {
html body .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
html body .stat-row { grid-template-columns: repeat(2, 1fr) !important; }
html body .testimonials{ grid-template-columns: 1fr !important; }
html body .flow { grid-template-columns: 1fr !important; }
html body .two-dir { grid-template-columns: 1fr !important; }
html body .split { grid-template-columns: 1fr !important; gap: 32px !important; }
}
@media (max-width: 479px) {
html body .footer-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
html body .stat-row { grid-template-columns: 1fr !important; gap: 12px !important; }
}
/* ----- 9. Reduced-motion respect (mobile especially) -------- */
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
html body .reveal { opacity: 1 !important; transform: none !important; }
}
/* === END PHASE 20 === */
/* ============================================================
PHASE 21 — Living gradients + full roundness
Anemona crew · Pulse (motion) + Neon (gradient craft) + Flow (polish)
Brief: every brand gradient flows; every surface stays rounded.
Self-contained + reversible — delete this whole block to revert.
All motion gated behind prefers-reduced-motion: no-preference.
P9 already animates the wordmark, light-theme CTAs and hero text;
Phase 21 fills every gradient it left static.
============================================================ */
/* ----- 21.0 Flow keyframes --------------------------------- */
@media (prefers-reduced-motion: no-preference) {
@keyframes g21-flow { /* horizontal travel */
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes g21-flow-diag { /* diagonal drift for large washes */
0% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
100% { background-position: 0% 0%; }
}
}
/* ----- 21.1 Oversize every brand-gradient surface ---------- */
/* (background-position can only travel if background-size > 100%) */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .nav-cta,
[data-theme="dark"] .contact-submit,
[data-theme="dark"] .biz-cta,
[data-theme="dark"] .ind-cta,
[data-theme="dark"] .bwu-cta,
[data-theme="dark"] .pt-cta-primary,
.btn-sun, .btn-meadow, .btn-citrus,
.section-problem, .section-proof,
.bento .b,
.tcard .who .av,
.txt-grad-sun, .txt-grad-meadow, .txt-grad-citrus, .txt-grad-spectrum,
.txt-grad-yellow, .txt-grad-blue,
.fork-companies, .fork-candidates,
html body .grad-rule, html body hr.grad-rule,
html body .ambient-orb {
background-size: 220% 220% !important;
}
html body .section.has-grad-rule::before { background-size: 220% 100% !important; }
/* ----- 21.2 Animate them (varied tempos = organic, not synced) */
@media (prefers-reduced-motion: no-preference) {
/* Actions — fill the dark-theme gap + the generic gradient buttons */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .nav-cta,
[data-theme="dark"] .contact-submit,
[data-theme="dark"] .biz-cta,
[data-theme="dark"] .ind-cta,
[data-theme="dark"] .bwu-cta,
[data-theme="dark"] .pt-cta-primary { animation: g21-flow 7s ease-in-out infinite; }
.btn-sun { animation: g21-flow 8s ease-in-out infinite; }
.btn-meadow { animation: g21-flow 9s ease-in-out infinite; }
.btn-citrus { animation: g21-flow 7.5s ease-in-out infinite; }
/* Section washes — slow, barely-there drift over big areas */
.section-problem { animation: g21-flow-diag 28s ease-in-out infinite; }
.section-proof { animation: g21-flow-diag 32s ease-in-out infinite; }
/* Bento tiles — alternate direction so the grid feels alive */
.bento .b { animation: g21-flow-diag 19s ease-in-out infinite; }
.bento .b:nth-child(even) { animation-duration: 23s; animation-direction: reverse; }
/* Gradient text utilities */
.txt-grad-sun, .txt-grad-meadow, .txt-grad-citrus,
.txt-grad-yellow, .txt-grad-blue { animation: g21-flow 12s ease-in-out infinite; }
.txt-grad-spectrum { animation: g21-flow 14s ease-in-out infinite; }
/* Avatars */
.tcard .who .av { animation: g21-flow 9s ease-in-out infinite; }
/* The seam between sections literally flows */
html body .grad-rule,
html body hr.grad-rule,
html body .section.has-grad-rule::before { animation: g21-flow 10s ease-in-out infinite; }
/* Fork hero panels + ambient orbs — ultra-slow ambient life */
.fork-companies { animation: g21-flow-diag 34s ease-in-out infinite; }
.fork-candidates { animation: g21-flow-diag 38s ease-in-out infinite; }
html body .ambient-orb { animation: g21-flow-diag 40s ease-in-out infinite; }
}
/* ----- 21.3 Full roundness — close the form-control gap ----- */
/* Cards / pills / sections are already rounded (radius tokens + the
max-specificity block); native form fields were the last sharp edge. */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html body select,
html body fieldset {
border-radius: 14px !important;
}
html body textarea { border-radius: 18px !important; }
/* === END PHASE 21 === */
/* ============================================================
PHASE 22 — Founder live-feedback pass (round 1)
From 5 screenshots: contrast, rounded buttons, bigger numbers,
rounder panels. Self-contained + reversible.
============================================================ */
/* ----- 22.1 "can't see the text" — hero accent contrast ------ */
/* The animated spectrum runs too light on the pale hero bg in light
theme. Deepen the stops (teal→green→blue) so it stays readable.
Dark theme keeps the brighter P9 spectrum (it reads fine on dark). */
[data-theme="light"] .hero-monument-headline .grad,
[data-theme="light"] .hero-monument-headline .hm-line-2,
[data-theme="light"] .hero h1 .grad {
background-image: linear-gradient(120deg, #006d60, #008f86, #005772, #006d60) !important;
-webkit-text-fill-color: transparent !important;
}
/* ----- 22.2 "rounded buttons everywhere" — pill every action -- */
html body .btn,
html body .btn-primary, html body .btn-glass,
html body .btn-sun, html body .btn-meadow, html body .btn-citrus,
html body .hero-monument-cta,
html body .nav-cta,
html body .contact-submit,
html body .contact-success-next,
html body .mc-cta,
html body .proof-case-arrow,
html body .biz-cta, html body .ind-cta, html body .bwu-cta,
html body .pt-cta-primary,
html body .fork-cta,
html body .role-tab,
html body button.contact-submit,
html body button[type="submit"] {
border-radius: 999px !important;
}
/* ----- 22.3 "bigger numbers" — let the stats shout ----------- */
html body .problem-stat strong {
font-size: clamp(48px, 7vw, 78px) !important;
line-height: 0.95 !important;
letter-spacing: -0.02em !important;
display: block !important;
}
/* ----- 22.4 "rounded edges" — softer Pick-a-side panels ------ */
html body .pickside-panel {
border-radius: 32px !important;
}
/* ----- 22.5 "rethink section" — Solution flow → vertical spine */
/* Old layout crammed 3 nodes + arrows into a half-width column, so
every label wrapped. Rebuild as a vertical timeline: number badges
threaded by a gradient spine, left-aligned text that can breathe. */
html body .solution-schematic.solution-flow {
display: flex;
flex-direction: column;
gap: 0;
grid-template-columns: none;
padding: 30px 30px;
overflow: hidden;
}
html body .solution-schematic.solution-flow::before {
content: '';
position: absolute;
left: 51px;
top: 58px;
bottom: 58px;
width: 2px;
border-radius: 2px;
background: linear-gradient(180deg, rgba(0,175,185,0.55), rgba(0,120,103,0.55));
z-index: 0;
}
.solution-flow .sflow-step {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 44px 1fr;
column-gap: 18px;
align-items: start;
padding: 14px 0;
}
.solution-flow .sflow-num {
width: 44px;
height: 44px;
justify-self: start;
display: grid;
place-items: center;
border-radius: 999px;
font-size: 15px;
font-weight: 800;
letter-spacing: 0.02em;
color: #fff;
background: linear-gradient(135deg, #00AFB9, #007867);
background-size: 200% 200%;
box-shadow: 0 8px 18px -8px rgba(0,175,185,0.6);
position: relative;
z-index: 1;
}
.solution-flow .sflow-2 .sflow-num { background: linear-gradient(135deg, #EAC105, #00AFB9); color: #0B2A2A; }
.solution-flow .sflow-3 .sflow-num { background: linear-gradient(135deg, #007867, #005772); color: #fff; }
.solution-flow .sflow-body {
display: flex;
flex-direction: column;
gap: 5px;
text-align: left;
padding-top: 2px;
}
.solution-flow .sflow-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.solution-flow .sflow-1 .sflow-label { color: var(--teal); }
.solution-flow .sflow-2 .sflow-label { color: #b48b00; }
.solution-flow .sflow-3 .sflow-label { color: var(--green); }
.solution-flow .sflow-body strong { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.solution-flow .sflow-body small { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
@media (prefers-reduced-motion: no-preference) {
.solution-flow .sflow-num { animation: g21-flow 8s ease-in-out infinite; }
}
/* ----- 22.7 "uniform texts" — proof stat numbers match ------- */
/* 9/10 (plain text) outran the counter-span numbers. Force one size
on both the and its inner counter . */
html body .section-proof .stat-row .stat strong,
html body .section-proof .stat-row .stat strong span,
html body .stat-row .stat strong,
html body .stat-row .stat strong span {
font-size: clamp(34px, 4.2vw, 52px) !important;
line-height: 1 !important;
letter-spacing: -0.02em !important;
}
/* ----- 22.8 "rethink this timeline" — How-it-works stepper ---- */
/* The old grid (1fr auto 1fr auto 1fr + injected → arrows) was built
for 3 steps; with 5 steps it cramped + scattered arrows. Rebuild as
a clean 5-node stepper threaded by one horizontal spine. */
html body .flow {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 18px !important;
align-items: start !important;
position: relative;
}
html body .section-how .flow::before {
content: '';
position: absolute;
top: 23px;
left: 10%;
right: 10%;
height: 2px;
background: linear-gradient(90deg,
rgba(0,175,185,0) 0%, rgba(234,193,5,0.6) 20%, rgba(0,175,185,0.7) 50%,
rgba(0,120,103,0.6) 80%, rgba(0,120,103,0) 100%);
background-size: 200% 100%;
z-index: 0;
}
html[data-theme] body .flow-step {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
padding: 0 6px !important;
text-align: center !important;
display: flex !important;
flex-direction: column;
align-items: center;
gap: 8px !important;
position: relative;
z-index: 1;
}
html[data-theme] body .flow-step:hover { transform: none !important; }
html body .flow-step + .flow-step::before,
html body .flow .flow-arrow { content: none !important; display: none !important; }
html[data-theme] body .flow-step .num {
width: 46px !important;
height: 46px !important;
display: grid !important;
place-items: center !important;
margin: 0 auto !important;
border-radius: 999px !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 16px !important;
font-weight: 800 !important;
font-style: normal !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background: linear-gradient(135deg, #00AFB9, #007867) !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
background-size: 200% 200% !important;
box-shadow: 0 8px 18px -8px rgba(0,175,185,0.6);
}
html[data-theme] body .flow-step:nth-child(2) .num { background: linear-gradient(135deg,#34c0b0,#00AFB9) !important; }
html[data-theme] body .flow-step:nth-child(3) .num { background: linear-gradient(135deg,#EAC105,#00AFB9) !important; color:#0B2A2A !important; -webkit-text-fill-color:#0B2A2A !important; }
html[data-theme] body .flow-step:nth-child(4) .num { background: linear-gradient(135deg,#5bbf7a,#007867) !important; }
html[data-theme] body .flow-step:nth-child(5) .num { background: linear-gradient(135deg,#007867,#005772) !important; }
html body .flow-step h4 { font-size: 15.5px !important; line-height: 1.25 !important; margin: 4px 0 2px !important; }
html body .flow-step p { font-size: 12.5px !important; line-height: 1.5 !important; max-width: 20ch; margin: 0 auto !important; }
@media (max-width: 900px) {
html body .flow { grid-template-columns: repeat(2, 1fr) !important; }
html body .section-how .flow::before { display: none !important; }
}
@media (max-width: 560px) {
html body .flow { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: no-preference) {
html[data-theme] body .flow-step .num { animation: g21-flow 8s ease-in-out infinite; }
}
/* ----- 22.9 Reels: fill the grid (8, two rows) + pagination --- */
html body .reels { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 900px) { html body .reels { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { html body .reels { grid-template-columns: 1fr !important; } }
.reels-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 32px;
}
.reels-pager-arrow {
width: 44px;
height: 44px;
border-radius: 999px;
display: grid;
place-items: center;
background: var(--glass);
border: 1px solid var(--line);
color: var(--ink);
font-size: 18px;
cursor: pointer;
backdrop-filter: blur(10px);
transition: transform .25s, border-color .25s;
}
.reels-pager-arrow:hover { transform: translateY(-2px); border-color: var(--ind-1); }
.reels-dots { display: flex; align-items: center; gap: 10px; }
.reels-dot {
width: 9px;
height: 9px;
border-radius: 999px;
padding: 0;
border: 0;
cursor: pointer;
background: color-mix(in srgb, var(--ink) 22%, transparent);
transition: width .3s, background .3s;
}
.reels-dot.is-active {
width: 28px;
background: linear-gradient(90deg, var(--ind-1), var(--ind-3));
}
/* === END PHASE 22 === */
/* ============================================================
PHASE 23 — Hero experience slider (Individual ⇄ Companies)
Toggle-switched, snap-scrolling carousel of experience cards.
Replaces the single static hero panel. Self-contained + reversible.
============================================================ */
.hero-experiences { width: 100%; max-width: 660px; margin: 44px auto 0; }
/* --- Toggle: segmented pill with a sliding gradient thumb --- */
.hx-toggle {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
width: 280px;
max-width: 90%;
margin: 0 auto 24px;
padding: 4px;
border-radius: 999px;
background: var(--glass);
border: 1px solid var(--line);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.hx-toggle-thumb {
position: absolute;
top: 4px; bottom: 4px; left: 4px;
width: calc(50% - 4px);
border-radius: 999px;
background: var(--flow-grad, linear-gradient(135deg, #EAC105, #00AFB9));
background-size: 200% 200%;
box-shadow: 0 6px 16px -6px var(--flow-shadow, rgba(0,175,185,0.55));
transition: transform .32s cubic-bezier(.4,0,.2,1), background .4s ease;
z-index: 0;
}
.hero-experiences[data-active="business"] .hx-toggle-thumb { transform: translateX(100%); }
.hx-toggle-btn {
position: relative;
z-index: 1;
appearance: none;
border: 0;
background: transparent;
cursor: pointer;
padding: 9px 8px;
border-radius: 999px;
font-family: inherit;
font-size: 13px;
font-weight: 700;
color: var(--ink-2);
transition: color .25s;
}
.hx-toggle-btn.is-active { color: #0B2A2A; }
/* --- Slider shell --- */
.hx-slider { position: relative; }
.hx-track {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding: 6px 2px 10px;
scrollbar-width: none;
}
.hx-track::-webkit-scrollbar { display: none; }
/* --- Card --- */
.hx-card {
flex: 0 0 100%;
scroll-snap-align: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 18px;
min-height: 226px;
padding: 24px 26px;
border-radius: 28px;
background: var(--glass-strong);
border: 1px solid var(--line);
backdrop-filter: blur(16px) saturate(150%);
-webkit-backdrop-filter: blur(16px) saturate(150%);
box-shadow: 0 30px 60px -30px rgba(0,120,103,0.28);
text-align: left;
}
.hx-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hx-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.hx-live, .hx-matched {
display: inline-flex; align-items: center; gap: 7px;
padding: 5px 11px; border-radius: 999px;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
white-space: nowrap;
}
.hx-live { background: rgba(0,120,103,0.14); color: #006858; }
.hx-live i { width: 7px; height: 7px; border-radius: 50%; background: #007867; }
.hx-live--off { background: rgba(0,87,114,0.12); color: var(--blue); text-transform: none; letter-spacing: 0.02em; }
.hx-live--off i { background: var(--blue); }
.hx-matched { background: rgba(234,193,5,0.16); color: #8a6d00; }
.hx-matched i { width: 7px; height: 7px; border-radius: 50%; background: #EAC105; }
@media (prefers-reduced-motion: no-preference) {
@keyframes hx-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,120,103,0.45); } 50% { box-shadow: 0 0 0 5px rgba(0,120,103,0); } }
.hx-live i { animation: hx-pulse 2s ease-out infinite; }
}
/* Demo (companies) layout */
.hx-demo { display: flex; align-items: center; gap: 16px; }
.hx-date {
flex: 0 0 auto;
width: 60px; height: 60px;
display: grid; place-items: center; align-content: center;
border-radius: 18px;
background: var(--flow-grad, linear-gradient(135deg, #00AFB9, #007867));
color: #fff; text-align: center;
box-shadow: 0 10px 22px -10px var(--flow-shadow, rgba(0,175,185,0.6));
}
.hx-dow { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.hx-day { display: block; font-size: 24px; font-weight: 800; line-height: 1; }
.hx-demo-body { flex: 1 1 auto; min-width: 0; }
.hx-host { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 26px; line-height: 1.05; color: var(--ink); }
.hx-role { font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.hx-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 9px; font-size: 12px; color: var(--ink-3); }
.hx-sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.hx-cta {
flex: 0 0 auto; align-self: center;
padding: 9px 18px; border-radius: 999px;
font-size: 12.5px; font-weight: 700; color: #0B2A2A;
background: var(--flow-grad, linear-gradient(135deg, #EAC105, #00AFB9));
background-size: 200% 200%;
box-shadow: 0 8px 18px -8px var(--flow-shadow, rgba(0,175,185,0.5));
white-space: nowrap; cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
.hx-toggle-thumb { animation: g21-flow 8s ease-in-out infinite; }
.hx-cta { animation: g21-flow 7s ease-in-out infinite; }
}
/* Person (individual) layout */
.hx-person { display: flex; align-items: center; gap: 14px; }
.hx-avatar {
flex: 0 0 auto;
width: 52px; height: 52px; border-radius: 50%;
display: grid; place-items: center;
font-weight: 800; font-size: 15px; color: #0B2A2A;
background-size: 200% 200%;
box-shadow: 0 8px 18px -8px rgba(0,175,185,0.45);
}
.hx-person-body { flex: 1 1 auto; min-width: 0; }
.hx-quote {
margin: 0;
font-family: 'Instrument Serif', serif; font-style: italic;
font-size: 18px; line-height: 1.42; color: var(--ink);
}
.hx-rating { color: #EAC105; letter-spacing: 2px; font-size: 13px; }
@media (prefers-reduced-motion: no-preference) { .hx-avatar { animation: g21-flow 9s ease-in-out infinite; } }
/* Foot row */
.hx-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.hx-foot-text { font-size: 12px; color: var(--ink-3); }
.hx-stack { display: inline-flex; }
.hx-av {
width: 26px; height: 26px; border-radius: 50%;
margin-left: -8px; border: 2px solid var(--bg-0);
background-size: 200% 200%;
}
.hx-stack .hx-av:first-child { margin-left: 0; }
.hx-av-num {
display: grid; place-items: center;
font-size: 9px; font-weight: 800; color: var(--ink-2);
background: var(--glass); border: 2px solid var(--line);
text-transform: uppercase; letter-spacing: 0.04em;
}
/* Nav arrows */
.hx-nav {
position: absolute; top: 50%; transform: translateY(-50%);
z-index: 4;
width: 42px; height: 42px;
display: grid; place-items: center;
border-radius: 999px;
background: var(--glass-strong); border: 1px solid var(--line);
color: var(--ink); cursor: pointer;
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
box-shadow: 0 10px 24px -12px rgba(0,120,103,0.4);
transition: transform .25s, border-color .25s;
}
.hx-prev { left: -14px; }
.hx-next { right: -14px; }
.hx-nav:hover { border-color: var(--teal); transform: translateY(-50%) scale(1.06); }
/* Dots */
.hx-dots { display: flex; justify-content: center; gap: 9px; margin-top: 18px; }
.hx-pagedot {
width: 8px; height: 8px; border-radius: 999px; padding: 0; border: 0; cursor: pointer;
background: color-mix(in srgb, var(--ink) 22%, transparent);
transition: width .3s, background .3s;
}
.hx-pagedot.is-active { width: 26px; background: var(--flow-grad, linear-gradient(90deg, #00AFB9, #007867)); }
/* Toggle-driven card visibility */
.hero-experiences[data-active="individual"] .hx-card[data-hx-group="business"] { display: none; }
.hero-experiences[data-active="business"] .hx-card[data-hx-group="individual"] { display: none; }
/* Role caption under the toggle — only the active flow's pair shows */
.hx-roles { margin: 0 auto 20px; text-align: center; font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink-2); }
.hx-roles-set { display: none; }
.hx-roles-set b { color: var(--flow-deep, var(--ink)); font-weight: 700; }
.hx-roles-dot { color: var(--flow-base, var(--ink-3)); margin: 0 4px; font-weight: 700; }
.hero-experiences[data-active="individual"] .hx-roles-set[data-hx-roles="individual"],
.hero-experiences[data-active="business"] .hx-roles-set[data-hx-roles="business"] { display: inline; }
/* Responsive */
@media (max-width: 700px) {
.hx-nav { display: none; }
.hx-card { padding: 20px; min-height: 210px; }
.hx-host { font-size: 22px; }
}
/* === END PHASE 23 === */
/* ============================================================
PHASE 24 — live feedback round 2
============================================================ */
/* ----- 24.1 "fix the size" — uniform problem-stat numbers ---- */
/* 3–5x (plain text) took the full enlarged size while 89% / 0
(counter spans) stayed small. Make all three uniform + smaller. */
html body .problem-stats .problem-stat strong,
html body .problem-stat strong {
font-size: clamp(40px, 4.6vw, 58px) !important;
line-height: 1 !important;
letter-spacing: -0.02em !important;
display: block !important;
}
html body .problem-stats .problem-stat strong span,
html body .problem-stat strong span,
html body .problem-stat strong [data-counter] {
font-size: clamp(40px, 4.6vw, 58px) !important;
line-height: 1 !important;
display: inline !important;
}
/* ----- 24.2 "text is not visible" — hero accent solid + readable */
/* The animated gradient clip keeps washing out on the pale hero bg.
Force a solid, high-contrast deep-teal in light theme (max specificity
beats P9 + 22.1; kills the fragile clip + animation). */
html[data-theme="light"] body .hero-monument-headline .hm-line-2,
html[data-theme="light"] body .hero-monument-headline .grad {
background: none !important;
background-image: none !important;
color: #0c5a4f !important;
-webkit-text-fill-color: #0c5a4f !important;
animation: none !important;
}
/* ----- 24.3 "rethink section, rounded + animations" — Services tiles */
/* Cards were sharp-cornered links (hence underlined text), flat. */
html body .section-services-grid .service-tile,
html body .services-grid .service-tile {
border-radius: 28px !important;
text-decoration: none !important;
overflow: hidden;
transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease !important;
}
html body .services-grid .service-tile h3,
html body .services-grid .service-tile p,
html body .section-services-grid .service-tile * { text-decoration: none !important; }
html body .section-services-grid .service-tile:hover { transform: translateY(-6px) !important; }
html body .section-services-grid .service-tile .st-num {
background: linear-gradient(120deg, #EAC105, #00AFB9, #007867) !important;
background-size: 200% 200% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
@media (prefers-reduced-motion: no-preference) {
html body .section-services-grid .service-tile .st-num { animation: g21-flow 7s ease-in-out infinite; }
}
/* ----- 24.4 "use white + brighter, drop the light greys" ---------- */
html[data-theme="light"] {
--bg-0: #ffffff;
--bg-1: #ffffff;
--bg-2: #ffffff;
--bg-3: #ffffff;
--glass: rgba(255,255,255,0.88);
--glass-strong: rgba(255,255,255,0.96);
--nav-bg: rgba(255,255,255,0.90);
--line: rgba(0,120,103,0.10);
--aurora-opacity: 0.20;
--shadow-strong: 0 40px 90px rgba(0,120,103,0.10);
}
html[data-theme="light"] body { background: #ffffff; }
/* === END PHASE 24 === */
/* ============================================================
PHASE 25 — finishing pass (logo · serif · contact · CTAs)
============================================================ */
/* ----- 25.1 "put the coloured exminds logo" ------------------ */
/* Swap the CSS wordmark for the real brand logo image. url() is
relative to site.css (repo root) so it resolves on every page. */
.nav-logo {
background: url(assets/logo-horizontal.png) left center / contain no-repeat;
width: 150px;
height: 40px;
filter: none !important;
}
.nav-logo .logo-mark,
.nav-logo .logo-word { display: none !important; }
.footer .nav-logo.footer-wordmark { width: 150px; height: 40px; }
@media (max-width: 980px) { .nav-logo { width: 128px; height: 34px; } }
/* ----- 25.2 MediaKit: serif → Montserrat --------------------- */
html body .section-dualcta .dualcta-headline,
html body .mk-headline,
html body .mk-headline .italic,
html body .mk-headline .grad,
html body .mk-initials,
html body .mk-source-article,
html body .mk-type-specimen {
font-family: 'Montserrat', system-ui, sans-serif !important;
font-style: normal !important;
}
html body .section-dualcta .dualcta-headline { font-weight: 700 !important; }
/* ----- 25.3 Contact form: visible fields in light theme ------ */
/* Fields were styled with white-alpha bg/border (for dark theme) —
invisible on the new white paper. Give them real light affordance. */
[data-theme="light"] .contact-form input:not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] .contact-form select,
[data-theme="light"] .contact-form textarea {
background: #ffffff !important;
border: 1px solid rgba(0,120,103,0.22) !important;
color: var(--ink) !important;
box-shadow: 0 1px 2px rgba(0,40,40,0.04) !important;
}
[data-theme="light"] .contact-form input::placeholder,
[data-theme="light"] .contact-form textarea::placeholder { color: rgba(11,42,42,0.42) !important; }
[data-theme="light"] .contact-form input:focus,
[data-theme="light"] .contact-form select:focus,
[data-theme="light"] .contact-form textarea:focus {
border-color: var(--teal) !important;
box-shadow: 0 0 0 3px rgba(0,175,185,0.16) !important;
outline: none !important;
}
/* ----- 25.4 Secondary hero CTAs: solid gradient fill --------- */
[data-theme="light"] .hero-services-cta,
[data-theme="light"] .hero-companies-cta {
background: linear-gradient(135deg, #00AFB9, #007867) !important;
background-size: 200% 200% !important;
color: #ffffff !important;
border-color: transparent !important;
}
@media (prefers-reduced-motion: no-preference) {
[data-theme="light"] .hero-services-cta,
[data-theme="light"] .hero-companies-cta { animation: g21-flow 7s ease-in-out infinite; }
}
/* ----- 25.5 Companies hero accent: make the gradient flow ----- */
html body .hero-companies .hero-companies-headline .accent { background-size: 200% 200% !important; }
@media (prefers-reduced-motion: no-preference) {
html body .hero-companies .hero-companies-headline .accent { animation: g21-flow 12s ease-in-out infinite; }
}
/* ----- 25.6 Proof stat-row: center 3-stat rows (Individual) -- */
html body .section-proof .stat-row:has(.stat:nth-child(3):last-child) {
grid-template-columns: repeat(3, 1fr) !important;
}
/* === END PHASE 25 === */
/* ============================================================
PHASE 26 — TWO WORLDS: one product, two flows
Individual (yellow+turquoise) ⇄ Business (pine+yellow),
bridged by the Explorer = Candidate (shared yellow).
============================================================ */
html body .section-twoworlds { position: relative; }
.tw-eyebrow { color: var(--bridge); font-weight: 800; letter-spacing: 0.14em; }
.tw-lede {
max-width: 640px; margin: 14px auto 0; text-align: center;
color: var(--ink-2); font-size: 16px; line-height: 1.55;
}
.tw-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: stretch;
gap: 0;
margin: 46px auto 0;
max-width: 1060px;
}
/* --- Flow panels --- */
.tw-panel {
position: relative;
display: flex; flex-direction: column;
padding: 30px 28px;
border-radius: 24px;
background:
linear-gradient(180deg, var(--flow-soft) 0%, transparent 62%),
var(--glass);
border: 1px solid var(--flow-line, var(--line));
border-top-width: 4px;
border-top-color: var(--flow-base);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.tw-panel-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tw-flow {
font-family: 'Instrument Serif', serif; font-style: italic;
font-size: 32px; line-height: 1;
background: var(--flow-grad);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.tw-flow-sub {
font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
font-weight: 700; color: var(--flow-base);
}
.tw-panel-line { margin: 12px 0 22px; color: var(--ink-2); font-size: 15px; }
.tw-roles { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.tw-role {
display: flex; gap: 12px; align-items: flex-start;
padding: 14px 16px; border-radius: 16px;
background: color-mix(in srgb, var(--ink) 4%, transparent);
border: 1px solid var(--line);
}
.tw-role-dot {
flex: 0 0 auto; width: 12px; height: 12px; margin-top: 4px;
border-radius: 50%; background: var(--flow-grad);
}
.tw-role b { display: block; font-size: 15px; color: var(--ink); }
.tw-role span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
/* the two bridge rows (Explorer / Candidate) glow in the shared yellow */
.tw-role--bridge {
border-color: color-mix(in srgb, var(--bridge) 55%, transparent);
background: color-mix(in srgb, var(--bridge) 11%, transparent);
}
.tw-role--bridge .tw-role-dot {
background: var(--bridge);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--bridge) 22%, transparent);
}
.tw-cta {
margin-top: auto; align-self: flex-start;
display: inline-flex; align-items: center; gap: 8px;
padding: 11px 20px; border-radius: 999px;
font-weight: 700; font-size: 14px; color: #0B2A2A; text-decoration: none;
background: var(--flow-grad);
box-shadow: 0 8px 18px -8px var(--flow-shadow);
transition: transform .2s, box-shadow .2s;
}
.tw-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -10px var(--flow-shadow); }
.tw-cta span { transition: transform .2s; }
.tw-cta:hover span { transform: translateX(4px); }
/* --- The bridge column --- */
.tw-bridge {
position: relative;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 12px; padding: 0 20px; min-width: 132px;
}
.tw-bridge-line {
position: absolute; top: 50%; left: 4px; right: 4px; height: 3px; transform: translateY(-50%);
background: linear-gradient(90deg, var(--ind-base), var(--bridge) 50%, var(--biz-base));
border-radius: 3px;
}
.tw-bridge-badge {
position: relative; z-index: 1;
padding: 8px 16px; border-radius: 999px;
background: var(--bridge); color: #0B2A2A;
font-weight: 800; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
box-shadow: 0 8px 18px -6px rgba(234,193,5,0.7);
}
.tw-bridge-note {
position: relative; z-index: 1;
max-width: 132px; text-align: center;
font-size: 11.5px; line-height: 1.4; color: var(--ink-3);
}
.tw-bridge-note em { font-style: normal; font-weight: 700; color: var(--ink-2); }
/* --- Mobile: stack panels, bridge becomes a vertical connector --- */
@media (max-width: 860px) {
.tw-grid { grid-template-columns: 1fr; max-width: 480px; gap: 0; }
.tw-bridge { flex-direction: row; gap: 12px; padding: 18px 0; min-height: 0; }
.tw-bridge-line {
top: 4px; bottom: 4px; left: 50%; right: auto; height: auto; width: 3px;
transform: translateX(-50%);
background: linear-gradient(180deg, var(--ind-base), var(--bridge) 50%, var(--biz-base));
}
.tw-bridge-note { max-width: 200px; text-align: left; }
}
/* === END PHASE 26 === */
/* ============================================================
PHASE 27 — NAV: "Explore more" dropdown
Desktop: hover / focus-within / JS .is-open opens a glass panel.
Mobile (drawer): trigger toggles an inline expanding list.
============================================================ */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dd-trigger {
display: inline-flex; align-items: center; gap: 5px;
border: 0; background: transparent; cursor: pointer;
font-family: inherit;
/* inherit .nav-link sizing/colour (it also carries the .nav-link class) */
}
.nav-dd-chev { transition: transform .25s ease; opacity: .8; }
.nav-dropdown.is-open > .nav-dd-trigger .nav-dd-chev,
.nav-dropdown:hover > .nav-dd-trigger .nav-dd-chev { transform: rotate(180deg); }
.nav-dd-menu {
position: absolute;
top: calc(100% + 10px); right: 0;
min-width: 220px;
display: flex; flex-direction: column;
padding: 8px;
background: var(--nav-bg, var(--glass));
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: 0 24px 50px -18px rgba(0,0,0,0.45);
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .2s ease, transform .2s ease, visibility .2s;
z-index: 40;
}
.nav-dropdown:hover > .nav-dd-menu,
.nav-dropdown:focus-within > .nav-dd-menu,
.nav-dropdown.is-open > .nav-dd-menu {
opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dd-item {
padding: 10px 14px; border-radius: 12px;
font-size: 13.5px; font-weight: 500; color: var(--ink-2);
text-decoration: none; white-space: nowrap;
transition: color .2s, background .2s;
}
.nav-dd-item:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav-dd-item.active { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--bridge, #EAC105) 14%, transparent); }
/* Mobile drawer: dropdown becomes an inline expanding group */
@media (max-width: 980px) {
.nav .nav-links .nav-dropdown { display: flex; flex-direction: column; align-items: stretch; }
.nav.is-open .nav-links .nav-dd-trigger {
padding: 14px 18px; font-size: 15px; border-radius: 18px;
text-align: left; justify-content: space-between; width: 100%;
}
.nav .nav-links .nav-dd-menu {
position: static; min-width: 0; right: auto;
opacity: 1; visibility: visible; transform: none;
background: transparent; border: 0; box-shadow: none;
backdrop-filter: none; -webkit-backdrop-filter: none;
padding: 2px 0 6px 12px;
display: none;
}
.nav .nav-links .nav-dropdown.is-open > .nav-dd-menu { display: flex; }
/* hover must NOT open it on touch drawers — only .is-open does */
.nav .nav-links .nav-dropdown:hover > .nav-dd-menu { display: none; }
.nav .nav-links .nav-dropdown.is-open:hover > .nav-dd-menu { display: flex; }
.nav.is-open .nav-links .nav-dd-item { padding: 12px 16px; font-size: 14.5px; }
}
/* === END PHASE 27 === */
/* ============================================================
PHASE 28 — HOMEPAGE RESTRUCTURE (spec). Section CSS, token-only.
============================================================ */
/* ---------- home-globals ---------- */
/* ============================================================
S0 GLOBALS — prefix .gx-
Sticky CTA + Language toggle. Semantic tokens only.
============================================================ */
/* The wrapper section is a logical container only — it must not occupy
layout space or capture clicks; its children are positioned/placed. */
.gx-section {
padding: 0;
margin: 0;
background: none;
}
/* ---------- (A) Sticky CTA ---------------------------------- */
.gx-sticky {
position: fixed;
right: clamp(16px, 3vw, 32px);
bottom: clamp(16px, 3vw, 32px);
z-index: 80;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
border-radius: 999px;
border: 1px solid var(--accent-1-deep);
font: 600 0.95rem/1 inherit;
letter-spacing: 0.01em;
text-decoration: none;
white-space: nowrap;
color: var(--accent-1-ink);
background-image: var(--accent-grad);
box-shadow: 0 14px 34px var(--accent-shadow);
/* Hidden until past hero: start off-screen + non-interactive. */
opacity: 0;
transform: translateY(140%) scale(0.96);
pointer-events: none;
transition: opacity .42s cubic-bezier(.2,.7,.2,1),
transform .42s cubic-bezier(.2,.7,.2,1),
box-shadow .3s ease,
background-image .3s ease;
}
.gx-sticky.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.gx-sticky:hover,
.gx-sticky:focus-visible {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 20px 44px var(--accent-shadow);
}
.gx-sticky:focus-visible {
outline: 3px solid var(--accent-2);
outline-offset: 3px;
}
.gx-sticky:active { transform: translateY(0) scale(0.99); }
/* Tiny breathing spark — the connective-thread dot. */
.gx-sticky-spark {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--accent-1-ink);
box-shadow: 0 0 0 0 currentColor;
animation: gxSpark 2.4s ease-in-out infinite;
}
.gx-sticky-label { display: inline-block; }
.gx-sticky-arrow {
flex: none;
transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.gx-sticky:hover .gx-sticky-arrow,
.gx-sticky:focus-visible .gx-sticky-arrow { transform: translateX(3px); }
@keyframes gxSpark {
0%, 100% { transform: scale(1); opacity: .9; }
50% { transform: scale(1.5); opacity: .45; }
}
/* ---------- (B) Language toggle ----------------------------- */
.gx-lang {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 4px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--glass);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.gx-lang-btn {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
border: 0;
margin: 0;
padding: 6px 12px;
min-width: 38px;
border-radius: 999px;
font: 700 0.78rem/1 inherit;
letter-spacing: 0.06em;
color: var(--ink-3);
background: transparent;
transition: color .2s ease, background-color .2s ease, transform .15s ease;
}
.gx-lang-btn:hover { color: var(--ink); }
.gx-lang-btn.is-active {
color: var(--accent-1-ink);
background-image: var(--accent-grad);
box-shadow: 0 2px 8px var(--accent-shadow);
}
.gx-lang-btn:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 2px;
}
.gx-lang-btn:active { transform: scale(0.94); }
.gx-lang-sep {
width: 1px;
height: 14px;
background: var(--line);
}
/* ---------- Responsive (<=760px) --------------------------- */
@media (max-width: 760px) {
.gx-sticky {
right: 14px;
bottom: 14px;
padding: 13px 18px;
font-size: 0.9rem;
}
/* On narrow screens the label alone carries the action — drop the arrow
so the pill stays compact and fits within a 360px viewport. */
.gx-sticky-arrow { display: none; }
.gx-lang-btn {
padding: 6px 10px;
min-width: 34px;
font-size: 0.74rem;
}
}
/* ---------- Reduced motion --------------------------------- */
@media (prefers-reduced-motion: reduce) {
.gx-sticky {
transition: opacity .2s linear;
transform: none;
}
.gx-sticky.is-visible { transform: none; }
.gx-sticky:hover,
.gx-sticky:focus-visible { transform: none; }
.gx-sticky-spark { animation: none; }
.gx-sticky-arrow,
.gx-lang-btn { transition: none; }
}
/* ---------- hero ---------- */
.shero-section{ position:relative; overflow:hidden; isolation:isolate;
padding: clamp(44px,7vh,104px) 0 clamp(52px,8vh,116px); }
.shero-aura{ position:absolute; inset:-12% -10% 0; z-index:-1; pointer-events:none;
background:
radial-gradient(40% 50% at 20% 24%, var(--accent-1-soft) 0%, transparent 70%),
radial-gradient(42% 52% at 82% 22%, var(--accent-2-soft) 0%, transparent 72%),
radial-gradient(64% 56% at 50% 104%, var(--accent-1-soft) 0%, transparent 76%);
transition: background .6s ease; }
.shero-inner{ display:flex; flex-direction:column; align-items:center; text-align:center;
gap:18px; max-width:880px; }
.shero-kicker{ font-size:12px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
color:var(--accent-1-deep); transition:color .4s ease; }
.shero-headline{ margin:0; line-height:.98; }
.shero-h1{ display:block; font-size:clamp(40px,7.2vw,90px); font-weight:800;
letter-spacing:-.03em; color:var(--ink); }
.shero-h2{ display:block; margin-top:.14em; font-size:clamp(21px,3.4vw,38px); font-weight:800;
letter-spacing:-.01em; color:var(--accent-1-deep); transition:color .4s ease; }
.shero-sub{ margin:2px 0 0; min-height:1.5em; max-width:600px; }
.shero-sub-line{ font-size:clamp(15px,1.6vw,19px); color:var(--ink-2); line-height:1.5; }
/* mode-gated bits (scoped to hero so it can't affect other sections) */
[data-mode="individual"] .shero-section [data-mode-show="business"],
[data-mode="business"] .shero-section [data-mode-show="individual"]{ display:none; }
/* segmented switch — clear, no drag */
.shero-switch{ position:relative; display:inline-grid; grid-template-columns:1fr 1fr; gap:0;
padding:5px; margin-top:4px; min-width:320px; border-radius:999px;
background:var(--glass); border:1px solid var(--line);
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.shero-switch-thumb{ position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px);
border-radius:999px; background:var(--accent-1); box-shadow:0 6px 18px -6px var(--accent-shadow);
transition:transform .38s cubic-bezier(.4,0,.2,1), background .4s ease; z-index:0; }
[data-mode="individual"] .shero-switch-thumb{ transform:translateX(100%); }
.shero-switch-btn{ position:relative; z-index:1; appearance:none; border:0; background:transparent;
cursor:pointer; padding:11px 22px; border-radius:999px; font-family:inherit; font-size:14.5px;
font-weight:700; color:var(--ink-2); transition:color .3s ease; white-space:nowrap; }
.shero-switch-btn.is-active{ color:var(--accent-1-ink); }
/* morph proof card (both stacked; crossfade by mode) */
.shero-stage{ position:relative; width:100%; max-width:460px; min-height:198px; margin-top:8px; }
.shero-card{ position:absolute; left:0; right:0; top:0; margin:0 auto; max-width:460px; text-align:left;
padding:20px 22px; border-radius:22px; background:var(--glass); border:1px solid var(--line);
backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
box-shadow:0 24px 60px -28px rgba(0,0,0,.4);
opacity:0; visibility:hidden; transform:translateY(10px) scale(.96);
transition:opacity .5s ease, transform .5s cubic-bezier(.4,0,.2,1), visibility .5s; }
[data-mode="individual"] .shero-card--ind,
[data-mode="business"] .shero-card--biz{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.shero-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.shero-card-kicker{ font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.shero-card-badge{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800;
letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:999px; }
.shero-card-badge i{ width:6px; height:6px; border-radius:50%; }
.shero-card-badge--match{ background:var(--accent-2-soft); color:var(--accent-2-deep); }
.shero-card-badge--match i{ background:var(--accent-2); }
.shero-card-badge--live{ background:color-mix(in srgb, var(--role-company) 16%, transparent); color:var(--role-company); }
.shero-card-badge--live i{ background:var(--role-company); animation:shero-pulse 2s ease-out infinite; }
.shero-card-body{ display:flex; align-items:center; gap:14px; }
.shero-card-avatar,.shero-card-date{ flex:0 0 auto; width:50px; height:50px; border-radius:14px;
display:grid; place-items:center; align-content:center; background:var(--accent-grad); }
.shero-card-avatar{ font-weight:800; font-size:16px; color:var(--accent-1-ink); }
.shero-card-date{ color:#fff; }
.shero-card-date b{ font-size:20px; line-height:1; }
.shero-card-date i{ font-style:normal; font-size:10px; text-transform:uppercase; letter-spacing:.08em; opacity:.9; }
.shero-card-title{ font-size:17px; font-weight:700; color:var(--ink); }
.shero-card-host{ font-size:12.5px; color:var(--ink-3); margin-top:2px; }
.shero-card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:16px;
padding-top:14px; border-top:1px solid var(--line); }
.shero-card-meta{ font-size:12.5px; color:var(--ink-2); }
.shero-card-cta{ font-size:12.5px; font-weight:800; padding:8px 16px; border-radius:999px;
background:var(--accent-1); color:var(--accent-1-ink); }
/* actions */
.shero-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:14px; }
.shero-cta{ display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:999px;
font-weight:700; font-size:15px; text-decoration:none; background:var(--accent-grad);
color:var(--accent-1-ink); box-shadow:0 12px 28px -12px var(--accent-shadow);
transition:transform .2s, box-shadow .2s; }
.shero-cta:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -14px var(--accent-shadow); }
.shero-cta-ghost{ display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:999px;
font-weight:700; font-size:15px; text-decoration:none; color:var(--ink); background:transparent;
border:1px solid var(--line); transition:border-color .2s, background .2s; }
.shero-cta-ghost:hover{ border-color:var(--accent-2); background:var(--accent-2-soft); }
.shero-switch-btn:focus-visible,.shero-cta:focus-visible,.shero-cta-ghost:focus-visible{
outline:2px solid var(--accent-2); outline-offset:3px; }
@keyframes shero-pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--role-company) 55%, transparent); }
70%{ box-shadow:0 0 0 7px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
@media (max-width:760px){
.shero-h1{ font-size:clamp(34px,11vw,52px); }
.shero-switch{ min-width:0; width:100%; max-width:360px; }
.shero-stage,.shero-card{ max-width:100%; }
}
@media (prefers-reduced-motion: reduce){
.shero-card,.shero-switch-thumb,.shero-aura,.shero-cta{ transition:none; }
.shero-card-badge--live i{ animation:none; }
}
/* ---------- paths ---------- */
/* ============================================================
S2 — PathSelector (prefix: .paths-)
3 role-colored persona cards → window.Home.setPersona()
============================================================ */
.paths-section {
position: relative;
overflow: hidden;
padding-block: clamp(64px, 9vw, 120px);
background: var(--bg-1);
}
.paths-section .container { position: relative; z-index: 1; }
/* Ambient background orbs (purely decorative) */
.paths-orb {
position: absolute;
width: 46vw;
max-width: 560px;
aspect-ratio: 1;
border-radius: 50%;
filter: blur(90px);
opacity: 0.4;
pointer-events: none;
z-index: 0;
}
.paths-orb--a {
top: -14%;
left: -10%;
background: radial-gradient(circle, var(--accent-1) 0%, transparent 70%);
}
.paths-orb--b {
bottom: -18%;
right: -12%;
background: radial-gradient(circle, var(--accent-2) 0%, transparent 70%);
}
/* Heading */
.paths-head {
text-align: center;
max-width: 720px;
margin: 0 auto clamp(36px, 5vw, 64px);
}
.paths-eyebrow {
margin: 0 0 14px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-2-deep);
}
.paths-title { margin: 0 0 16px; }
.paths-lede {
margin: 0;
font-size: clamp(15px, 1.5vw, 18px);
line-height: 1.6;
color: var(--ink-2);
}
/* Grid */
.paths-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 2vw, 26px);
align-items: stretch;
}
/* ---- Card base ---- */
.paths-card {
--paths-c: var(--role-explorer); /* role color, overridden per variant */
--paths-c-ink: var(--role-explorer-ink);
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
padding: clamp(22px, 2.4vw, 32px);
border-radius: 22px;
background: var(--bg-0);
border: 1.5px solid var(--line);
cursor: pointer;
isolation: isolate;
overflow: hidden;
text-align: left;
transition:
transform 0.45s cubic-bezier(.2,.8,.2,1),
border-color 0.35s ease,
box-shadow 0.45s cubic-bezier(.2,.8,.2,1);
}
.paths-card::before {
/* thin role accent rail on the left edge */
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: var(--paths-c);
opacity: 0.85;
transition: width 0.4s cubic-bezier(.2,.8,.2,1);
}
.paths-card-glow {
position: absolute;
inset: -40% -40% auto auto;
width: 60%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, var(--paths-c) 0%, transparent 68%);
opacity: 0;
z-index: -1;
transition: opacity 0.5s ease;
pointer-events: none;
}
.paths-card--explorer { --paths-c: var(--role-explorer); --paths-c-ink: var(--role-explorer-ink); }
.paths-card--exminder { --paths-c: var(--role-exminder); --paths-c-ink: var(--role-exminder-ink); }
.paths-card--company { --paths-c: var(--role-company); --paths-c-ink: var(--role-company-ink); }
/* Hover / focus elevation */
.paths-card:hover,
.paths-card:focus-visible {
transform: translateY(-6px);
border-color: color-mix(in srgb, var(--paths-c) 55%, transparent);
box-shadow: 0 22px 48px -22px color-mix(in srgb, var(--paths-c) 70%, transparent);
outline: none;
}
.paths-card:hover::before,
.paths-card:focus-visible::before { width: 7px; }
.paths-card:hover .paths-card-glow,
.paths-card:focus-visible .paths-card-glow { opacity: 0.16; }
.paths-card:focus-visible {
box-shadow:
0 0 0 3px var(--bg-0),
0 0 0 5.5px var(--paths-c),
0 22px 48px -22px color-mix(in srgb, var(--paths-c) 70%, transparent);
}
.paths-card:active { transform: translateY(-2px); }
/* Top row: badge + icon */
.paths-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.paths-badge {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
background: var(--paths-c);
color: var(--paths-c-ink);
}
.paths-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
flex: none;
border-radius: 12px;
background: color-mix(in srgb, var(--paths-c) 14%, transparent);
color: var(--paths-c);
transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.paths-card:hover .paths-icon,
.paths-card:focus-visible .paths-icon { transform: scale(1.08) rotate(-4deg); }
/* Text */
.paths-card-title {
margin: 4px 0 0;
font-size: clamp(18px, 1.9vw, 22px);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--ink);
}
.paths-card-desc {
margin: 0;
font-size: 14.5px;
line-height: 1.6;
color: var(--ink-2);
flex: 1 1 auto;
}
.paths-tagline {
display: inline-block;
align-self: flex-start;
font-size: 13px;
font-weight: 700;
font-style: italic;
letter-spacing: 0.01em;
color: var(--paths-c);
}
.paths-card--exminder .paths-tagline { color: var(--accent-1-deep); }
/* CTA row */
.paths-card-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
font-size: 14px;
font-weight: 700;
color: var(--ink);
}
.paths-arrow { transition: transform 0.4s cubic-bezier(.2,.8,.2,1); }
.paths-card:hover .paths-arrow,
.paths-card:focus-visible .paths-arrow { transform: translateX(5px); }
/* Selected state */
.paths-check {
position: absolute;
top: 16px;
right: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--paths-c);
color: var(--paths-c-ink);
opacity: 0;
transform: scale(0.4);
transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.2,.8,.2,1);
pointer-events: none;
}
.paths-card.is-selected {
border-color: var(--paths-c);
background:
linear-gradient(135deg, color-mix(in srgb, var(--paths-c) 9%, transparent), transparent 60%),
var(--bg-0);
box-shadow: 0 18px 44px -22px color-mix(in srgb, var(--paths-c) 75%, transparent);
}
.paths-card.is-selected::before { width: 7px; }
.paths-card.is-selected .paths-card-glow { opacity: 0.14; }
.paths-card.is-selected .paths-check {
opacity: 1;
transform: scale(1);
}
.paths-card.is-selected .paths-icon {
/* hide the top-right icon space cue once the check shows */
background: color-mix(in srgb, var(--paths-c) 20%, transparent);
}
/* ---- Responsive ---- */
@media (max-width: 760px) {
.paths-grid { grid-template-columns: 1fr; gap: 14px; }
.paths-card { padding: 22px; }
.paths-card-title { font-size: 19px; }
.paths-orb { filter: blur(70px); opacity: 0.3; }
}
@media (max-width: 360px) {
.paths-card { padding: 18px; border-radius: 18px; }
}
/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
.paths-card,
.paths-card::before,
.paths-card-glow,
.paths-icon,
.paths-arrow,
.paths-check { transition: none; }
.paths-card:hover,
.paths-card:focus-visible { transform: none; }
.paths-card:hover .paths-icon,
.paths-card:focus-visible .paths-icon { transform: none; }
}
/* ---------- roles ---------- */
/* ====================================================================
S3 — Roles + FlowBridge (prefix .roles-)
Uses ONLY semantic tokens. Role cards intentionally hardcode their
role token (Exminder=sunflower, Explorer=lagoon, Company=pine).
==================================================================== */
.roles-section { position: relative; overflow: hidden; }
.roles-head { max-width: 720px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; }
.roles-eyebrow {
display: inline-block; margin: 0 0 14px;
font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--accent-2-deep);
}
.roles-title {
margin: 0 0 16px; line-height: 1.06;
font-size: clamp(1.9rem, 4.6vw, 3.1rem); font-weight: 800; letter-spacing: -0.02em;
color: var(--ink);
}
.roles-title-hl {
background: var(--accent-grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.roles-lede {
margin: 0 auto; max-width: 600px;
font-size: clamp(1rem, 1.6vw, 1.18rem); line-height: 1.6; color: var(--ink-2);
}
/* ---- Stage holds the SVG bridge + the card grid ---- */
.roles-stage { position: relative; }
.roles-bridge {
position: absolute; left: 0; right: 0; top: clamp(-18px, -1vw, -8px);
width: 100%; height: clamp(110px, 14vw, 170px);
z-index: 0; pointer-events: none;
overflow: visible;
}
.roles-arc {
stroke-width: 3;
stroke-linecap: round;
filter: drop-shadow(0 4px 14px var(--accent-shadow));
/* dash-draw: length set generously; reduced-motion shows it fully drawn */
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: rolesDraw 2s cubic-bezier(.4,0,.2,1) forwards;
opacity: 0.5;
transition: opacity .45s ease, stroke-width .45s ease;
}
.roles-arc--biz { animation-delay: .35s; }
@keyframes rolesDraw {
to { stroke-dashoffset: 0; }
}
/* ---- Card grid ---- */
.roles-grid {
position: relative; z-index: 1;
list-style: none; margin: 0; padding: 0;
display: grid; gap: clamp(18px, 2.4vw, 28px);
grid-template-columns: 1fr 1.12fr 1fr;
align-items: stretch;
}
.roles-card {
position: relative;
display: flex; flex-direction: column;
padding: clamp(24px, 2.6vw, 34px);
border-radius: var(--radius-sm, 24px);
background: var(--bg-1);
border: 1px solid var(--line);
box-shadow: 0 18px 48px color-mix(in srgb, var(--ink) 6%, transparent);
transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.roles-card:hover { transform: translateY(-6px); }
/* role accent: a top rule + soft tint, driven by a per-card --rc var */
.roles-card::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
border-radius: var(--radius-sm, 24px) var(--radius-sm, 24px) 0 0;
background: var(--rc, var(--accent-2));
}
.roles-card--exminder { --rc: var(--role-exminder); --rc-ink: var(--role-exminder-ink); }
.roles-card--explorer { --rc: var(--role-explorer); --rc-ink: var(--role-explorer-ink); }
.roles-card--company { --rc: var(--role-company); --rc-ink: var(--role-company-ink); }
.roles-card--exminder:hover { border-color: color-mix(in srgb, var(--role-exminder) 55%, var(--line)); }
.roles-card--company:hover { border-color: color-mix(in srgb, var(--role-company) 55%, var(--line)); }
/* flow tag chip */
.roles-flowtag {
align-self: flex-start;
font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
padding: 5px 12px; border-radius: 999px; margin-bottom: 18px;
}
.roles-flowtag--ind { background: color-mix(in srgb, var(--role-exminder) 22%, transparent); color: var(--ink); }
.roles-flowtag--bridge { background: var(--role-explorer); color: var(--role-explorer-ink); }
.roles-flowtag--biz { background: color-mix(in srgb, var(--role-company) 20%, transparent); color: var(--ink); }
/* role badge bubble */
.roles-badge {
display: grid; place-items: center;
width: 54px; height: 54px; border-radius: 16px; margin-bottom: 18px;
font-size: 0.92rem; font-weight: 800; letter-spacing: 0.04em;
background: var(--rc); color: var(--rc-ink);
box-shadow: 0 10px 26px color-mix(in srgb, var(--rc) 38%, transparent);
}
.roles-card-name {
margin: 0 0 10px; font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 800;
letter-spacing: -0.01em; color: var(--ink);
}
.roles-card-line {
margin: 0 0 18px; font-size: 1rem; line-height: 1.55; color: var(--ink-2);
flex: 1 1 auto;
}
.roles-card-tag {
margin: 0; font-style: italic; font-weight: 700; font-size: 0.95rem;
color: var(--rc);
}
/* ---- Explorer = the bridge, visually elevated ---- */
.roles-card--explorer.is-bridge {
background:
linear-gradient(180deg,
color-mix(in srgb, var(--role-explorer) 7%, var(--bg-1)),
var(--bg-1));
border-color: color-mix(in srgb, var(--role-explorer) 30%, var(--line));
box-shadow: 0 26px 64px var(--accent-shadow);
transform: translateY(-12px);
cursor: pointer; outline: none;
}
.roles-card--explorer.is-bridge:hover,
.roles-card--explorer.is-bridge:focus-visible,
.roles-card--explorer.is-bridge.is-active {
transform: translateY(-18px);
border-color: var(--role-explorer);
box-shadow: 0 34px 80px var(--accent-shadow);
}
.roles-card--explorer.is-bridge:focus-visible {
outline: 3px solid color-mix(in srgb, var(--role-explorer) 55%, transparent);
outline-offset: 4px;
}
.roles-bridge-hint {
display: block; margin-top: 14px;
font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em;
color: var(--ink-3);
}
/* When Explorer is active/hovered/focused, light up BOTH arcs (duality) */
.roles-stage.is-bridged .roles-arc {
opacity: 1;
stroke-width: 5;
}
/* Re-run the draw on activation so the duality feels alive */
.roles-stage.is-bridged .roles-arc--ind { animation: rolesPulseDraw 1.4s cubic-bezier(.4,0,.2,1); }
.roles-stage.is-bridged .roles-arc--biz { animation: rolesPulseDraw 1.4s cubic-bezier(.4,0,.2,1) .18s; }
@keyframes rolesPulseDraw {
0% { stroke-dashoffset: 1000; }
60% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 0; }
}
.roles-foot {
margin: clamp(36px, 5vw, 56px) auto 0; max-width: 640px; text-align: center;
font-size: clamp(0.98rem, 1.5vw, 1.1rem); line-height: 1.6; color: var(--ink-2);
}
.roles-foot b { color: var(--accent-2-deep); font-weight: 800; }
/* ---- Mobile: stack with a vertical bridge ---- */
@media (max-width: 760px) {
.roles-grid {
grid-template-columns: 1fr;
gap: 0;
position: relative;
padding-left: 30px;
}
/* vertical spine */
.roles-grid::before {
content: ""; position: absolute; left: 13px; top: 30px; bottom: 30px; width: 3px;
border-radius: 3px;
background: linear-gradient(180deg,
var(--role-exminder) 0%,
var(--role-explorer) 50%,
var(--role-company) 100%);
opacity: 0.5;
}
.roles-card { margin-bottom: 18px; }
.roles-card::after {
content: ""; position: absolute; left: -23px; top: 38px;
width: 13px; height: 13px; border-radius: 50%;
background: var(--rc); border: 3px solid var(--bg-0);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc) 35%, transparent);
}
.roles-card--explorer.is-bridge,
.roles-card:hover { transform: none; }
.roles-card--explorer.is-bridge:hover,
.roles-card--explorer.is-bridge:focus-visible,
.roles-card--explorer.is-bridge.is-active { transform: none; }
/* hide the horizontal SVG bridge on stacked layout */
.roles-bridge { display: none; }
.roles-bridge-hint { display: none; }
}
/* ---- Reduced motion: arcs render fully drawn, no draw/pulse ---- */
@media (prefers-reduced-motion: reduce) {
.roles-arc {
animation: none !important;
stroke-dashoffset: 0 !important;
opacity: 0.85;
}
.roles-stage.is-bridged .roles-arc { animation: none !important; stroke-width: 4; }
.roles-card,
.roles-card--explorer.is-bridge:hover,
.roles-card--explorer.is-bridge:focus-visible { transition: none; }
}
/* ---------- why ---------- */
.why-section{ position:relative; }
.why-head{ text-align:center; }
.why-tagline{ font-weight:800; color:var(--ink); margin-top:10px; }
.why-compare{ margin:40px auto 0; max-width:980px; position:relative; overflow:hidden;
background:var(--glass); border:1px solid var(--line); border-radius:28px;
padding:10px clamp(12px,2.4vw,24px) 18px;
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.why-cmp-head{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding:14px 8px 12px; }
.why-cmp-label{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.why-cmp-label--old{ text-align:right; color:var(--ink-3); }
.why-cmp-label--new{ text-align:left; color:var(--accent-1-deep); }
.why-cmp-vs{ width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line);
border-radius:50%; font-size:11px; font-weight:800; color:var(--ink-3); }
.why-grid{ list-style:none; margin:0; padding:0; position:relative; display:flex; flex-direction:column; gap:8px; }
.why-grid::before{ content:''; position:absolute; top:8px; bottom:8px; left:50%; width:2px; transform:translateX(-50%);
background:linear-gradient(180deg, var(--accent-2), var(--accent-1)); opacity:.45; border-radius:2px; }
.why-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(10px,2vw,22px);
padding:12px 10px; border-radius:18px; transition:background .25s; position:relative; }
.why-row:hover{ background:color-mix(in srgb, var(--ink) 4%, transparent); }
.why-cell{ display:flex; gap:11px; align-items:flex-start; min-width:0; }
.why-old{ flex-direction:row-reverse; text-align:right; }
.why-cell-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.why-cell-body b{ font-size:15px; line-height:1.25; }
.why-cell-body span{ font-size:12.5px; line-height:1.45; }
.why-old .why-cell-body b{ color:var(--ink-2); font-weight:600; }
.why-old .why-cell-body span{ color:var(--ink-3); }
.why-new .why-cell-body b{ color:var(--ink); font-weight:700; }
.why-new .why-cell-body span{ color:var(--ink-2); }
.why-mark{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
font-size:12px; font-weight:800; margin-top:1px; }
.why-x{ background:color-mix(in srgb, #c0463b 14%, transparent); color:#b23a30; }
.why-check{ background:var(--accent-2-soft); color:var(--accent-2-deep); }
.why-badge{ position:relative; z-index:1; flex:0 0 auto; width:34px; height:34px; border-radius:50%;
display:grid; place-items:center; font-weight:800; font-size:14px; color:#fff;
background:var(--accent-grad); box-shadow:0 6px 16px -6px var(--accent-shadow); }
.why-badge--win{ background:var(--color-sunflower); color:#1a1505; }
.why-row--win{ background:var(--accent-1-soft); }
.why-row--win .why-new .why-cell-body b{ color:var(--accent-1-deep); }
.why-grid > li{ opacity:0; transform:translateY(12px); }
.why-grid > li.is-in{ opacity:1; transform:none;
transition:opacity .5s ease, transform .5s ease; transition-delay:calc(var(--stagger-i,0)*70ms); }
@media (max-width:760px){
.why-cmp-head{ display:none; }
.why-grid::before{ display:none; }
.why-grid{ gap:16px; }
.why-row{ grid-template-columns:1fr; gap:0; padding:0; background:transparent !important; }
.why-cell{ padding:12px 14px; border-radius:16px; border:1px solid var(--line); }
.why-old{ flex-direction:row; text-align:left; background:color-mix(in srgb, var(--ink) 3%, transparent); }
.why-badge{ margin:8px auto; }
.why-new{ background:var(--accent-1-soft); border-color:color-mix(in srgb, var(--accent-1) 28%, transparent); }
}
@media (prefers-reduced-motion: reduce){ .why-grid > li{ opacity:1; transform:none; } }
/* ---------- reels ---------- */
/* =========================================================
S5 — Reels carousel (prefix: .reels-)
========================================================= */
.reels-section { position: relative; overflow: hidden; }
.reels-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.reels-eyebrow {
display: inline-block; font-size: .82rem; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--accent-1-deep); margin-bottom: 14px;
}
.reels-title {
font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.06;
font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 18px;
}
.reels-title span { display: block; }
.reels-title-grad {
background: var(--accent-grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.reels-lede {
font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.6;
color: var(--ink-2); margin: 0 auto;
}
/* ---- Toolbar: toggle + nav arrows ---- */
.reels-toolbar {
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: 18px; margin-top: 30px;
}
.reels-toggle {
position: relative; display: inline-flex; padding: 5px;
border-radius: 999px; background: var(--glass); border: 1px solid var(--line);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.reels-toggle-btn {
position: relative; z-index: 2; appearance: none; border: 0; background: transparent;
cursor: pointer; font: inherit; font-size: .92rem; font-weight: 600;
color: var(--ink-2); padding: 10px 20px; border-radius: 999px;
white-space: nowrap; transition: color .25s ease;
}
.reels-toggle-btn:hover { color: var(--ink); }
.reels-toggle-btn.is-active { color: var(--accent-1-ink); }
.reels-toggle-btn:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.reels-toggle-pill {
position: absolute; z-index: 1; top: 5px; left: 5px;
height: calc(100% - 10px); width: 50%; border-radius: 999px;
background: var(--accent-grad); box-shadow: 0 8px 24px var(--accent-shadow);
transition: transform .32s cubic-bezier(.22,1,.36,1); will-change: transform;
}
.reels-toggle[data-active="exminder"] .reels-toggle-pill { transform: translateX(100%); }
.reels-nav { display: inline-flex; gap: 10px; }
.reels-arrow {
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px; border-radius: 999px;
border: 1px solid var(--line); background: var(--glass-strong);
color: var(--ink); cursor: pointer;
transition: transform .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.reels-arrow:hover { transform: translateY(-2px); border-color: var(--accent-1); background: var(--accent-1-soft); }
.reels-arrow:active { transform: translateY(0); }
.reels-arrow:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.reels-arrow[disabled] { opacity: .35; cursor: default; pointer-events: none; }
/* ---- Viewport + track ---- */
.reels-viewport { position: relative; }
.reels-track {
list-style: none; margin: 0; padding: 6px 4px 22px;
display: flex; gap: 22px; overflow-x: auto;
scroll-snap-type: x mandatory; scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin; scrollbar-color: var(--accent-1) transparent;
}
.reels-track:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 4px; border-radius: 12px; }
.reels-track::-webkit-scrollbar { height: 8px; }
.reels-track::-webkit-scrollbar-thumb { background: var(--accent-1-soft); border-radius: 999px; }
.reels-track::-webkit-scrollbar-track { background: transparent; }
/* ---- Reel card (9:16) ---- */
.reels-card {
scroll-snap-align: center; flex: 0 0 auto;
width: min(76vw, 280px); aspect-ratio: 9 / 16;
position: relative; border-radius: 24px; overflow: hidden;
border: 1px solid var(--line); background: var(--bg-2);
box-shadow: 0 18px 48px rgba(0,0,0,0.14); isolation: isolate;
transition: transform .3s ease, box-shadow .3s ease;
}
.reels-card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(0,0,0,0.2); }
.reels-card-media { position: absolute; inset: 0; z-index: 0; }
.reels-card-img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 6s ease;
}
.reels-card.is-playing .reels-card-img { transform: scale(1.06); }
.reels-card-media::after {
content: ""; position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 28%),
linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 46%);
}
/* Play affordance overlay */
.reels-play {
position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
appearance: none; border: 0; margin: 0; padding: 0;
background: transparent; cursor: pointer; color: #fff;
}
.reels-play:focus-visible { outline: 3px solid var(--accent-2); outline-offset: -6px; border-radius: 24px; }
.reels-play-disc {
width: 64px; height: 64px; border-radius: 999px;
display: grid; place-items: center;
background: rgba(255,255,255,0.18); border: 1.5px solid rgba(255,255,255,0.6);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
transition: transform .25s ease, background .25s ease, opacity .25s ease;
}
.reels-play:hover .reels-play-disc { transform: scale(1.08); background: rgba(255,255,255,0.28); }
.reels-card.is-playing .reels-play-disc { opacity: 0; transform: scale(.6); }
.reels-play-icon-play { display: block; }
.reels-play-icon-pause { display: none; }
.reels-card.is-playing .reels-play-icon-play { display: none; }
/* "Now playing" flag */
.reels-playing-flag {
position: absolute; top: 14px; right: 14px; z-index: 4; display: none;
align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px;
background: rgba(0,0,0,0.5);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
}
.reels-card.is-playing .reels-playing-flag { display: inline-flex; }
.reels-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.reels-eq span {
width: 3px; background: var(--accent-1); border-radius: 2px;
animation: reels-eq 0.9s ease-in-out infinite;
}
.reels-eq span:nth-child(1) { height: 40%; animation-delay: 0s; }
.reels-eq span:nth-child(2) { height: 100%; animation-delay: .18s; }
.reels-eq span:nth-child(3) { height: 60%; animation-delay: .36s; }
@keyframes reels-eq {
0%, 100% { transform: scaleY(.4); }
50% { transform: scaleY(1); }
}
/* Role badge (mode-independent role colors) */
.reels-badge {
position: absolute; top: 14px; left: 14px; z-index: 4;
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 999px;
font-size: .72rem; font-weight: 700; letter-spacing: .04em;
box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.reels-badge[data-role="company"] { background: var(--role-company); color: var(--role-company-ink); }
.reels-badge[data-role="exminder"] { background: var(--role-exminder); color: var(--role-exminder-ink); }
.reels-badge-dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
/* Footer meta: avatar + name + location */
.reels-meta {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
display: flex; align-items: center; gap: 11px; padding: 16px; color: #fff;
}
.reels-avatar {
flex: 0 0 auto; width: 42px; height: 42px; border-radius: 999px;
display: grid; place-items: center; font-size: .85rem; font-weight: 800;
color: #fff; border: 2px solid rgba(255,255,255,0.85);
}
.reels-avatar[data-role="company"] { background: var(--role-company); }
.reels-avatar[data-role="exminder"] { background: var(--role-exminder); color: var(--role-exminder-ink); }
.reels-meta-text { min-width: 0; }
.reels-author {
display: block; font-size: .96rem; font-weight: 700; line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reels-role {
display: block; font-size: .8rem; line-height: 1.25; opacity: .92;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reels-loc {
display: inline-flex; align-items: center; gap: 4px;
font-size: .76rem; opacity: .85; margin-top: 2px;
}
.reels-loc svg { flex: 0 0 auto; }
/* Empty state */
.reels-empty { text-align: center; color: var(--ink-3); padding: 40px 0; margin: 0; }
/* Enter animation: cards stagger in (JS adds .reels-in) */
.reels-card { opacity: 0; transform: translateY(20px); }
.reels-card.reels-in {
opacity: 1; transform: translateY(0);
transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
transition-delay: calc(var(--reels-i, 0) * 70ms);
}
/* ---- Responsive ---- */
@media (max-width: 760px) {
.reels-head { margin-bottom: 28px; }
.reels-toolbar { gap: 14px; }
.reels-nav { order: 3; }
.reels-track {
gap: 16px;
padding-left: max(4px, calc((100vw - min(76vw, 280px)) / 2 - 14px));
padding-right: max(4px, calc((100vw - min(76vw, 280px)) / 2 - 14px));
}
.reels-card { width: min(80vw, 270px); }
}
@media (max-width: 380px) {
.reels-card { width: 84vw; }
}
/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
.reels-track { scroll-behavior: auto; }
.reels-card,
.reels-card.reels-in { opacity: 1; transform: none; transition: none; }
.reels-card-img,
.reels-card.is-playing .reels-card-img { transition: none; transform: none; }
.reels-toggle-pill { transition: none; }
.reels-eq span { animation: none; }
.reels-arrow:hover { transform: none; }
}
/* ---------- stats ---------- */
/* ============================================================
S6 — Stats band (prefix .stats-)
Clean horizontal band of three counters; stacks on mobile.
Uses ONLY semantic tokens so it recolors with data-mode.
============================================================ */
.stats-section {
padding: clamp(64px, 9vw, 120px) 0;
}
.stats-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.stats-band {
list-style: none;
margin: 0;
padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 44px);
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
gap: clamp(20px, 3vw, 40px);
border: 1px solid var(--line);
border-radius: 28px;
background: var(--glass);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
box-shadow: 0 18px 48px -28px var(--accent-shadow);
}
.stats-item {
position: relative;
text-align: center;
padding: 6px clamp(8px, 2vw, 24px);
}
/* Vertical separators between cells (desktop only) */
.stats-divider {
position: absolute;
left: calc(-1 * clamp(10px, 1.5vw, 20px));
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 64px;
background: linear-gradient(
to bottom,
transparent,
var(--line) 18%,
var(--line) 82%,
transparent
);
}
.stats-num {
margin: 0 0 8px;
line-height: 1;
}
.stats-figure {
display: inline-block;
font-weight: 800;
font-size: clamp(2.8rem, 6vw, 4.6rem);
letter-spacing: -0.03em;
color: var(--accent-1-deep);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.stats-label {
margin: 0 auto;
max-width: 22ch;
color: var(--ink-2);
font-size: clamp(0.92rem, 1.5vw, 1.05rem);
font-weight: 500;
line-height: 1.45;
}
/* ---- Responsive: stack vertically, swap dividers to horizontal ---- */
@media (max-width: 760px) {
.stats-band {
grid-template-columns: 1fr;
gap: 0;
padding: clamp(20px, 6vw, 32px) clamp(16px, 5vw, 28px);
border-radius: 22px;
}
.stats-item {
padding: clamp(20px, 6vw, 28px) 8px;
}
.stats-divider {
left: 50%;
top: 0;
transform: translateX(-50%);
width: 64px;
height: 1px;
background: linear-gradient(
to right,
transparent,
var(--line) 18%,
var(--line) 82%,
transparent
);
}
}
/* Reveal entrance handled by motion.js (data-reveal-stagger);
keep the painted state legible if JS is absent. */
@media (prefers-reduced-motion: reduce) {
.stats-band { box-shadow: none; }
}
/* ---------- map ---------- */
/* ============================================================
S7 — ExperienceMap (prefix .xmap-)
Interactive Leaflet map of Exminderi vs Companii across RO.
Semantic tokens only; recolors with [data-mode]. Role tokens
(--role-exminder / --role-company) are intentional for pins.
============================================================ */
.xmap-section { position: relative; }
.xmap-head { max-width: 820px; margin: 0 auto 48px; text-align: center; }
.xmap-lead {
color: var(--ink-2);
margin: 18px auto 0;
max-width: 620px;
font-size: clamp(15px, 1.6vw, 18px);
line-height: 1.6;
}
/* Shell wraps toolbar + map in a glass card so it reads as one object. */
.xmap-shell {
position: relative;
/* #91 — keep the shell centered inside .container and never wider than it,
so it can't drift/overflow on the left on any page that hosts the map. */
width: 100%;
max-width: 100%;
margin-inline: auto;
border: 1px solid var(--line);
border-radius: var(--radius, 36px);
background: var(--glass);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
padding: 16px;
box-shadow: 0 30px 80px -40px var(--accent-shadow);
overflow: hidden;
}
/* ---- Toolbar ---------------------------------------------------------- */
.xmap-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px 20px;
margin-bottom: 16px;
padding: 4px 6px;
}
.xmap-filters {
display: inline-flex;
gap: 6px;
padding: 5px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg-1);
}
.xmap-filter {
appearance: none;
border: 0;
cursor: pointer;
font: inherit;
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--ink-2);
background: transparent;
padding: 9px 18px;
border-radius: 999px;
line-height: 1;
transition: color .2s ease, background .25s ease, box-shadow .25s ease;
}
.xmap-filter:hover { color: var(--ink); }
.xmap-filter:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 2px;
}
.xmap-filter.is-active {
color: var(--accent-1-ink);
background: var(--accent-1);
box-shadow: 0 6px 18px -8px var(--accent-shadow);
}
/* ---- Legend ----------------------------------------------------------- */
.xmap-legend {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
margin: 0;
padding: 0;
list-style: none;
}
.xmap-legend-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--ink-2);
}
.xmap-legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
flex: none;
box-shadow: 0 0 0 3px var(--bg-0), 0 1px 4px rgba(0,0,0,0.25);
}
.xmap-dot--exminder { background: var(--role-exminder); }
.xmap-dot--company { background: var(--role-company); }
/* ---- Map canvas + fallback ------------------------------------------- */
.xmap-canvas {
position: relative;
border-radius: calc(var(--radius, 36px) - 16px);
overflow: hidden;
border: 1px solid var(--line);
background: var(--bg-2);
}
.xmap-leaflet {
width: 100%;
height: 480px;
background: var(--bg-2);
}
.xmap-leaflet:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: -2px;
}
/* Tone map tiles to the theme so they don't fight the brand surfaces. */
[data-theme="dark"] .xmap-leaflet :is(.leaflet-tile-pane) {
filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.95);
}
.xmap-fallback {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
text-align: center;
padding: 32px 28px;
background: var(--bg-1);
color: var(--ink-2);
}
.xmap-fallback[hidden] { display: none; }
.xmap-fallback-icon { color: var(--accent-2); opacity: 0.8; }
.xmap-fallback p { margin: 0; max-width: 380px; font-size: 15px; line-height: 1.55; }
/* ---- Custom Leaflet markers (divIcon) -------------------------------- */
.xmap-pin {
position: relative;
width: 26px;
height: 26px;
}
.xmap-pin-dot {
position: absolute;
inset: 5px;
border-radius: 50%;
box-shadow: 0 0 0 3px var(--bg-0), 0 3px 8px rgba(0,0,0,0.35);
}
.xmap-pin-halo {
position: absolute;
inset: 0;
border-radius: 50%;
opacity: 0.32;
animation: xmapHaloPulse 2.6s ease-out infinite;
}
.xmap-pin--exminder .xmap-pin-dot,
.xmap-pin--exminder .xmap-pin-halo { background: var(--role-exminder); }
.xmap-pin--company .xmap-pin-dot,
.xmap-pin--company .xmap-pin-halo { background: var(--role-company); }
/* "both" — city has exminders + companies under the All filter; split the dot. */
.xmap-pin--both .xmap-pin-dot {
background: linear-gradient(135deg, var(--role-exminder) 0 50%, var(--role-company) 50% 100%);
}
.xmap-pin--both .xmap-pin-halo { background: var(--role-exminder); }
/* Per-city count badge: small pill on the pin showing how many entities are at
that city under the active filter. Uses currentColor-friendly tokens so it
themes per page. */
.xmap-pin-count {
position: absolute;
top: -7px;
right: -7px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 999px;
background: var(--bg-0);
color: var(--ink);
border: 1.5px solid var(--line);
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
font-size: 10.5px;
font-weight: 800;
line-height: 14px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.xmap-pin--exminder .xmap-pin-count { border-color: var(--role-exminder); color: var(--role-exminder); }
.xmap-pin--company .xmap-pin-count { border-color: var(--role-company); color: var(--role-company); }
@keyframes xmapHaloPulse {
0% { transform: scale(0.7); opacity: 0.4; }
70% { transform: scale(1.9); opacity: 0; }
100% { transform: scale(1.9); opacity: 0; }
}
/* ---- Popup mini-card (themed Leaflet popup) -------------------------- */
.xmap-leaflet .leaflet-popup-content-wrapper {
background: var(--bg-0);
color: var(--ink);
border-radius: 16px;
border: 1px solid var(--line);
box-shadow: 0 18px 50px -20px rgba(0,0,0,0.4);
}
.xmap-leaflet .leaflet-popup-tip { background: var(--bg-0); border: 1px solid var(--line); }
.xmap-leaflet .leaflet-popup-content { margin: 0; }
.xmap-leaflet .leaflet-popup-close-button { color: var(--ink-3); }
.xmap-card { padding: 16px 18px 16px; min-width: 196px; }
.xmap-card-role {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
}
.xmap-card-role--exminder { background: var(--role-exminder); color: var(--role-exminder-ink); }
.xmap-card-role--company { background: var(--role-company); color: var(--role-company-ink); }
.xmap-card-name {
margin: 10px 0 2px;
font-size: 16px;
font-weight: 700;
color: var(--ink);
line-height: 1.25;
}
.xmap-card-city {
margin: 0 0 12px;
font-size: 13px;
color: var(--ink-3);
display: inline-flex;
align-items: center;
gap: 5px;
}
.xmap-card-cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13.5px;
font-weight: 600;
color: var(--accent-2-deep);
text-decoration: none;
transition: gap .2s ease;
}
.xmap-card-cta:hover { gap: 10px; }
.xmap-card-cta svg { transition: transform .2s ease; }
.xmap-card-cta:hover svg { transform: translateX(2px); }
/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 760px) {
.xmap-head { margin-bottom: 32px; }
.xmap-shell { padding: 10px; border-radius: 24px; }
.xmap-toolbar {
flex-direction: column;
align-items: stretch;
gap: 12px;
margin-bottom: 12px;
}
.xmap-filters { width: 100%; justify-content: space-between; }
.xmap-filter { flex: 1; padding: 10px 8px; text-align: center; }
.xmap-legend { justify-content: center; }
.xmap-leaflet { height: 60vh; min-height: 340px; }
.xmap-canvas { border-radius: 16px; }
}
@media (max-width: 360px) {
.xmap-filter { font-size: 12.5px; padding: 9px 4px; }
}
/* ---- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.xmap-pin-halo { animation: none; opacity: 0; }
.xmap-card-cta, .xmap-card-cta svg, .xmap-filter { transition: none; }
}
/* ---------- loop ---------- */
/* ===================================================================
S8 — Experience Loop (.loop-) circular timeline + mobile stepper
Uses ONLY semantic tokens; recolors with [data-mode] via --accent-*.
=================================================================== */
.loop-section {
position: relative;
overflow: hidden;
background: var(--bg-0);
}
.loop-orb {
position: absolute;
width: 30rem; height: 30rem;
border-radius: 50%;
filter: blur(70px);
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.loop-orb-a { top: -8rem; right: -6rem; background: var(--accent-2-soft); }
.loop-orb-b { bottom: -10rem; left: -8rem; background: var(--accent-1-soft); }
.loop-section .container { position: relative; z-index: 1; }
/* ---- head ---- */
.loop-head { text-align: center; max-width: 46rem; margin: 0 auto 3rem; }
.loop-eyebrow {
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 0.82rem;
color: var(--accent-2-deep);
margin: 0 0 0.6rem;
}
.loop-title {
font-size: clamp(1.9rem, 4.4vw, 3rem);
line-height: 1.08;
margin: 0 0 1rem;
color: var(--ink);
letter-spacing: -0.02em;
}
.loop-lead {
font-size: clamp(1rem, 1.6vw, 1.18rem);
line-height: 1.6;
color: var(--ink-2);
margin: 0;
}
/* ---- stage ---- */
.loop-stage { position: relative; }
/* ====================== DESKTOP CIRCLE ====================== */
.loop-circle {
position: relative;
width: min(40rem, 82vw);
aspect-ratio: 1 / 1;
margin: 0 auto;
}
.loop-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.loop-track {
stroke: var(--line);
stroke-width: 2;
}
.loop-progress {
stroke: url(#loopGrad);
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 100;
stroke-dashoffset: 100;
transform: rotate(-90deg);
transform-origin: 300px 300px;
transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1);
}
.loop-stage.is-in .loop-progress,
[data-reveal].is-in .loop-progress { stroke-dashoffset: 0; }
/* flowing arrow from node 6 back to node 1 — "every day" continuity */
.loop-flow {
stroke: var(--accent-2-deep);
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 7 9;
animation: loopFlowDash 1.1s linear infinite;
}
@keyframes loopFlowDash { to { stroke-dashoffset: -16; } }
/* ---- nodes ---- */
.loop-nodes { list-style: none; margin: 0; padding: 0; }
.loop-node {
position: absolute;
left: var(--nx);
top: var(--ny);
transform: translate(-50%, -50%);
}
.loop-dot {
--dot-c: var(--accent-2);
--dot-deep: var(--accent-2-deep);
--dot-soft: var(--accent-2-soft);
--dot-ink: var(--accent-2-ink);
position: relative;
display: grid;
place-items: center;
width: 4.2rem; height: 4.2rem;
border-radius: 50%;
border: 2px solid var(--dot-c);
background: var(--bg-1);
color: var(--dot-deep);
cursor: pointer;
font: inherit;
box-shadow: 0 6px 20px -8px var(--accent-shadow);
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s, color .35s, border-color .35s;
}
.loop-dot:hover { transform: scale(1.08); box-shadow: 0 12px 30px -10px var(--accent-shadow); }
.loop-dot:focus-visible {
outline: 3px solid var(--accent-2-deep);
outline-offset: 3px;
}
.loop-num { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.loop-dot-label {
position: absolute;
width: 9.5rem;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.25;
color: var(--ink);
text-align: center;
pointer-events: none;
}
/* label placement: outside the dot toward its quadrant */
.loop-node[data-node="1"] .loop-dot-label { bottom: calc(100% + 0.55rem); left: 50%; transform: translateX(-50%); }
.loop-node[data-node="4"] .loop-dot-label { top: calc(100% + 0.55rem); left: 50%; transform: translateX(-50%); }
.loop-node[data-node="2"] .loop-dot-label,
.loop-node[data-node="3"] .loop-dot-label { left: calc(100% + 0.7rem); top: 50%; transform: translateY(-50%); text-align: left; }
.loop-node[data-node="5"] .loop-dot-label,
.loop-node[data-node="6"] .loop-dot-label { right: calc(100% + 0.7rem); top: 50%; transform: translateY(-50%); text-align: right; }
/* active / selected node */
.loop-dot[aria-expanded="true"] {
background: var(--dot-c);
color: var(--dot-ink);
transform: scale(1.12);
border-color: var(--dot-deep);
}
/* node 5 — links back to the Individual flow → sunflower / Exminder tint */
.loop-node-exminder .loop-dot {
--dot-c: var(--role-exminder);
--dot-deep: var(--color-sunflower-deep);
--dot-soft: var(--color-sunflower-soft);
--dot-ink: var(--role-exminder-ink);
border-color: var(--role-exminder);
color: var(--color-sunflower-deep);
background: var(--color-sunflower-soft);
}
.loop-node-exminder .loop-dot:focus-visible { outline-color: var(--color-sunflower-deep); }
.loop-node-exminder .loop-dot[aria-expanded="true"] {
background: var(--role-exminder);
color: var(--role-exminder-ink);
border-color: var(--color-sunflower-deep);
}
/* restart node (6) — accent-1 emphasis */
.loop-dot-restart {
--dot-c: var(--accent-1);
--dot-deep: var(--accent-1-deep);
--dot-ink: var(--accent-1-ink);
background: var(--accent-1-soft);
}
.loop-dot-restart .loop-num { font-size: 1.7rem; }
/* ---- center hub ---- */
.loop-hub {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 11rem; height: 11rem;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
background: var(--glass);
border: 1px solid var(--line);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.loop-hub-mark {
position: absolute;
top: 1.6rem;
font-size: 1.9rem;
color: var(--accent-2-deep);
animation: loopHubSpin 9s linear infinite;
}
.loop-hub-text {
margin-top: 1.4rem;
font-weight: 800;
font-size: 1.05rem;
line-height: 1.15;
letter-spacing: -0.01em;
background: var(--accent-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@keyframes loopHubSpin { to { transform: rotate(360deg); } }
/* ---- expandable panels (desktop) ---- */
.loop-panels { max-width: 40rem; margin: 2.4rem auto 0; }
.loop-panel {
position: relative;
padding: 1.6rem 1.8rem 1.6rem 4.6rem;
border-radius: var(--radius-sm, 24px);
background: var(--glass-strong);
border: 1px solid var(--line);
border-left: 4px solid var(--accent-2);
animation: loopPanelIn .4s cubic-bezier(.2,.8,.2,1) both;
}
.loop-panel-exminder { border-left-color: var(--role-exminder); }
.loop-panel-restart { border-left-color: var(--accent-1); }
.loop-panel[hidden] { display: none; }
.loop-panel-step {
position: absolute;
left: 1.5rem; top: 1.6rem;
font-size: 1.6rem;
font-weight: 800;
color: var(--accent-2);
line-height: 1;
}
.loop-panel-exminder .loop-panel-step { color: var(--color-sunflower-deep); }
.loop-panel-restart .loop-panel-step { color: var(--accent-1-deep); }
.loop-panel-title { margin: 0 0 0.4rem; font-size: 1.18rem; color: var(--ink); }
.loop-panel-desc { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--ink-2); }
@keyframes loopPanelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* ====================== MOBILE STEPPER (hidden on desktop) ====================== */
.loop-stepper { display: none; }
/* ====================== RESPONSIVE ====================== */
@media (max-width: 760px) {
.loop-circle, .loop-panels { display: none; }
.loop-stepper {
display: block;
list-style: none;
margin: 0;
padding: 0;
max-width: 32rem;
margin-inline: auto;
}
.loop-step {
position: relative;
display: flex;
gap: 1rem;
padding-bottom: 1.6rem;
}
/* vertical connector line */
.loop-step::before {
content: "";
position: absolute;
left: 1.4rem; top: 2.9rem; bottom: -0.2rem;
width: 2px;
background: linear-gradient(var(--accent-2), var(--accent-2-soft));
}
.loop-step:last-of-type::before { display: none; }
.loop-step-num {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 2.8rem; height: 2.8rem;
border-radius: 50%;
background: var(--accent-2);
color: var(--accent-2-ink);
font-weight: 800;
font-size: 1.05rem;
z-index: 1;
}
.loop-step-exminder .loop-step-num {
background: var(--role-exminder);
color: var(--role-exminder-ink);
}
.loop-step-exminder::before { background: linear-gradient(var(--role-exminder), var(--color-sunflower-soft)); }
.loop-step-restart .loop-step-num { background: var(--accent-1); color: var(--accent-1-ink); font-size: 1.4rem; }
.loop-step-body { padding-top: 0.25rem; }
.loop-step-title { margin: 0 0 0.3rem; font-size: 1.05rem; color: var(--ink); }
.loop-step-desc { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }
/* loop-back indicator */
.loop-step-loop {
display: flex;
align-items: center;
gap: 0.7rem;
margin-top: 0.4rem;
padding: 0.7rem 1rem;
border-radius: 999px;
background: var(--accent-grad);
color: var(--accent-2-ink);
font-weight: 700;
width: fit-content;
}
.loop-step-loop-mark {
font-size: 1.3rem;
display: inline-block;
animation: loopHubSpin 9s linear infinite;
}
.loop-step-loop-text { font-size: 0.92rem; }
.loop-orb { width: 18rem; height: 18rem; filter: blur(50px); }
.loop-head { margin-bottom: 2rem; }
}
/* very small screens */
@media (max-width: 380px) {
.loop-step-loop-text { font-size: 0.84rem; }
}
/* ====================== REDUCED MOTION → static ====================== */
@media (prefers-reduced-motion: reduce) {
.loop-progress { stroke-dashoffset: 0 !important; transition: none; }
.loop-flow { animation: none; stroke-dasharray: none; opacity: 0.85; }
.loop-hub-mark, .loop-step-loop-mark { animation: none; }
.loop-panel { animation: none; }
.loop-dot { transition: none; }
.loop-dot:hover { transform: none; }
}
/* ---------- demodays ---------- */
/* ============================================================
S9 — Demo Days ticker (prefix .dday-)
Horizontal auto-scrolling feed of upcoming Demo Days.
Pause on hover/focus. No auto-scroll under reduced-motion.
Uses ONLY semantic tokens so [data-mode] recolors it.
============================================================ */
.dday-section { position: relative; overflow: hidden; }
.dday-tagline {
margin: 14px auto 0;
font-weight: 800;
font-size: clamp(13px, 1.6vw, 16px);
letter-spacing: 0.02em;
background: var(--accent-grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* ---- Ticker shell -------------------------------------------------------- */
.dday-ticker {
position: relative;
margin-top: 56px;
}
.dday-viewport {
overflow: hidden;
border-radius: var(--radius-sm, 24px);
/* keyboard focus ring without clipping it away */
outline: none;
}
.dday-viewport:focus-visible {
box-shadow: 0 0 0 3px var(--accent-2-soft), 0 0 0 1px var(--accent-2);
}
.dday-track {
display: flex;
gap: 20px;
list-style: none;
margin: 0;
padding: 6px 2px 14px;
width: max-content;
/* Auto-scroll — duration tuned by JS via --dday-dur from track width. */
animation: dday-scroll var(--dday-dur, 38s) linear infinite;
will-change: transform;
}
/* Pause when the viewport is hovered or any control inside has focus */
.dday-ticker:hover .dday-track,
.dday-viewport:focus-within .dday-track,
.dday-viewport:focus .dday-track {
animation-play-state: paused;
}
/* ---- Card ---------------------------------------------------------------- */
.dday-card {
position: relative;
flex: 0 0 auto;
width: 300px;
display: flex;
flex-direction: column;
gap: 14px;
padding: 22px;
border-radius: var(--radius-sm, 24px);
background: var(--glass-strong);
border: 1px solid var(--line);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 18px 40px var(--accent-shadow);
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.dday-card:hover { transform: translateY(-4px); box-shadow: 0 26px 56px var(--accent-shadow); }
.dday-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.dday-date {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-2-deep);
padding: 6px 11px;
border-radius: 999px;
background: var(--accent-2-soft);
}
/* LIVE pulse badge — uses Explorer role token (common thread) for the dot */
.dday-live {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--role-explorer);
}
.dday-live-dot {
position: relative;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--role-explorer);
flex: 0 0 auto;
}
.dday-live-dot::after {
content: "";
position: absolute; inset: -4px;
border-radius: 50%;
background: var(--role-explorer);
opacity: .45;
animation: dday-pulse 1.8s ease-out infinite;
}
.dday-company {
display: flex;
align-items: center;
gap: 12px;
}
.dday-avatar {
width: 44px; height: 44px;
flex: 0 0 auto;
border-radius: 14px;
display: grid; place-items: center;
font-weight: 800;
font-size: 17px;
color: var(--accent-1-ink);
background: var(--accent-grad);
}
.dday-company-name {
margin: 0;
font-size: 17px;
font-weight: 700;
line-height: 1.2;
color: var(--ink);
}
.dday-company-meta {
margin: 2px 0 0;
font-size: 12.5px;
color: var(--ink-3);
}
.dday-spots {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--ink-2);
margin-top: auto;
}
.dday-spots strong { color: var(--ink); font-weight: 800; }
.dday-spots.is-low strong { color: var(--accent-2-deep); }
.dday-spots-bar {
position: relative;
flex: 1 1 auto;
height: 6px;
border-radius: 999px;
background: var(--accent-2-soft);
overflow: hidden;
}
.dday-spots-bar > span {
position: absolute; inset: 0 auto 0 0;
width: var(--dday-fill, 50%);
border-radius: 999px;
background: var(--accent-grad);
}
.dday-book {
margin-top: 2px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 18px;
border-radius: 999px;
font-weight: 700;
font-size: 14px;
text-decoration: none;
color: var(--accent-1-ink);
background: var(--accent-1);
border: 1px solid transparent;
transition: filter .25s ease, transform .25s ease;
}
.dday-book:hover { filter: brightness(1.05); transform: translateX(2px); }
.dday-book:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--accent-2-soft), 0 0 0 1px var(--accent-2);
}
.dday-book svg { width: 15px; height: 15px; }
/* ---- Fade edges --------------------------------------------------------- */
.dday-edge {
position: absolute; top: 0; bottom: 0;
width: clamp(28px, 7vw, 96px);
pointer-events: none; z-index: 2;
}
.dday-edge-l { left: 0; background: linear-gradient(90deg, var(--bg-0), transparent); }
.dday-edge-r { right: 0; background: linear-gradient(270deg, var(--bg-0), transparent); }
/* ---- Footer line -------------------------------------------------------- */
.dday-foot {
margin: 32px auto 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
font-size: 14px;
color: var(--ink-2);
text-align: center;
}
.dday-foot-pulse {
width: 9px; height: 9px; border-radius: 50%;
background: var(--role-explorer);
box-shadow: 0 0 0 4px var(--accent-2-soft);
}
.dday-foot-link {
font-weight: 700;
color: var(--accent-2-deep);
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.dday-foot-link:hover { filter: brightness(1.1); }
/* ---- Uniquely-prefixed keyframes (no collision) ------------------------- */
@keyframes dday-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); } /* track is duplicated → -50% = one set */
}
@keyframes dday-pulse {
0% { transform: scale(1); opacity: .45; }
100% { transform: scale(2.6); opacity: 0; }
}
/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 760px) {
.dday-ticker { margin-top: 40px; }
.dday-card { width: 264px; padding: 18px; }
.dday-avatar { width: 40px; height: 40px; }
.dday-edge { width: clamp(16px, 8vw, 40px); }
}
@media (max-width: 380px) {
.dday-card { width: 240px; }
}
/* ---- Reduced motion: no auto-scroll, becomes a scrollable row ----------- */
@media (prefers-reduced-motion: reduce) {
.dday-track { animation: none; }
.dday-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dday-live-dot::after { animation: none; opacity: .3; }
.dday-card { transition: none; }
}
/* JS-driven fallback flag mirrors the media query for runtime swaps */
.dday-ticker[data-dday-reduced] .dday-track { animation: none; }
.dday-ticker[data-dday-reduced] .dday-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ---------- experiences ---------- */
/* ===========================================================================
S10 — Experiences marketplace (.exp-) · Explorer can BUY 1:1 experiences
Uses ONLY semantic tokens; role-exminder hardcoded for avatars (intended).
=========================================================================== */
.exp-section { position: relative; }
.exp-head {
text-align: center;
max-width: 760px;
margin: 0 auto 56px;
}
.exp-eyebrow { color: var(--accent-2-deep); }
.exp-title { margin-left: auto; margin-right: auto; }
.exp-lead { margin: 18px auto 0; }
.exp-tagline {
margin: 20px auto 0;
font-weight: 700;
font-size: clamp(15px, 1.4vw, 18px);
letter-spacing: 0.2px;
background: var(--accent-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ---- Grid ---- */
.exp-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
}
/* ---- Card ---- */
.exp-card {
display: flex;
flex-direction: column;
gap: 18px;
padding: 28px;
border-radius: var(--radius-sm, 24px);
background: var(--glass-strong);
border: 1px solid var(--line);
box-shadow: 0 18px 48px -28px var(--accent-shadow);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.exp-card:hover,
.exp-card:focus-within {
transform: translateY(-6px);
border-color: color-mix(in srgb, var(--accent-2) 38%, transparent);
box-shadow: 0 28px 64px -28px var(--accent-shadow);
}
/* ---- Host row ---- */
.exp-card-top {
display: flex;
align-items: center;
gap: 14px;
}
.exp-avatar {
flex: 0 0 auto;
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 50%;
font-weight: 800;
font-size: 17px;
letter-spacing: 0.5px;
/* Exminder = sunflower role token (mode-independent, intended hardcode).
Lightened toward the near-white surface token --bg-0 (no hardcoded hex). */
background: linear-gradient(135deg,
var(--role-exminder) 0%,
color-mix(in srgb, var(--role-exminder) 70%, var(--bg-0)) 100%);
color: var(--role-exminder-ink);
box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--role-exminder) 70%, transparent);
}
.exp-host {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.exp-host-name {
font-weight: 700;
font-size: 15px;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.exp-host-role {
font-size: 12.5px;
color: var(--ink-3);
display: inline-flex;
align-items: center;
gap: 5px;
}
.exp-host-role::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--role-exminder);
flex: 0 0 auto;
}
/* ---- Title ---- */
.exp-card-title {
margin: 0;
font-size: clamp(18px, 1.6vw, 21px);
line-height: 1.28;
font-weight: 700;
color: var(--ink);
flex: 1 1 auto;
}
/* ---- Meta (duration + price) ---- */
.exp-meta {
margin: 0;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.exp-meta-row {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.exp-meta-label {
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--ink-3);
margin: 0;
}
.exp-duration {
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--ink-2);
display: inline-flex;
align-items: center;
gap: 6px;
}
.exp-icon { font-size: 14px; opacity: .85; }
.exp-price {
margin: 0;
text-align: right;
line-height: 1.1;
}
.exp-amount {
font-size: clamp(22px, 2.2vw, 26px);
font-weight: 800;
color: var(--accent-1-deep);
}
.exp-currency {
font-size: 13px;
font-weight: 700;
color: var(--ink-3);
letter-spacing: 0.4px;
}
/* ---- CTA ---- */
.exp-cta {
width: 100%;
justify-content: center;
gap: 8px;
background: var(--accent-grad);
color: var(--accent-1-ink);
border: 1px solid transparent;
box-shadow: 0 10px 28px -12px var(--accent-shadow);
}
.exp-cta:hover,
.exp-cta:focus-visible {
transform: translateY(-2px);
box-shadow: 0 16px 38px -12px var(--accent-shadow);
}
.exp-cta-arrow {
transition: transform .25s ease;
}
.exp-cta:hover .exp-cta-arrow,
.exp-card:hover .exp-cta-arrow {
transform: translateX(4px);
}
/* ---- Footer link ---- */
.exp-foot {
margin-top: 44px;
text-align: center;
}
.exp-browse {
background: var(--glass);
border: 1px solid var(--line);
color: var(--ink);
}
.exp-browse:hover,
.exp-browse:focus-visible {
border-color: color-mix(in srgb, var(--accent-2) 42%, transparent);
color: var(--accent-2-deep);
transform: translateY(-2px);
}
/* ---- Stagger reveal (children of [data-reveal-stagger]) ---- */
.exp-grid > .exp-card {
opacity: 0;
transform: translateY(20px);
transition: opacity .55s ease, transform .55s ease;
transition-delay: calc(var(--stagger-i, 0) * 70ms);
}
.exp-grid > .exp-card.is-in {
opacity: 1;
transform: none;
}
/* ---- Responsive ---- */
@media (max-width: 760px) {
.exp-head { margin-bottom: 36px; }
.exp-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.exp-card { padding: 22px; }
.exp-avatar { width: 46px; height: 46px; font-size: 15px; }
.exp-foot { margin-top: 32px; }
}
@media (max-width: 360px) {
.exp-card { padding: 18px; }
.exp-meta { gap: 10px; }
}
/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
.exp-card,
.exp-cta,
.exp-cta-arrow,
.exp-browse,
.exp-grid > .exp-card {
transition: none !important;
transform: none !important;
}
.exp-grid > .exp-card { opacity: 1; }
}
/* ---------- manifesto ---------- */
/* ============================================================
S11 — Brand manifesto (video). prefix: .mf-
Full-width accent-tinted video slot with one impact line.
Semantic tokens only → recolors with [data-mode].
NOTE: pure #fff / rgba(0,0,0) below sit on the video poster +
accent overlay (mode/theme-independent media) for legibility;
no white/black neutral token exists in the system. Redundant
--accent-shadow rgba() fallbacks removed (token is always defined).
============================================================ */
.mf-section {
position: relative;
overflow: hidden;
isolation: isolate;
}
.mf-section .container { position: relative; z-index: 1; }
/* Ambient accent orbs — decorative, pointer-safe */
.mf-orb {
position: absolute;
width: 46vw;
max-width: 640px;
aspect-ratio: 1;
border-radius: 50%;
filter: blur(120px);
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.mf-orb-a { top: -14%; right: -8%; background: var(--accent-1-soft); }
.mf-orb-b { bottom: -18%; left: -10%; background: var(--accent-2-soft); }
/* ---- Impact line ------------------------------------------- */
.mf-head {
max-width: 920px;
margin: 0 auto 48px;
text-align: center;
}
.mf-eyebrow { margin-bottom: 18px; }
.mf-line {
margin: 0;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.08;
font-size: clamp(1.9rem, 4.6vw, 3.5rem);
color: var(--ink);
text-wrap: balance;
}
/* ---- Video figure ------------------------------------------ */
.mf-video { margin: 0; }
.mf-stage {
position: relative;
aspect-ratio: 16 / 9;
border-radius: var(--radius, 36px);
overflow: hidden;
background: var(--bg-2);
box-shadow: var(--shadow-strong, 0 50px 100px rgba(0,0,0,0.18));
border: 1px solid var(--line);
cursor: pointer;
}
.mf-poster,
.mf-real {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mf-poster {
transition: transform 1.1s cubic-bezier(.2,.8,.2,1), filter .5s ease;
transform: scale(1.02);
}
.mf-stage:hover .mf-poster { transform: scale(1.06); }
/* Accent-tinted gradient overlay for legibility + brand color */
.mf-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--accent-1-deep) 26%, transparent) 0%,
transparent 34%,
transparent 52%,
color-mix(in srgb, var(--accent-2-deep) 64%, transparent) 100%);
mix-blend-mode: multiply;
pointer-events: none;
transition: opacity .5s ease;
}
/* ---- Play button ------------------------------------------- */
.mf-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 96px;
height: 96px;
border: 0;
border-radius: 50%;
background: var(--accent-grad);
color: var(--accent-1-ink);
display: grid;
place-items: center;
cursor: pointer;
z-index: 3;
box-shadow: 0 18px 50px var(--accent-shadow),
0 0 0 1px color-mix(in srgb, #fff 22%, transparent) inset;
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.mf-play:hover,
.mf-play:focus-visible {
transform: translate(-50%, -50%) scale(1.08);
box-shadow: 0 22px 64px var(--accent-shadow),
0 0 0 1px color-mix(in srgb, #fff 30%, transparent) inset;
}
.mf-play:focus-visible {
outline: 3px solid var(--accent-1);
outline-offset: 5px;
}
.mf-play-ring {
position: absolute;
inset: -10px;
border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--accent-1) 55%, transparent);
animation: mf-halo 2.6s ease-out infinite;
pointer-events: none;
}
.mf-play-icon {
position: relative;
display: grid;
place-items: center;
margin-left: 4px; /* optical centering of the triangle */
}
.mf-play-icon-pause { display: none; margin-left: 0; }
/* Playing state (faked — toggled by JS) */
.mf-stage.is-playing { cursor: default; }
.mf-stage.is-playing .mf-poster { filter: brightness(.62) saturate(1.05); transform: scale(1.04); }
.mf-stage.is-playing .mf-overlay { opacity: .55; }
.mf-stage.is-playing .mf-play-icon { display: none; }
.mf-stage.is-playing .mf-play-icon-pause { display: grid; }
.mf-stage.is-playing .mf-play { background: color-mix(in srgb, var(--bg-0) 18%, transparent); color: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, #fff 30%, transparent) inset; backdrop-filter: blur(6px); }
.mf-stage.is-playing .mf-play-ring { display: none; }
.mf-stage.is-playing .mf-loader { opacity: 1; }
.mf-stage.is-playing .mf-overlay-copy { transform: translateY(8px); opacity: 0; }
/* ---- Overlay copy (tagline) -------------------------------- */
.mf-overlay-copy {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: clamp(20px, 3.4vw, 44px);
z-index: 2;
pointer-events: none;
transition: transform .5s ease, opacity .5s ease;
}
.mf-tagline {
margin: 0;
color: #fff;
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1;
font-size: clamp(1.4rem, 3.2vw, 2.4rem);
text-shadow: 0 2px 22px rgba(0,0,0,.45);
}
.mf-overlay-meta {
margin: 8px 0 0;
color: color-mix(in srgb, #fff 82%, transparent);
font-size: clamp(.78rem, 1.4vw, .92rem);
font-weight: 600;
letter-spacing: .02em;
text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
/* ---- Fake buffering loader (only visible while "playing") --- */
.mf-loader {
position: absolute;
top: clamp(16px, 2.4vw, 28px);
right: clamp(16px, 2.4vw, 28px);
z-index: 3;
display: flex;
gap: 5px;
opacity: 0;
transition: opacity .4s ease;
pointer-events: none;
}
.mf-loader span {
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
animation: mf-bounce 1.1s ease-in-out infinite;
}
.mf-loader span:nth-child(2) { animation-delay: .15s; }
.mf-loader span:nth-child(3) { animation-delay: .3s; }
/* ---- Captions note ----------------------------------------- */
.mf-captions-note {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 20px 0 0;
color: var(--ink-3);
font-size: .86rem;
font-weight: 600;
}
.mf-cc { flex: none; color: var(--accent-2); }
/* ---- Keyframes (uniquely prefixed) ------------------------- */
@keyframes mf-halo {
0% { transform: scale(1); opacity: .7; }
70% { transform: scale(1.4); opacity: 0; }
100% { transform: scale(1.4); opacity: 0; }
}
@keyframes mf-bounce {
0%, 100% { transform: translateY(0); opacity: .5; }
50% { transform: translateY(-6px); opacity: 1; }
}
/* ---- Responsive -------------------------------------------- */
@media (max-width: 760px) {
.mf-head { margin-bottom: 32px; }
.mf-stage { border-radius: 26px; }
.mf-play { width: 72px; height: 72px; }
.mf-play-icon svg { width: 26px; height: 26px; }
.mf-orb { filter: blur(80px); opacity: .42; }
.mf-overlay-copy { padding: 18px; }
}
@media (max-width: 400px) {
.mf-play { width: 60px; height: 60px; }
}
/* ---- Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.mf-poster,
.mf-stage:hover .mf-poster,
.mf-stage.is-playing .mf-poster { transform: none; transition: none; }
.mf-play-ring,
.mf-loader span { animation: none; }
.mf-play:hover,
.mf-play:focus-visible { transform: translate(-50%, -50%); }
}
/* ---------- testimonials ---------- */
/* ===== S12 Testimonials (.tst-) ===== */
.tst-section { position: relative; }
.tst-head { max-width: 760px; margin: 0 auto 56px; }
.tst-eyebrow { margin: 0 0 12px; }
.tst-title { margin: 0 0 16px; }
.tst-lead { margin: 0 auto; }
.tst-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch;
}
/* Card: neutral surface, role accent applied via per-role token */
.tst-card {
--tst-accent: var(--accent-1);
--tst-accent-deep: var(--accent-1-deep);
--tst-accent-soft: var(--accent-1-soft);
--tst-accent-ink: var(--accent-1-ink);
display: flex;
height: 100%;
border-radius: 22px;
background: var(--glass);
border: 1px solid var(--line);
border-top: 3px solid var(--tst-accent);
box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
overflow: hidden;
transition: transform .5s cubic-bezier(.2,.8,.2,1),
box-shadow .5s cubic-bezier(.2,.8,.2,1),
border-color .5s ease;
}
.tst-card:hover {
transform: translateY(-6px);
border-color: color-mix(in srgb, var(--tst-accent) 40%, var(--line));
box-shadow: 0 22px 48px -24px color-mix(in srgb, var(--tst-accent) 55%, transparent);
}
/* Role-specific accents (mode-independent role colors) */
.tst-card--explorer {
--tst-accent: var(--role-explorer);
--tst-accent-deep: var(--color-lagoon-deep);
--tst-accent-soft: var(--color-lagoon-soft);
--tst-accent-ink: var(--role-explorer-ink);
}
.tst-card--exminder {
--tst-accent: var(--role-exminder);
--tst-accent-deep: var(--color-sunflower-deep);
--tst-accent-soft: var(--color-sunflower-soft);
--tst-accent-ink: var(--role-exminder-ink);
}
.tst-card--company {
--tst-accent: var(--role-company);
--tst-accent-deep: var(--color-pine-deep);
--tst-accent-soft: var(--color-pine-soft);
--tst-accent-ink: var(--role-company-ink);
}
.tst-figure {
position: relative;
margin: 0;
padding: 32px 28px 28px;
display: flex;
flex-direction: column;
gap: 18px;
width: 100%;
}
/* Role chip — solid role color, AA-contrast ink */
.tst-role-chip {
align-self: flex-start;
display: inline-flex;
align-items: center;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 999px;
color: var(--tst-accent-ink);
background: var(--tst-accent);
}
.tst-quote-mark {
position: absolute;
top: 14px;
right: 22px;
font-family: Georgia, "Times New Roman", serif;
font-size: 84px;
line-height: 1;
color: var(--tst-accent-soft);
pointer-events: none;
user-select: none;
}
.tst-quote {
margin: 0;
flex: 1 1 auto;
}
.tst-quote p {
margin: 0;
font-size: clamp(16px, 1.4vw, 18px);
line-height: 1.6;
color: var(--ink);
font-weight: 500;
}
.tst-author {
display: flex;
align-items: center;
gap: 14px;
margin-top: 4px;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.tst-avatar {
flex: 0 0 auto;
width: 46px;
height: 46px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--tst-accent-ink);
background: linear-gradient(135deg,
var(--tst-accent) 0%,
var(--tst-accent-deep) 100%);
}
.tst-author-meta {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.tst-author-name {
font-size: 15px;
font-weight: 700;
color: var(--ink);
}
.tst-author-role {
font-size: 13px;
line-height: 1.4;
color: var(--ink-3);
}
/* Responsive */
@media (max-width: 760px) {
.tst-head { margin-bottom: 36px; }
.tst-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.tst-figure { padding: 26px 22px 24px; }
.tst-quote-mark { font-size: 64px; top: 10px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.tst-card { transition: none; }
.tst-card:hover { transform: none; }
}
/* ---------- faq ---------- */
/* ============================================================
S13 — FAQ accordion (role-filterable) · prefix .faq-
Reuses semantic tokens only. Legacy .faq-item/.faq-list/.faq-chev
in site.css are NOT touched — this section uses distinct names
(.faq-q / .faq-accordion / .faq-icon) inside the .faq- namespace.
============================================================ */
.faq-section { position: relative; padding: clamp(64px, 9vw, 120px) 0; }
.faq-head { text-align: center; max-width: 760px; margin: 0 auto; }
.faq-eyebrow { display: inline-block; margin-bottom: 14px; }
.faq-title { margin: 0 auto 18px; max-width: 18ch; }
.faq-intro {
margin: 0 auto;
max-width: 56ch;
color: var(--ink-2);
font-size: clamp(15px, 1.5vw, 17px);
line-height: 1.65;
}
/* --- Filter row --- */
.faq-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 36px auto 0;
}
.faq-filter {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 10px 18px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--glass);
color: var(--ink-2);
font: inherit;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.faq-filter:hover { background: var(--glass-strong); transform: translateY(-1px); }
.faq-filter:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 2px;
}
.faq-filter.is-active {
background: var(--accent-grad);
border-color: transparent;
color: var(--accent-1-ink);
box-shadow: 0 8px 22px var(--accent-shadow);
}
.faq-filter.is-active .faq-filter-dot { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-2-ink) 50%, transparent); }
.faq-filter-dot {
width: 9px; height: 9px;
border-radius: 50%;
flex: 0 0 auto;
}
.faq-dot-all { background: var(--accent-grad); }
.faq-dot-explorer { background: var(--role-explorer); }
.faq-dot-exminder { background: var(--role-exminder); }
.faq-dot-company { background: var(--role-company); }
/* --- Accordion --- */
.faq-accordion {
max-width: 780px;
margin: 44px auto 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-q {
border: 1px solid var(--line);
border-radius: var(--radius-sm, 20px);
background: var(--glass);
overflow: hidden;
transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.faq-q[open] {
border-color: var(--accent-2);
background: var(--glass-strong);
box-shadow: 0 18px 40px -28px var(--accent-shadow);
}
/* Hidden by role filter */
.faq-q.faq-hidden { display: none; }
.faq-summary {
list-style: none;
cursor: pointer;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 14px;
padding: 20px 22px;
color: var(--ink);
font-weight: 600;
font-size: clamp(15px, 1.5vw, 16.5px);
line-height: 1.4;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: -3px;
border-radius: var(--radius-sm, 20px);
}
.faq-q-text { min-width: 0; }
/* Role badge on each question */
.faq-badge {
flex: 0 0 auto;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 4px 9px;
border-radius: 999px;
white-space: nowrap;
}
.faq-badge-explorer { background: var(--role-explorer); color: var(--role-explorer-ink); }
.faq-badge-exminder { background: var(--role-exminder); color: var(--role-exminder-ink); }
.faq-badge-company { background: var(--role-company); color: var(--role-company-ink); }
.faq-badge-all {
background: var(--accent-2-soft);
color: var(--accent-2-deep);
border: 1px solid var(--line);
}
/* Plus -> x icon */
.faq-icon {
flex: 0 0 auto;
width: 26px; height: 26px;
display: grid;
place-items: center;
color: var(--accent-2-deep);
transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.faq-icon svg { width: 18px; height: 18px; display: block; }
.faq-q[open] .faq-icon { transform: rotate(45deg); }
/* Answer reveal via grid-rows trick (animatable) */
.faq-answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .35s cubic-bezier(.2,.8,.2,1);
}
.faq-q[open] .faq-answer { grid-template-rows: 1fr; }
.faq-answer > p {
overflow: hidden;
margin: 0;
padding: 0 22px 0;
color: var(--ink-2);
font-size: clamp(14px, 1.4vw, 15px);
line-height: 1.65;
transition: padding-bottom .35s ease;
}
.faq-q[open] .faq-answer > p { padding-bottom: 22px; }
/* Empty state */
.faq-empty {
max-width: 780px;
margin: 24px auto 0;
text-align: center;
color: var(--ink-3);
font-size: 15px;
font-style: italic;
}
.faq-empty[hidden] { display: none; }
/* CTA line into the existing #contact form */
.faq-cta-line {
margin: 40px auto 0;
text-align: center;
color: var(--ink-2);
font-size: 15px;
}
.faq-cta-link {
color: var(--accent-2-deep);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color .2s ease, opacity .2s ease;
}
.faq-cta-link:hover { border-bottom-color: currentColor; }
.faq-cta-link:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; }
/* --- Responsive --- */
@media (max-width: 760px) {
.faq-filters { gap: 8px; }
.faq-filter { padding: 9px 14px; font-size: 13px; }
.faq-summary {
grid-template-columns: 1fr auto;
grid-template-areas: "badge badge" "text icon";
gap: 8px 12px;
padding: 16px 16px;
}
.faq-badge { grid-area: badge; justify-self: start; }
.faq-q-text { grid-area: text; }
.faq-icon { grid-area: icon; align-self: start; }
.faq-answer > p { padding-left: 16px; padding-right: 16px; }
.faq-q[open] .faq-answer > p { padding-bottom: 18px; }
}
@media (max-width: 360px) {
.faq-filter span:last-child { font-size: 12.5px; }
}
/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
.faq-q,
.faq-icon,
.faq-answer,
.faq-answer > p,
.faq-filter { transition: none; }
}
/* ============================================================
PHASE 29 — quick polish: rounded CTAs + clearer loop restart
============================================================ */
/* round the hero CTAs (standing rule: rounded corners) */
.shero-cta, .shero-cta-ghost { border-radius: 999px !important; }
/* S8 loop — make the "bucla se reia" restart unmistakable */
.loop-node[data-node="6"] .loop-dot.loop-dot-restart{
background: var(--color-sunflower-soft) !important;
border: 2px dashed var(--color-sunflower) !important;
color: var(--color-sunflower-deep) !important;
box-shadow: 0 6px 18px -8px var(--color-sunflower);
}
.loop-node[data-node="6"] .loop-dot-restart .loop-num{ color: var(--color-sunflower-deep); }
.loop-node[data-node="6"] .loop-dot-restart{ animation: loopRestartPulse 2.4s ease-in-out infinite; }
@keyframes loopRestartPulse{
0%,100%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-sunflower) 55%, transparent); }
60% { box-shadow: 0 0 0 12px transparent; }
}
/* bolder, golden cycle arrow so "after 5 it loops back" reads instantly */
.loop-flow{ stroke: var(--color-sunflower) !important; stroke-width: 4.5 !important; opacity: 1 !important; }
.loop-flow{ marker-end: url(#loopArrow); }
#loopArrow path{ fill: var(--color-sunflower-deep); }
.loop-step-restart .loop-step-num{ background: var(--color-sunflower-soft) !important; color: var(--color-sunflower-deep) !important; border: 2px dashed var(--color-sunflower); }
@media (prefers-reduced-motion: reduce){
.loop-node[data-node="6"] .loop-dot-restart{ animation: none; }
}
/* ============================================================
PHASE 31 — Fun hiring tips FAB (bottom-left, golden bulb)
============================================================ */
.tips-fab{ position:fixed; left:20px; bottom:20px; z-index:60; display:flex; align-items:flex-end; gap:12px; }
.tips-bulb{ position:relative; flex:0 0 auto; width:56px; height:56px; border-radius:50%;
border:none; cursor:pointer; display:grid; place-items:center;
color:#3a2e00; background:linear-gradient(135deg, var(--color-sunflower-200), var(--color-sunflower));
box-shadow:0 12px 28px -10px color-mix(in srgb, var(--color-sunflower) 80%, transparent), inset 0 1px 0 rgba(255,255,255,.5);
transition:transform .2s; }
.tips-bulb:hover{ transform:translateY(-2px) scale(1.04); }
.tips-bulb-ico{ width:26px; height:26px; position:relative; z-index:1; }
.tips-bulb-glow{ position:absolute; inset:-6px; border-radius:50%; background:var(--color-sunflower);
opacity:.5; filter:blur(8px); z-index:0; animation:tipsGlow 2.4s ease-in-out infinite; }
@keyframes tipsGlow{ 0%,100%{ transform:scale(1); opacity:.45; } 50%{ transform:scale(1.18); opacity:.7; } }
.tips-panel{ width:352px; max-width:82vw; border-radius:22px; padding:16px 18px 14px;
background:var(--glass); border:1px solid var(--line);
backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
box-shadow:0 24px 50px -22px rgba(0,0,0,.4);
transform-origin:left bottom; transition:opacity .35s ease, transform .35s cubic-bezier(.4,0,.2,1); }
.tips-fab.is-collapsed .tips-panel{ opacity:0; transform:translateY(8px) scale(.92); pointer-events:none; }
.tips-fab.is-collapsed .tips-bulb-glow{ animation-duration:1.6s; }
.tips-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.tips-eyebrow{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:800;
letter-spacing:.1em; text-transform:uppercase; color:var(--color-sunflower-deep); }
.tips-close{ border:none; background:transparent; cursor:pointer; font-size:20px; line-height:1;
color:var(--ink-3); border-radius:8px; width:24px; height:24px; }
.tips-close:hover{ color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent); }
.tips-vp{ overflow:hidden; height:128px; }
.tips-track{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column;
transition:transform .5s cubic-bezier(.4,0,.2,1); }
.tips-tip{ height:128px; display:flex; align-items:flex-start; padding-top:2px; font-size:14.5px; line-height:1.5;
color:var(--ink); font-weight:600; }
.tips-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.tips-dots{ display:flex; gap:5px; }
.tips-dot{ width:6px; height:6px; border-radius:50%; background:color-mix(in srgb, var(--ink) 22%, transparent);
transition:width .3s, background .3s; }
.tips-dot.is-active{ width:16px; border-radius:99px; background:var(--color-sunflower); }
/* prev / next arrows (replaces the "Alt pont" text button) */
.tips-arrows{ display:flex; align-items:center; gap:8px; }
.tips-arrow{ border:1px solid var(--line); background:transparent; cursor:pointer; width:30px; height:30px;
border-radius:50%; display:grid; place-items:center; color:var(--color-sunflower-deep);
transition:background .25s ease, border-color .25s ease, transform .2s ease; }
.tips-arrow:hover{ background:var(--color-sunflower-soft); border-color:var(--color-sunflower); transform:translateY(-1px); }
.tips-arrow:active{ transform:translateY(0) scale(.94); }
.tips-arrow svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.tips-bulb:focus-visible,.tips-close:focus-visible,.tips-arrow:focus-visible{ outline:2px solid var(--color-sunflower); outline-offset:3px; }
@media (max-width:760px){
.tips-fab{ left:14px; bottom:14px; }
.tips-bulb{ width:48px; height:48px; }
.tips-panel{ width:240px; }
}
@media (prefers-reduced-motion: reduce){
.tips-bulb-glow{ animation:none; } .tips-track{ transition:none; } .tips-panel{ transition:none; }
}
/* ============================================================
PHASE 32 — map + reels merged: side-by-side viewer + nearby
============================================================ */
.xmap-main{ display:grid; grid-template-columns:minmax(0,1fr) 312px; gap:14px; align-items:stretch;
/* #91 — the grid must fill the shell exactly; no auto-sized track can push it left. */
width:100%; min-width:0; }
.xmap-main .xmap-canvas{ min-width:0; }
/* #91 — both grid children clamp to their tracks so Leaflet tiles / reel media
can never blow the column out and bleed past the shell's left edge. */
.xmap-reel{ display:flex; min-width:0; }
.xmap-reel-empty{ margin:auto; text-align:center; color:var(--ink-3); font-size:14px; padding:20px; }
.xmap-reel-card{ display:flex; flex-direction:column; width:100%; height:auto;
border-radius:20px; overflow:hidden; border:1px solid var(--line); background:var(--bg-2); }
/* #fix — cap the photo height so it never crowds the name/role below. The media
keeps a 4/5 frame but is bounded so .xmap-reel-info (name/role/CTA) always sits
clearly beneath it, fully visible, never overlapping. */
.xmap-reel-media{ position:relative; flex:0 0 auto; aspect-ratio:4/5; width:100%;
max-height:320px; overflow:hidden; background:var(--accent-grad); display:grid; place-items:center; }
.xmap-reel-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.xmap-reel-media.is-broken::after{ content:attr(data-init); font-size:54px; font-weight:800; color:#fff; opacity:.9; }
.xmap-reel-media::before{ content:''; position:absolute; inset:0; z-index:1;
background:linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 26%, transparent 60%, rgba(0,0,0,.42) 100%); }
.xmap-reel-play{ position:relative; z-index:2; width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
display:grid; place-items:center; color:#0b2a2a; background:rgba(255,255,255,.92);
box-shadow:0 10px 26px -8px rgba(0,0,0,.45); transition:transform .2s; }
.xmap-reel-play:hover{ transform:scale(1.08); }
.xmap-reel-card.is-playing .xmap-reel-play{ opacity:0; pointer-events:none; }
.xmap-reel-badge{ position:absolute; z-index:2; top:12px; left:12px; padding:5px 12px; border-radius:999px;
font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; }
.xmap-reel-badge--exminder{ background:var(--role-exminder); color:var(--role-exminder-ink); }
.xmap-reel-badge--company{ background:var(--role-company); color:#fff; }
.xmap-reel-pager{ position:absolute; z-index:2; right:12px; top:50%; transform:translateY(-50%);
display:flex; flex-direction:column; align-items:center; gap:8px; }
.xmap-reel-nav{ width:36px; height:36px; border-radius:50%; border:none; cursor:pointer; display:grid; place-items:center;
color:#0b2a2a; background:rgba(255,255,255,.9); box-shadow:0 6px 16px -6px rgba(0,0,0,.4); transition:transform .15s, background .2s; }
.xmap-reel-nav:hover{ transform:scale(1.08); }
.xmap-reel-counter{ font-size:11px; font-weight:800; color:#fff; background:rgba(0,0,0,.42); padding:3px 9px; border-radius:999px; }
/* #fix — info block sits below the photo and is allowed to grow with content so
the full name + role + readout never clip or overlap the image. */
.xmap-reel-info{ flex:1 1 auto; display:flex; flex-direction:column; align-items:flex-start;
padding:14px 16px 16px; background:var(--glass); }
.xmap-reel-name{ margin:0; font-size:17px !important; line-height:1.3 !important; font-weight:800; color:var(--ink);
letter-spacing:0 !important; overflow-wrap:anywhere; }
.xmap-reel-role{ margin:3px 0 0; font-size:12.5px !important; color:var(--ink-3); line-height:1.35; overflow-wrap:anywhere; }
.xmap-reel-readout{ margin:6px 0 12px; font-size:11.5px; font-weight:700; line-height:1.3; color:var(--ink-2);
letter-spacing:.01em; overflow-wrap:anywhere; }
.xmap-reel-cta{ display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:999px;
font-size:13px; font-weight:700; text-decoration:none; color:var(--accent-1-ink); background:var(--accent-grad);
box-shadow:0 8px 18px -8px var(--accent-shadow); }
/* nearby strip */
.xmap-nearby{ margin-top:16px; min-width:0; }
.xmap-nearby-head{ display:flex; align-items:center; gap:10px; margin:0 2px 10px; }
.xmap-nearby-title{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-1-deep); }
/* #91 — the horizontal track scrolls within the shell; clamp its width and
left padding so the first card aligns to the shell edge and never bleeds left. */
.xmap-nearby-track{ list-style:none; margin:0; padding:4px 2px 8px; display:flex; gap:12px;
max-width:100%; overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.xmap-nearby-track::-webkit-scrollbar{ height:6px; }
.xmap-nearby-track::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--ink) 18%, transparent); border-radius:999px; }
.xmap-nearby-card{ flex:0 0 auto; width:128px; scroll-snap-align:start; }
.xmap-nearby-btn{ display:block; width:100%; text-align:left; border:none; background:transparent; cursor:pointer; padding:0; }
.xmap-nearby-media{ position:relative; width:100%; aspect-ratio:3/4; border-radius:14px; overflow:hidden;
background:var(--accent-grad); display:grid; place-items:center; }
.xmap-nearby-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.xmap-nearby-media.is-broken::after{ content:attr(data-init); font-size:26px; font-weight:800; color:#fff; opacity:.9; }
.xmap-nearby-btn:hover .xmap-nearby-media{ outline:2px solid var(--accent-2); outline-offset:2px; }
.xmap-nearby-badge{ position:absolute; top:7px; left:7px; width:10px; height:10px; border-radius:50%; z-index:1; border:2px solid #fff; }
.xmap-nearby-badge--exminder{ background:var(--role-exminder); }
.xmap-nearby-badge--company{ background:var(--role-company); }
.xmap-nearby-name{ display:block; margin-top:7px; font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.25; }
.xmap-nearby-city{ display:block; font-size:11px; color:var(--ink-3); }
.xmap-reel-nav:focus-visible, .xmap-reel-play:focus-visible, .xmap-nearby-btn:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; }
@media (max-width: 900px){
.xmap-main{ grid-template-columns:1fr; }
.xmap-reel-card{ height:auto; }
.xmap-reel-media{ aspect-ratio:16/10; }
}
@media (prefers-reduced-motion: reduce){
.xmap-reel-play, .xmap-reel-nav{ transition:none; }
}
/* ============================================================
PHASE 33 — Explore-more page templates (Journal / Press / Study cases)
============================================================ */
/* ---------- Journal ---------- */
.jr-section{
--pa: var(--color-lagoon);
--pa-deep: var(--color-lagoon-deep);
--pa-soft: var(--color-lagoon-soft);
--pa-50: var(--color-lagoon-50);
position: relative;
z-index: 1;
}
/* ---------------- HERO ---------------- */
.jr-hero{ padding-top: 132px; padding-bottom: 64px; }
.jr-hero-inner{ max-width: 880px; }
.jr-eyebrow{
display: inline-block;
font-size: .76rem;
font-weight: 800;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--pa-deep);
padding: 7px 16px;
border-radius: 999px;
background: var(--pa-soft);
border: 1px solid color-mix(in srgb, var(--pa) 30%, transparent);
}
.jr-hero-title{
margin: 20px 0 0;
font-size: clamp(2.3rem, 5.4vw, 4rem);
line-height: 1.05;
letter-spacing: -.02em;
font-weight: 800;
color: var(--ink);
}
.jr-hero-grad{
background: linear-gradient(120deg, var(--color-lagoon) 0%, var(--color-pine) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
font-weight: 400;
letter-spacing: 0;
}
.jr-hero-sub{
margin: 22px 0 0;
max-width: 660px;
font-size: clamp(1.02rem, 1.7vw, 1.2rem);
line-height: 1.65;
color: var(--ink-2);
}
.jr-hero-tools{
margin-top: 34px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
justify-content: space-between;
}
.jr-chips{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.jr-chip{
font-family: inherit;
font-size: .9rem;
font-weight: 600;
color: var(--ink-2);
background: var(--glass);
border: 1px solid var(--line);
border-radius: 999px;
padding: 10px 20px;
cursor: pointer;
transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.jr-chip:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--pa) 36%, transparent); color: var(--ink); }
.jr-chip.is-active,
.jr-chip[aria-pressed="true"]{
background: var(--pa);
color: #fff;
border-color: var(--pa);
}
.jr-chip:focus-visible{ outline: 2px solid var(--pa-deep); outline-offset: 3px; }
.jr-search{
display: flex;
align-items: center;
gap: 10px;
padding: 4px 6px 4px 16px;
border-radius: 999px;
border: 1px solid var(--line);
min-width: 248px;
}
.jr-search-ico{ color: var(--pa-deep); flex: none; }
.jr-search-input{
font-family: inherit;
font-size: .92rem;
color: var(--ink);
background: transparent;
border: 0;
outline: none;
padding: 11px 12px 11px 0;
width: 100%;
-webkit-appearance: none;
appearance: none;
border-radius: 999px;
}
.jr-search-input::-webkit-search-decoration,
.jr-search-input::-webkit-search-cancel-button{ -webkit-appearance: none; appearance: none; }
.jr-search-input::placeholder{ color: var(--ink-3); }
/* ---------------- shared section bits ---------------- */
.jr-section-eyebrow{
display: block;
font-size: .74rem;
font-weight: 800;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--pa-deep);
margin-bottom: 20px;
}
.jr-featured-section{ padding-top: 48px; padding-bottom: 64px; }
.jr-section-title{
margin: 0;
font-size: clamp(1.8rem, 3.4vw, 2.6rem);
font-weight: 800;
letter-spacing: -.015em;
line-height: 1.1;
color: var(--ink);
}
.jr-section-lead{
margin: 12px 0 0;
max-width: 580px;
font-size: 1.04rem;
line-height: 1.6;
color: var(--ink-2);
}
/* category chip on cards */
.jr-cat{
display: inline-block;
align-self: flex-start;
font-size: .72rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--pa-deep);
background: var(--pa-soft);
border: 1px solid color-mix(in srgb, var(--pa) 26%, transparent);
border-radius: 12px;
padding: 6px 12px;
}
/* meta row */
.jr-meta{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
font-size: .88rem;
color: var(--ink-3);
}
.jr-meta-sm{ font-size: .82rem; gap: 8px; }
.jr-avatar{
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 999px;
font-size: .76rem;
font-weight: 800;
letter-spacing: .02em;
color: #fff;
background: var(--jr-av, var(--pa));
flex: none;
}
.jr-meta-sm .jr-avatar{ width: 28px; height: 28px; font-size: .68rem; }
.jr-author{ color: var(--ink-2); font-weight: 600; }
.jr-dot{ width: 3px; height: 3px; border-radius: 999px; background: var(--ink-3); opacity: .55; }
.jr-read{ font-variant-numeric: tabular-nums; }
/* ---------------- FEATURED ---------------- */
.jr-featured{
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 0;
border-radius: 28px;
border: 1px solid var(--line);
overflow: hidden;
box-shadow: 0 24px 60px color-mix(in srgb, var(--pa) 9%, transparent);
}
.jr-featured-media{
display: block;
position: relative;
min-height: 340px;
overflow: hidden;
}
.jr-featured-media img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.jr-featured:hover .jr-featured-media img{ transform: scale(1.045); }
.jr-featured-body{
padding: 40px clamp(28px, 3.2vw, 48px);
display: flex;
flex-direction: column;
gap: 16px;
justify-content: center;
}
.jr-featured-title{
margin: 0;
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
line-height: 1.18;
letter-spacing: -.01em;
font-weight: 800;
}
.jr-featured-title a{ color: var(--ink); text-decoration: none; transition: color .2s ease; }
.jr-featured-title a:hover{ color: var(--pa-deep); }
.jr-featured-dek{
margin: 0;
font-size: 1.02rem;
line-height: 1.6;
color: var(--ink-2);
}
.jr-read-link{
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
margin-top: 4px;
font-weight: 700;
font-size: .96rem;
color: var(--pa-deep);
text-decoration: none;
padding: 10px 4px;
transition: gap .2s ease, color .2s ease;
}
.jr-read-link svg{ transition: transform .2s ease; }
.jr-read-link:hover{ gap: 12px; }
.jr-read-link:hover svg{ transform: translateX(2px); }
/* ---------------- GRID ---------------- */
.jr-grid-section{ padding-top: 24px; }
.jr-grid-head{ margin-bottom: 40px; max-width: 720px; }
.jr-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}
.jr-card{
display: flex;
flex-direction: column;
border-radius: 24px;
border: 1px solid var(--line);
overflow: hidden;
transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.jr-card:hover{
transform: translateY(-4px);
box-shadow: 0 22px 48px color-mix(in srgb, var(--pa) 11%, transparent);
border-color: color-mix(in srgb, var(--pa) 28%, transparent);
}
.jr-card-media{
display: block;
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.jr-card-media img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.jr-card:hover .jr-card-media img{ transform: scale(1.05); }
.jr-card-body{
display: flex;
flex-direction: column;
gap: 12px;
padding: 22px 22px 24px;
flex: 1;
}
.jr-card-title{
margin: 2px 0 0;
font-size: 1.16rem;
line-height: 1.28;
letter-spacing: -.01em;
font-weight: 800;
}
.jr-card-title a{ color: var(--ink); text-decoration: none; transition: color .2s ease; }
.jr-card-title a:hover{ color: var(--pa-deep); }
.jr-card-dek{
margin: 0;
font-size: .94rem;
line-height: 1.55;
color: var(--ink-2);
}
.jr-card .jr-meta{ margin-top: auto; padding-top: 6px; }
/* ---------------- NEWSLETTER ---------------- */
.jr-news-section{ padding-top: 56px; }
.jr-news{
display: grid;
grid-template-columns: 1.1fr 1fr;
align-items: center;
gap: 36px;
padding: clamp(32px, 4vw, 56px);
border-radius: 28px;
border: 1px solid color-mix(in srgb, var(--pa) 22%, transparent);
background:
radial-gradient(120% 140% at 100% 0%, var(--pa-soft) 0%, transparent 60%),
var(--glass-strong);
}
.jr-news-title{
margin: 0;
font-size: clamp(1.6rem, 3vw, 2.3rem);
font-weight: 800;
letter-spacing: -.015em;
line-height: 1.12;
color: var(--ink);
}
.jr-news-sub{
margin: 14px 0 0;
font-size: 1.02rem;
line-height: 1.6;
color: var(--ink-2);
}
.jr-news-form{ width: 100%; }
.jr-news-field{
display: flex;
align-items: center;
gap: 8px;
padding: 6px 6px 6px 18px;
border-radius: 999px;
border: 1px solid var(--line);
}
.jr-news-input{
font-family: inherit;
font-size: .96rem;
color: var(--ink);
background: transparent;
border: 0;
outline: none;
padding: 13px 8px;
flex: 1;
min-width: 0;
-webkit-appearance: none;
appearance: none;
border-radius: 999px;
}
.jr-news-input::placeholder{ color: var(--ink-3); }
.jr-news-btn{
font-family: inherit;
font-size: .94rem;
font-weight: 700;
color: #fff;
background: var(--pa);
border: 0;
border-radius: 999px;
padding: 13px 26px;
cursor: pointer;
white-space: nowrap;
transition: transform .2s ease, background .25s ease, box-shadow .25s ease;
box-shadow: 0 10px 24px color-mix(in srgb, var(--pa) 35%, transparent);
}
.jr-news-btn:hover{ transform: translateY(-1px); background: var(--pa-deep); }
.jr-news-btn:focus-visible{ outline: 2px solid var(--pa-deep); outline-offset: 3px; }
.jr-news-note{
margin: 12px 4px 0;
font-size: .8rem;
line-height: 1.5;
color: var(--ink-3);
}
/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 980px){
.jr-featured{ grid-template-columns: 1fr; }
.jr-featured-media{ min-height: 240px; aspect-ratio: 16 / 9; }
.jr-grid{ grid-template-columns: repeat(2, 1fr); }
.jr-news{ grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 760px){
.jr-hero{ padding-top: 116px; }
.jr-hero-tools{ flex-direction: column; align-items: stretch; }
.jr-search{ width: 100%; }
.jr-grid{ grid-template-columns: 1fr; gap: 20px; }
.jr-featured-body{ padding: 28px 22px 30px; }
.jr-news{ padding: 28px 22px; }
.jr-news-field{ flex-wrap: wrap; padding: 10px; border-radius: 22px; }
.jr-news-input{ width: 100%; padding: 12px 8px; }
.jr-news-btn{ width: 100%; justify-content: center; }
}
@media (max-width: 380px){
.jr-chip{ padding: 9px 15px; font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce){
.jr-featured:hover .jr-featured-media img,
.jr-card:hover .jr-card-media img,
.jr-card:hover,
.jr-chip:hover,
.jr-news-btn:hover{ transform: none; }
.jr-featured-media img,
.jr-card-media img,
.jr-card,
.jr-chip,
.jr-news-btn,
.jr-read-link{ transition: none; }
}
/* ---------- Press ---------- */
.pr-section{
--pa: var(--color-pine);
--pa-deep: var(--color-pine-deep);
--pa-soft: var(--color-pine-soft);
--pa-ink: #ffffff; /* constant white foreground for accent buttons; intentionally not theme-flipped to preserve contrast on pine */
}
/* ---------- shared bits ---------- */
.pr-eyebrow{
display:inline-block;
font-size:.72rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
color:var(--pa-deep);
padding:7px 14px; border-radius:999px;
background:var(--pa-soft);
border:1px solid color-mix(in srgb, var(--pa) 28%, transparent);
}
.pr-eyebrow-line{ margin-bottom:14px; }
.pr-btn{
display:inline-flex; align-items:center; gap:9px;
font-weight:700; font-size:.98rem; line-height:1;
padding:14px 22px; border-radius:999px;
text-decoration:none; cursor:pointer;
border:1px solid transparent;
transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.pr-btn svg{ flex:0 0 auto; }
.pr-btn-primary{
background:var(--pa); color:var(--pa-ink);
box-shadow:0 10px 26px -12px color-mix(in srgb, var(--pa) 70%, transparent);
}
.pr-btn-primary:hover{
transform:translateY(-2px);
background:var(--pa-deep);
box-shadow:0 16px 34px -12px color-mix(in srgb, var(--pa) 75%, transparent);
}
.pr-btn-ghost{
color:var(--ink);
border-color:var(--line);
background:var(--glass);
}
.pr-btn-ghost:hover{
transform:translateY(-2px);
border-color:color-mix(in srgb, var(--pa) 45%, var(--line));
color:var(--pa-deep);
}
/* ---------- HERO ---------- */
.pr-hero{ padding-top:128px; padding-bottom:96px; }
.pr-hero-inner{ max-width:780px; }
.pr-hero-title{
margin:18px 0 0;
font-size:clamp(2.6rem, 6vw, 4.4rem);
line-height:1.02; font-weight:800; letter-spacing:-.02em;
color:var(--ink);
}
.pr-hero-accent{
font-family:"Instrument Serif", Georgia, serif;
font-weight:400; font-style:italic; letter-spacing:0;
background:linear-gradient(120deg, var(--color-pine) 0%, var(--color-pine-300) 55%, var(--color-lagoon) 110%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.pr-hero-sub{
margin:22px 0 0;
font-size:clamp(1.02rem, 1.4vw, 1.22rem);
line-height:1.6; color:var(--ink-2); max-width:640px;
}
.pr-hero-sub strong{ color:var(--pa-deep); font-weight:700; }
.pr-hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.pr-hero-meta{
list-style:none; margin:42px 0 0; padding:0;
display:flex; flex-wrap:wrap; gap:14px;
}
.pr-hero-meta li{
display:flex; flex-direction:column; gap:4px;
padding:14px 20px; border-radius:18px;
background:var(--bg-1); border:1px solid var(--line);
min-width:160px;
}
.pr-hero-meta strong{ font-size:1.04rem; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.pr-hero-meta span{ font-size:.82rem; color:var(--ink-3); }
/* ---------- LOGOS ---------- */
.pr-logos{ padding-top:24px; padding-bottom:72px; }
.pr-logos-label{
text-align:center; margin:0 0 26px;
font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
color:var(--ink-3);
}
.pr-logos-row{
display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
}
.pr-logo-pill{
padding:12px 22px; border-radius:999px;
font-weight:700; font-size:.96rem; letter-spacing:.01em;
color:var(--ink-2);
background:var(--bg-1);
border:1px solid var(--line);
transition:color .25s ease, border-color .25s ease, transform .25s ease, background .25s ease;
}
.pr-logo-pill:hover{
color:var(--pa-deep);
border-color:color-mix(in srgb, var(--pa) 40%, var(--line));
background:var(--pa-soft);
transform:translateY(-2px);
}
/* ---------- COVERAGE ---------- */
.pr-coverage{ padding-top:48px; padding-bottom:96px; }
.pr-head{ max-width:680px; margin:0 0 40px; }
.pr-coverage-title{
margin:14px 0 0;
font-size:clamp(1.9rem, 3.4vw, 2.7rem); line-height:1.08;
font-weight:800; letter-spacing:-.02em; color:var(--ink);
}
.pr-coverage-lead{
margin:14px 0 0; font-size:1.06rem; line-height:1.55; color:var(--ink-2); max-width:560px;
}
.pr-coverage-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.pr-cov{
display:grid;
grid-template-columns:auto 1fr auto auto;
align-items:center; gap:22px;
padding:22px 26px; border-radius:22px;
border:1px solid var(--line);
transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.pr-cov:hover{
transform:translateY(-3px);
border-color:color-mix(in srgb, var(--pa) 38%, var(--line));
box-shadow:0 18px 40px -22px color-mix(in srgb, var(--pa) 60%, transparent);
}
.pr-chip{
display:inline-flex; align-items:center;
font-size:.74rem; font-weight:800; letter-spacing:.04em;
padding:7px 13px; border-radius:12px; white-space:nowrap;
}
.pr-chip-article{ background:var(--color-pine-soft); color:var(--color-pine-deep); }
.pr-chip-interview{ background:color-mix(in srgb, var(--color-lagoon) 15%, transparent); color:var(--color-lagoon-deep); }
.pr-chip-podcast{ background:color-mix(in srgb, var(--color-sunflower) 22%, transparent); color:var(--color-sunflower-deep); }
.pr-chip-event{ background:color-mix(in srgb, var(--color-pine) 18%, transparent); color:var(--color-pine-deep); }
.pr-cov-body{ min-width:0; }
.pr-cov-outlet{
display:block; font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
color:var(--ink-3); margin-bottom:5px;
}
.pr-cov-headline{
margin:0; font-size:1.08rem; line-height:1.35; font-weight:700; color:var(--ink);
letter-spacing:-.01em;
}
.pr-cov-date{ font-size:.86rem; color:var(--ink-3); white-space:nowrap; }
.pr-cov-link{
display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
font-weight:700; font-size:.92rem; text-decoration:none;
color:var(--pa-deep);
padding:9px 16px; border-radius:999px;
border:1px solid color-mix(in srgb, var(--pa) 30%, transparent);
background:var(--pa-soft);
transition:background .25s ease, transform .25s ease, color .25s ease;
}
.pr-cov-link span{ transition:transform .25s ease; }
.pr-cov-link:hover{ background:var(--pa); color:var(--pa-ink); transform:translateY(-1px); }
.pr-cov-link:hover span{ transform:translate(2px,-2px); }
/* ---------- PRESS KIT ---------- */
.pr-kit{ padding-top:24px; padding-bottom:128px; }
.pr-kit-panel{
padding:48px; border-radius:28px;
border:1px solid var(--line);
}
.pr-kit-head{ max-width:640px; }
.pr-kit-title{
margin:0 0 12px;
font-size:clamp(1.7rem, 3vw, 2.4rem); line-height:1.1; font-weight:800; letter-spacing:-.02em; color:var(--ink);
}
.pr-kit-lead{ margin:0; font-size:1.02rem; line-height:1.55; color:var(--ink-2); }
.pr-kit-grid{
margin:32px 0 0;
display:grid; grid-template-columns:repeat(2, 1fr); gap:16px;
}
.pr-asset{
display:flex; flex-direction:column; gap:8px;
padding:24px; border-radius:20px;
text-decoration:none;
background:var(--bg-1); border:1px solid var(--line);
transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.pr-asset:hover{
transform:translateY(-3px);
border-color:color-mix(in srgb, var(--pa) 42%, var(--line));
box-shadow:0 18px 40px -24px color-mix(in srgb, var(--pa) 65%, transparent);
}
.pr-asset-ico{
display:inline-flex; align-items:center; justify-content:center;
width:46px; height:46px; border-radius:14px; margin-bottom:4px;
color:var(--pa-deep);
background:var(--pa-soft);
border:1px solid color-mix(in srgb, var(--pa) 26%, transparent);
}
.pr-asset-name{ font-weight:800; font-size:1.06rem; color:var(--ink); letter-spacing:-.01em; }
.pr-asset-meta{ font-size:.88rem; line-height:1.45; color:var(--ink-3); }
.pr-contact{
margin-top:32px; padding-top:32px;
border-top:1px solid var(--line);
display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
}
.pr-contact-main{ min-width:0; flex:1 1 320px; }
.pr-contact-eyebrow{
display:block; font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
color:var(--ink-3); margin-bottom:8px;
}
.pr-contact-email{
display:inline-block; text-decoration:none;
font-size:clamp(1.4rem, 2.6vw, 1.9rem); font-weight:800; letter-spacing:-.01em;
color:var(--pa-deep);
border-bottom:2px solid transparent;
transition:border-color .25s ease;
}
.pr-contact-email:hover{ border-color:color-mix(in srgb, var(--pa) 50%, transparent); }
.pr-contact-note{ margin:12px 0 0; font-size:.96rem; line-height:1.55; color:var(--ink-2); max-width:480px; }
.pr-contact-note strong{ color:var(--ink); font-weight:700; }
.pr-contact-cta{ flex:0 0 auto; }
/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
.pr-btn, .pr-logo-pill, .pr-cov, .pr-asset, .pr-cov-link, .pr-cov-link span, .pr-contact-email{
transition:none !important;
}
.pr-btn:hover, .pr-logo-pill:hover, .pr-cov:hover, .pr-asset:hover, .pr-cov-link:hover{
transform:none !important;
}
}
/* ---------- RESPONSIVE ---------- */
@media (max-width:760px){
.pr-hero{ padding-top:104px; padding-bottom:72px; }
.pr-hero-actions{ gap:10px; }
.pr-hero-actions .pr-btn{ flex:1 1 auto; justify-content:center; }
.pr-hero-meta li{ flex:1 1 100%; min-width:0; }
.pr-coverage{ padding-bottom:72px; }
.pr-cov{
grid-template-columns:auto 1fr;
grid-template-areas:
"chip date"
"body body"
"link link";
gap:12px 16px;
padding:20px;
}
.pr-cov > .pr-chip{ grid-area:chip; }
.pr-cov-body{ grid-area:body; }
.pr-cov-date{ grid-area:date; justify-self:end; align-self:center; }
.pr-cov-link{ grid-area:link; justify-self:start; }
.pr-kit{ padding-bottom:88px; }
.pr-kit-panel{ padding:28px 22px; border-radius:24px; }
.pr-kit-grid{ grid-template-columns:1fr; }
.pr-contact{ flex-direction:column; align-items:flex-start; gap:20px; }
.pr-contact-cta{ width:100%; justify-content:center; }
}
@media (max-width:380px){
.pr-kit-panel{ padding:22px 16px; }
.pr-asset{ padding:20px; }
}
/* ---------- StudyCases ---------- */
.sc-section{
--pa: var(--color-sunflower);
--pa-deep: var(--color-sunflower-deep);
--pa-soft: var(--color-sunflower-soft);
--pa-tint: var(--color-sunflower-tint);
position: relative;
}
/* ---------- shared section heads ---------- */
.sc-eyebrow,
.sc-section-eyebrow{
display: inline-block;
font-size: .76rem;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--pa-deep);
background: var(--pa-soft);
padding: 7px 16px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--pa) 32%, transparent);
}
.sc-sectionhead{ max-width: 760px; margin: 0 auto 44px; text-align: center; }
.sc-section-title{
margin: 18px 0 0;
font-size: clamp(1.9rem, 4.4vw, 3rem);
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--ink);
}
.sc-section-sub{
margin: 16px auto 0;
max-width: 560px;
color: var(--ink-2);
font-size: 1.05rem;
line-height: 1.6;
}
/* ---------- HERO ---------- */
.sc-hero{ padding-top: clamp(96px, 16vh, 168px); }
.sc-hero-inner{ max-width: 820px; margin-inline: auto; text-align: center; }
.sc-hero-title{
margin: 22px 0 0;
font-size: clamp(2.5rem, 7vw, 5rem);
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--ink);
font-weight: 800;
}
.sc-hero-sub{
margin: 24px auto 0;
max-width: 640px;
font-size: clamp(1.05rem, 2.2vw, 1.22rem);
line-height: 1.62;
color: var(--ink-2);
}
.sc-stats{
margin-top: clamp(44px, 7vw, 72px);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.sc-stat{
border-radius: 24px;
padding: 30px 26px;
text-align: center;
border: 1px solid var(--line);
}
.sc-stat-num{
display: block;
font-size: clamp(2.4rem, 5vw, 3.4rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
color: var(--pa-deep);
}
.sc-stat-label{
display: block;
margin-top: 12px;
font-size: .98rem;
color: var(--ink-2);
line-height: 1.45;
}
/* ---------- FEATURED ---------- */
.sc-feature{
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 0;
border-radius: 28px;
overflow: hidden;
border: 1px solid var(--line);
box-shadow: 0 40px 90px color-mix(in srgb, var(--pa) 14%, transparent);
}
/* corner-hardening: media + img carry their own radius so they are never
sharp even if the parent overflow:hidden clip is ever removed. */
.sc-feature-media{ position: relative; min-height: 420px; border-radius: 28px 0 0 28px; overflow: hidden; }
.sc-feature-img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: inherit;
}
.sc-feature-media::after{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(150deg, color-mix(in srgb, var(--pa) 42%, transparent) 0%, transparent 60%);
mix-blend-mode: multiply;
}
.sc-feature-chip{
position: absolute;
left: 18px;
bottom: 18px;
z-index: 2;
font-size: .8rem;
font-weight: 700;
color: var(--role-exminder-ink, #1a1505);
background: var(--pa);
padding: 8px 15px;
border-radius: 999px;
}
.sc-feature-body{ padding: clamp(28px, 4vw, 44px); }
.sc-feature-head{ display: flex; align-items: center; gap: 14px; }
.sc-feature-logo,
.sc-card-logo{
display: grid;
place-items: center;
flex: none;
font-weight: 800;
letter-spacing: .02em;
color: var(--role-exminder-ink, #1a1505);
background: var(--pa);
border-radius: 14px;
}
.sc-feature-logo{ width: 52px; height: 52px; font-size: 1.05rem; }
.sc-feature-name{ margin: 0; font-size: 1.5rem; color: var(--ink); letter-spacing: -0.01em; }
.sc-feature-tag{ margin: 4px 0 0; font-size: .95rem; color: var(--ink-3); }
.sc-feature-outcome{
margin: 26px 0 0;
font-family: "Instrument Serif", Georgia, serif;
font-size: clamp(1.5rem, 3.4vw, 2.05rem);
line-height: 1.18;
color: var(--ink);
letter-spacing: -0.01em;
}
.sc-feature-lede{ margin: 16px 0 0; color: var(--ink-2); line-height: 1.6; font-size: 1.02rem; }
.sc-feature-stats{
margin: 28px 0 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
padding: 22px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.sc-feature-stat-num{
display: block;
font-size: clamp(1.6rem, 4vw, 2.1rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
color: var(--pa-deep);
}
.sc-feature-stat-label{ display: block; margin-top: 8px; font-size: .86rem; color: var(--ink-2); line-height: 1.4; }
.sc-tags{ list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sc-tag{
font-size: .82rem;
font-weight: 600;
color: var(--ink-2);
background: var(--glass);
border: 1px solid var(--line);
padding: 6px 13px;
border-radius: 12px;
}
.sc-feature-link,
.sc-card-link{
display: inline-flex;
align-items: center;
gap: 9px;
font-weight: 700;
text-decoration: none;
color: var(--pa-deep);
}
.sc-feature-link{ margin-top: 28px; font-size: 1.05rem; }
.sc-feature-link svg,
.sc-card-link svg{ transition: transform .25s ease; }
.sc-feature-link:hover svg,
.sc-card-link:hover svg{ transform: translateX(4px); }
/* ---------- CASES GRID ---------- */
.sc-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.sc-card{
display: flex;
flex-direction: column;
border-radius: 24px;
padding: 26px;
border: 1px solid var(--line);
transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.sc-card:hover{
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--pa) 50%, var(--line));
box-shadow: 0 28px 60px color-mix(in srgb, var(--pa) 16%, transparent);
}
.sc-card-head{ display: flex; align-items: center; gap: 12px; }
.sc-card-logo{ width: 42px; height: 42px; font-size: .92rem; border-radius: 12px; }
.sc-card-name{ margin: 0; font-size: 1.2rem; color: var(--ink); letter-spacing: -0.01em; }
.sc-card-outcome{ margin: 18px 0 0; color: var(--ink-2); line-height: 1.55; font-size: .98rem; flex: 1; }
.sc-card-metric{
margin: 20px 0 0;
display: flex;
align-items: baseline;
gap: 10px;
padding: 14px 16px;
border-radius: 16px;
background: var(--pa-soft);
border: 1px solid color-mix(in srgb, var(--pa) 26%, transparent);
}
.sc-card-metric-num{
font-size: 1.55rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--pa-deep);
line-height: 1;
}
.sc-card-metric-label{ font-size: .85rem; color: var(--ink-2); }
.sc-card .sc-tags{ margin-top: 16px; }
.sc-card-link{ margin-top: 20px; font-size: .96rem; align-self: flex-start; }
/* ---------- CTA BAND ---------- */
.sc-cta-panel{
position: relative;
overflow: hidden;
text-align: center;
border-radius: 32px;
padding: clamp(44px, 7vw, 76px) clamp(24px, 5vw, 56px);
border: 1px solid color-mix(in srgb, var(--pa) 30%, transparent);
background:
radial-gradient(120% 140% at 50% 0%, var(--pa-soft) 0%, transparent 58%),
var(--glass-strong, var(--glass));
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.sc-cta-eyebrow{
display: inline-block;
font-family: "Instrument Serif", Georgia, serif;
font-style: italic;
font-size: 1.05rem;
color: var(--pa-deep);
}
.sc-cta-title{
margin: 12px 0 0;
font-size: clamp(2rem, 5.4vw, 3.4rem);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink);
font-weight: 800;
}
.sc-cta-sub{
margin: 18px auto 0;
max-width: 560px;
color: var(--ink-2);
font-size: 1.08rem;
line-height: 1.6;
}
.sc-cta-sub strong{ color: var(--pa-deep); font-weight: 700; }
.sc-cta-actions{
margin: 32px auto 0;
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
.sc-btn{
display: inline-flex;
align-items: center;
gap: 9px;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
padding: 15px 26px;
border-radius: 999px;
transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.sc-btn svg{ transition: transform .25s ease; }
.sc-btn-primary{
color: var(--role-exminder-ink, #1a1505);
background: var(--pa);
box-shadow: 0 16px 34px color-mix(in srgb, var(--pa) 36%, transparent);
}
.sc-btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 22px 44px color-mix(in srgb, var(--pa) 44%, transparent); }
.sc-btn-primary:hover svg{ transform: translateX(4px); }
.sc-btn-ghost{
color: var(--ink);
background: var(--glass);
border: 1px solid var(--line);
}
.sc-btn-ghost:hover{ transform: translateY(-2px); border-color: color-mix(in srgb, var(--pa) 50%, var(--line)); }
/* ---------- focus visibility ---------- */
.sc-feature-link:focus-visible,
.sc-card-link:focus-visible,
.sc-btn:focus-visible{
outline: 3px solid var(--pa-deep);
outline-offset: 3px;
border-radius: 14px;
}
/* ---------- responsive ---------- */
@media (max-width: 980px){
.sc-feature{ grid-template-columns: 1fr; }
.sc-feature-media{ min-height: 280px; border-radius: 28px 28px 0 0; }
.sc-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px){
.sc-stats{ grid-template-columns: 1fr; gap: 14px; }
.sc-grid{ grid-template-columns: 1fr; }
.sc-feature-stats{ grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sc-feature-body{ padding: 26px 22px; }
.sc-cta-actions{ flex-direction: column; }
.sc-btn{ width: 100%; justify-content: center; }
.sc-sectionhead{ margin-bottom: 32px; }
}
@media (max-width: 380px){
.sc-feature-stats{ grid-template-columns: 1fr; }
.sc-feature-stat{ display: flex; align-items: baseline; gap: 10px; }
.sc-feature-stat-num{ font-size: 1.5rem; }
.sc-feature-stat-label{ margin-top: 0; }
}
@media (prefers-reduced-motion: reduce){
.sc-card,
.sc-btn,
.sc-btn svg,
.sc-feature-link svg,
.sc-card-link svg{ transition: none; }
.sc-card:hover,
.sc-btn:hover{ transform: none; }
}
/* ============================================================
PHASE 35 — fluid, seamless animated background (all pages)
------------------------------------------------------------
One continuous .aurora field flows under EVERY section. The
light theme used to paint opaque full-bleed section bands
(--bg-0/--bg-1/--bg-2) on top of the aurora, which created
the hard horizontal seams. We remove those bands so the
single animated field shows through, exactly like dark theme
already does. Motion = slow gradient flow + drifting blobs
(injected by motion.js) + sand grains + film grain.
============================================================ */
/* ---- Plain-white base — bold floating colour pops do the work (.aurora-blob) ---- */
.aurora{ background: transparent; }
[data-theme="dark"] .aurora{ background: transparent; }
/* big pseudo-blobs stay off; motion.js injects .aurora-blob divs + sand canvas */
.aurora::before, .aurora::after{ display:none !important; }
.aurora .bg-orbs{ display:none !important; }
/* ---- Seamless sections: drop opaque full-bleed bands so the field
flows continuously under them (dark theme already did this). ---- */
.paths-section,
.loop-section,
.section:nth-of-type(even),
.marquee{ background: transparent !important; }
/* marquee keeps a hairline rhythm instead of a solid panel */
.marquee{
border-top: 1px solid color-mix(in srgb, var(--ink) 7%, transparent) !important;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent) !important;
}
/* melt the cross-page semantic tints into the field (no hard edges) */
.section-problem{ background: linear-gradient(135deg, color-mix(in srgb, var(--yellow) 9%, transparent), color-mix(in srgb, var(--teal) 9%, transparent)) !important; }
.section-proof{ background: linear-gradient(135deg, color-mix(in srgb, var(--green) 9%, transparent), color-mix(in srgb, var(--yellow) 9%, transparent)) !important; }
@media (prefers-reduced-motion: reduce){
.aurora{ animation: none !important; }
}
/* ============================================================
PHASE 36 — Hero experience carousel (.xpc) + "Experience" bridge
============================================================ */
.xpc{ position:relative; width:100%; max-width:560px; margin:6px auto 0; perspective:1500px; }
.xpc-viewport{ position:relative; overflow:visible; }
.xpc-track{ position:relative; margin:0; padding:0; list-style:none; transform-style:preserve-3d; min-height:470px; transition:height .4s ease; }
.xpc-slide{ position:absolute; top:0; left:50%; width:340px; margin-left:-170px; will-change:transform, opacity;
transition:transform .6s cubic-bezier(.35,0,.2,1), opacity .6s ease; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.xpc-card{ background:#fff; border:1px solid var(--line); border-radius:26px; overflow:hidden;
box-shadow:0 30px 70px -34px rgba(0,0,0,.45); text-align:left; }
[data-theme="dark"] .xpc-card{ background:rgba(255,255,255,.05); }
/* photo */
.xpc-photo{ position:relative; aspect-ratio:16/10; padding:16px; display:flex; flex-direction:column;
justify-content:space-between; background-size:cover; background-position:center; }
.xpc-photo::after{ content:''; position:absolute; inset:0; z-index:0;
background:linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.04) 42%, rgba(0,0,0,.5) 100%); }
.xpc-photo--a{ background-image:linear-gradient(135deg, var(--teal), var(--blue)); }
.xpc-photo--b{ background-image:linear-gradient(135deg, var(--yellow), var(--green)); }
.xpc-photo--c{ background-image:linear-gradient(135deg, var(--green), var(--teal)); }
.xpc-title{ position:relative; z-index:1; order:0; margin:0; color:#fff; -webkit-text-fill-color:#fff; font-size:18px; line-height:1.18;
font-weight:800; text-transform:uppercase; letter-spacing:.005em; text-shadow:0 2px 16px rgba(0,0,0,.6); max-width:92%; }
.xpc-tag{ position:relative; z-index:1; order:2; align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; -webkit-text-fill-color:#fff;
background:rgba(0,0,0,.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:6px 12px; border-radius:999px; }
.xpc-tag svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* info */
.xpc-info{ padding:16px 18px 18px; }
.xpc-author{ display:flex; align-items:center; gap:12px; }
.xpc-ava{ position:relative; flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
font-weight:800; font-size:14px; color:var(--accent-1-ink); background:var(--accent-grad); }
.xpc-verified{ position:absolute; right:-5px; bottom:-5px; width:18px; height:18px; border-radius:50%;
background:var(--teal); display:grid; place-items:center; border:2px solid #fff; }
[data-theme="dark"] .xpc-verified{ border-color:#0f1330; }
.xpc-verified svg{ width:10px; height:10px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.xpc-id{ display:flex; flex-direction:column; min-width:0; }
.xpc-name{ font-weight:700; font-size:14.5px; color:var(--ink); line-height:1.2; }
.xpc-profile{ font-size:12.5px; color:var(--ink-2); text-decoration:underline; width:max-content; }
.xpc-role{ font-size:12px; color:var(--ink-3); margin-top:1px; }
.xpc-meta{ display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin:14px 0; padding-top:14px; border-top:1px solid var(--line); }
.xpc-mi{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); font-weight:600; }
.xpc-mi svg{ flex:0 0 auto; width:17px; height:17px; fill:none; stroke:var(--teal); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.xpc-explore{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px;
border-radius:14px; background:var(--yellow); color:#0B2A2A; font-weight:800; font-size:13.5px;
letter-spacing:.06em; text-transform:uppercase; text-decoration:none; transition:transform .2s, filter .2s; }
.xpc-explore:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.xpc-explore svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* nav + dots */
.xpc-nav{ position:absolute; top:33%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%;
border:1px solid var(--line); background:var(--glass-strong); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
display:grid; place-items:center; cursor:pointer; z-index:4; color:var(--ink); transition:transform .2s, background .2s; }
.xpc-nav:hover{ background:#fff; transform:translateY(-50%) scale(1.07); }
[data-theme="dark"] .xpc-nav:hover{ background:rgba(255,255,255,.12); }
.xpc-prev{ left:-12px; }
.xpc-next{ right:-12px; }
.xpc-nav svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.xpc-dots{ display:flex; justify-content:center; gap:8px; margin-top:14px; }
.xpc-dot{ width:8px; height:8px; border-radius:999px; border:0; padding:0; background:var(--ink-3); opacity:.35;
cursor:pointer; transition:opacity .25s, transform .25s, background .25s, width .25s; }
.xpc-dot.is-active{ opacity:1; background:var(--accent-2); width:22px; }
@media (max-width:760px){
.xpc{ max-width:100%; perspective:1100px; }
.xpc-slide{ width:80vw; margin-left:-40vw; }
.xpc-prev{ left:0; } .xpc-next{ right:0; }
}
@media (prefers-reduced-motion: reduce){ .xpc-slide{ transition:none; } }
/* ---- "Experience" bridge section (both flows) ---- */
.xexp-section{ text-align:center; padding-block:clamp(64px,9vw,128px); }
.xexp-kicker{ font-size:13px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin:0 0 8px; }
.xexp-word{ margin:0; font-weight:300 !important; line-height:.92 !important; letter-spacing:-.02em !important; font-size:clamp(64px,12vw,190px) !important; white-space:nowrap; max-width:100%;
background:linear-gradient(100deg, var(--teal) 0%, var(--yellow) 50%, var(--green) 100%);
background-size:220% auto; -webkit-background-clip:text; background-clip:text;
color:transparent; -webkit-text-fill-color:transparent; animation:xexp-shine 9s ease-in-out infinite; }
@keyframes xexp-shine{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.xexp-lead{ max-width:48ch; margin:20px auto 0; font-size:clamp(16px,2vw,19px); line-height:1.55; color:var(--ink-2); }
@media (prefers-reduced-motion: reduce){ .xexp-word{ animation:none; } }
/* ============================================================
PHASE 37 — sliding 3D experience coverflow (.xpc-stage)
Auto-advancing, infinite loop: centre tile flat & prominent,
neighbours angled back in perspective, far tiles fade out.
============================================================ */
.xpc{ position:relative; width:100vw; max-width:100vw; left:50%; margin-left:-50vw; margin-top:20px; }
.shero-stage{ max-width:none; }
.xpc-stage{ position:relative; height:430px; }
.xpc-tile{ position:absolute; top:0; left:50%; width:248px; margin-left:-124px; border-radius:26px;
overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:0 34px 70px -32px rgba(0,0,0,.45);
transition:transform .6s cubic-bezier(.35,0,.2,1), opacity .5s ease; will-change:transform, opacity;
cursor:pointer; transform-origin:bottom center; text-align:left; display:flex; flex-direction:column; }
[data-theme="dark"] .xpc-tile{ background:rgba(255,255,255,.05); }
.xpc-photo{ position:relative; aspect-ratio:1/1; flex:none; padding:0 !important; overflow:hidden; display:block; }
.xpc-photo::after{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.12), transparent 38%); }
.xpc-badge{ position:absolute; z-index:1; top:10px; left:10px; font-size:10px; font-weight:800; letter-spacing:.06em;
text-transform:uppercase; color:#fff; background:rgba(0,0,0,.42); padding:4px 9px; border-radius:999px; }
.xpc-ci{ flex:none; padding:12px 14px 16px; position:relative; z-index:2; }
.xpc-cn{ font-size:15px; font-weight:800; color:var(--ink); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xpc-cr{ font-size:12px; color:var(--ink-3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xpc-cd{ display:flex; gap:14px; margin-top:8px; font-size:12px; font-weight:700; color:var(--ink-2); }
.xpc-ph--a{ background:linear-gradient(150deg, var(--teal), var(--blue)); }
.xpc-ph--b{ background:linear-gradient(150deg, var(--yellow), var(--green)); }
.xpc-ph--c{ background:linear-gradient(150deg, var(--teal), var(--green)); }
.xpc-ph--d{ background:linear-gradient(150deg, var(--green), var(--yellow)); }
.xpc-ph--e{ background:linear-gradient(150deg, var(--yellow), var(--teal)); }
.xpc-tile-ico{ position:relative; z-index:1; display:grid; place-items:center; width:48px; height:48px; border-radius:15px;
background:rgba(255,255,255,.22); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.xpc-tile-ico svg{ width:24px; height:24px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.xpc-cap{ display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:22px; text-align:center; }
.xpc-cap-num{ color:var(--accent-1-deep); font-weight:800; font-size:13px; letter-spacing:.04em; }
.xpc-cap-t{ font-size:16px; color:var(--ink); font-weight:700; }
.xpc-dots{ display:flex; justify-content:center; gap:7px; margin-top:14px; }
.xpc-dot{ width:7px; height:7px; border-radius:999px; border:0; padding:0; background:var(--ink-3); opacity:.35;
cursor:pointer; transition:opacity .25s, background .25s, width .25s; }
.xpc-dot.is-active{ opacity:1; background:var(--accent-2); width:20px; }
@media (max-width:760px){
.xpc{ max-width:100%; } .xpc-stage{ height:264px; perspective:1100px; }
.xpc-tile{ width:150px; height:240px; margin-left:-75px; }
}
/* ============================================================
PHASE 38 — hourglass button (by logo) + "time's up" popup
============================================================ */
.hg-btn{ position:fixed; left:20px; bottom:88px; z-index:61; display:grid; place-items:center;
width:56px; height:56px; border:0; border-radius:50%; background:var(--glass-strong);
border:1px solid var(--line); box-shadow:0 14px 30px -14px rgba(0,0,0,.35);
cursor:pointer; padding:0; transition:transform .2s; }
.hg-btn:hover{ transform:translateY(-2px) scale(1.05); }
.hg-svg{ width:24px; height:32px; overflow:visible; }
.hg-btn:hover .hg-svg{ filter: drop-shadow(0 0 7px color-mix(in srgb, var(--teal) 55%, transparent)); }
.hg-sand-top{ transform-box:fill-box; transform-origin:center bottom; animation: hg-drain 18s linear infinite; }
.hg-sand-bot{ transform-box:fill-box; transform-origin:center bottom; transform:scaleY(0); animation: hg-fill 18s linear infinite; }
.hg-stream{ animation: hg-stream 1.1s ease-in-out infinite; }
@keyframes hg-drain{ 0%{transform:scaleY(1)} 90%,100%{transform:scaleY(0)} }
@keyframes hg-fill{ 0%{transform:scaleY(0)} 90%,100%{transform:scaleY(1)} }
@keyframes hg-stream{ 0%,100%{opacity:.2} 50%{opacity:.9} }
.txt-grad-tri{ background:linear-gradient(100deg, var(--teal), var(--green) 50%, var(--yellow));
-webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.hg-modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px; }
.hg-modal[hidden]{ display:none; }
.hg-modal-scrim{ position:absolute; inset:0; background:rgba(6,10,18,.55);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity .3s ease; }
.hg-modal.is-open .hg-modal-scrim{ opacity:1; }
.hg-modal-card{ position:relative; z-index:1; width:min(560px, 100%); background:var(--bg-0);
border:1px solid var(--line); border-radius:28px; padding:34px 32px 32px; text-align:center;
box-shadow:0 50px 110px -30px rgba(0,0,0,.5); transform:translateY(16px) scale(.96); opacity:0;
transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease; }
.hg-modal.is-open .hg-modal-card{ transform:none; opacity:1; }
.hg-modal-x{ position:absolute; top:14px; right:16px; width:34px; height:34px; border:0; border-radius:50%;
background:color-mix(in srgb, var(--ink) 6%, transparent); color:var(--ink-2); font-size:22px; line-height:1; cursor:pointer; }
.hg-modal-x:hover{ background:color-mix(in srgb, var(--ink) 12%, transparent); color:var(--ink); }
.hg-modal-ico{ width:42px; height:56px; overflow:visible; margin:0 auto 6px; display:block; }
.hg-modal-kick{ margin:6px 0 4px; font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.hg-modal-title{ margin:0 0 22px; font-size:clamp(28px,4vw,42px); font-weight:900; letter-spacing:-.02em; color:var(--ink); }
.hg-modal-opts{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .hg-modal-opts{ grid-template-columns:1fr; } }
.hg-modal-opt{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; text-align:left;
padding:20px; border-radius:20px; border:1px solid var(--line); text-decoration:none;
background:color-mix(in srgb, var(--ink) 2%, transparent); transition:transform .2s, border-color .2s, background .2s; }
.hg-modal-opt:hover{ transform:translateY(-3px); }
.hg-opt--skill:hover{ border-color:var(--teal); background:color-mix(in srgb, var(--teal) 8%, transparent); }
.hg-opt--company:hover{ border-color:var(--green); background:color-mix(in srgb, var(--green) 8%, transparent); }
.hg-opt-ico{ display:grid; place-items:center; width:44px; height:44px; border-radius:14px; color:#fff; }
.hg-opt--skill .hg-opt-ico{ background:linear-gradient(135deg, var(--teal), var(--blue)); }
.hg-opt--company .hg-opt-ico{ background:linear-gradient(135deg, var(--green), var(--teal)); }
.hg-opt-ico svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.hg-opt-q{ font-size:16px; font-weight:700; color:var(--ink); line-height:1.3; }
.hg-opt-go{ font-size:13px; font-weight:700; color:var(--ink-2); display:inline-flex; gap:6px; align-items:center; }
.hg-opt-go i{ font-style:normal; transition:transform .2s; }
.hg-modal-opt:hover .hg-opt-go i{ transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){ .hg-sand-top,.hg-sand-bot,.hg-stream{ animation:none !important; } }
/* Remove icon badges from experience fan cards */
.xpc-tile-ico{ display:none !important; }
/* Stock photos on experience fan cards */
.xpc-photo .xpc-pic{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* Demo Days section: company flow only */
[data-mode="individual"] #demodays{ display:none !important; }
/* ============================================================
Merge roles → paths (click-to-expand accordion); section gating;
interactive why + stats.
============================================================ */
#roles{ display:none !important; } /* merged into #paths */
#paths .paths-grid{ display:flex !important; gap:18px; align-items:stretch; }
#paths .paths-card{ flex:1 1 0; min-width:0;
transition:flex-grow .55s cubic-bezier(.4,0,.2,1), box-shadow .3s, transform .3s; }
#paths .paths-card.is-expanded{ flex-grow:2.4; }
#paths .paths-card:not(.is-expanded){ transform:scale(.985); }
#paths .paths-card:not(.is-expanded) .paths-card-desc{ opacity:.72; }
@media (max-width:760px){ #paths .paths-grid{ flex-direction:column; } #paths .paths-card{ flex:none; } #paths .paths-card.is-expanded{ flex-grow:1; } }
/* Why section — Company flow only, centered title, interactive rows */
[data-mode="individual"] #why{ display:none !important; }
#why .why-title{ text-align:center !important; }
.why-row{ transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }
.why-row:hover{ transform:translateY(-2px) scale(1.012); box-shadow:0 14px 34px -18px rgba(0,0,0,.28); z-index:1; }
/* Stats — interactive hover pop */
.stats-item{ transition:transform .3s ease; }
.stats-item:hover{ transform:translateY(-5px); }
.stats-figure{ display:inline-block; transition:transform .3s ease, color .3s ease; }
.stats-item:hover .stats-figure{ transform:scale(1.09); color:var(--accent-2-deep); }
/* Loop step 5 (Exminderi) marked optional */
.loop-node-exminder .loop-dot{ border:2px dashed var(--accent-1, #EAC105) !important; }
.loop-step[data-node="5"] .loop-step-num{ border:2px dashed var(--accent-1, #EAC105); }
/* Individual 1:1 marketplace — hidden on the Company flow */
[data-mode="business"] #experiences{ display:none !important; }
/* Force the "De ce Exminds" head fully centered */
#why .why-head{ text-align:center !important; }
#why .why-head > *{ float:none !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; }
#why .why-eyebrow{ display:inline-flex !important; }
/* Role essence line on the path cards */
.paths-card-essence{ margin:10px 0 0; font-size:14px; font-weight:700; line-height:1.45; }
.paths-card--explorer .paths-card-essence{ color:var(--teal); }
.paths-card--exminder .paths-card-essence{ color:var(--color-sunflower-deep, #7E6802); }
.paths-card--company .paths-card-essence{ color:var(--green); }
/* Contact form — wider, less tall */
@media (min-width:900px){
html body .contact-section{ margin-left:auto; margin-right:auto; max-width:1180px; }
html body .contact-grid{ grid-template-columns:0.72fr 1.28fr !important; gap:48px !important; }
}
/* Animated launch when clicking "Pornește pe acest drum" */
.path-launch{ position:fixed; inset:0; z-index:300; opacity:0; pointer-events:none;
background:linear-gradient(135deg, var(--teal), var(--green));
transform:scale(1.06); transition:opacity .5s ease, transform .5s cubic-bezier(.4,0,.2,1); }
.path-launch.is-on{ opacity:1; transform:scale(1); pointer-events:auto; }
.path-launch[data-persona="explorer"]{ background:linear-gradient(135deg, var(--teal), var(--blue)); }
.path-launch[data-persona="exminder"]{ background:linear-gradient(135deg, var(--yellow), var(--green)); }
.path-launch[data-persona="company"]{ background:linear-gradient(135deg, var(--green), var(--teal)); }
.paths-card-cta{ transition:gap .2s, transform .2s; }
.paths-card-cta:hover{ transform:translateX(2px); }
/* ============================================================
For Companies — floating hero photo gallery (rounded, fading, drifting)
============================================================ */
.biz-gallery{ position:relative; width:100%; max-width:560px; aspect-ratio:1/1; margin:0 auto;
-webkit-mask:radial-gradient(125% 120% at 52% 46%, #000 56%, transparent 86%);
mask:radial-gradient(125% 120% at 52% 46%, #000 56%, transparent 86%); }
.biz-gal-img{ position:absolute; border-radius:22px; object-fit:cover;
box-shadow:0 30px 60px -32px rgba(0,80,60,.5); will-change:transform; }
.biz-gal-img.g1{ width:44%; height:56%; top:4%; left:4%; animation:bizfloat-a 9s ease-in-out infinite alternate; }
.biz-gal-img.g2{ width:38%; height:38%; top:0; right:6%; animation:bizfloat-b 11s ease-in-out infinite alternate; }
.biz-gal-img.g3{ width:34%; height:46%; bottom:4%; left:2%; animation:bizfloat-b 10s ease-in-out infinite alternate; }
.biz-gal-img.g4{ width:42%; height:36%; bottom:2%; right:2%; animation:bizfloat-a 12s ease-in-out infinite alternate-reverse; }
.biz-gal-img.g5{ width:27%; height:27%; top:39%; left:39%; animation:bizfloat-c 8s ease-in-out infinite alternate; z-index:2; box-shadow:0 24px 50px -22px rgba(0,80,60,.55); }
@keyframes bizfloat-a{ from{transform:translate(0,0)} to{transform:translate(10px,-14px)} }
@keyframes bizfloat-b{ from{transform:translate(0,0)} to{transform:translate(-12px,10px)} }
@keyframes bizfloat-c{ from{transform:translate(0,0) scale(1)} to{transform:translate(8px,12px) scale(1.05)} }
@media (prefers-reduced-motion: reduce){ .biz-gal-img{ animation:none !important; } }
@media (max-width:900px){ .biz-gallery{ max-width:440px; } }
/* For Companies gallery — symmetric, bigger, fades into bg toward the text (left) */
.biz-gallery{ display:grid !important; grid-template-columns:1fr 1fr; gap:20px; width:100%; max-width:700px;
margin-left:auto; align-items:start; aspect-ratio:auto !important;
-webkit-mask:linear-gradient(98deg, transparent 0%, rgba(0,0,0,.30) 14%, #000 38%, #000 100%) !important;
mask:linear-gradient(98deg, transparent 0%, rgba(0,0,0,.30) 14%, #000 38%, #000 100%) !important; }
.biz-gallery > .biz-gal-img{ position:static !important; width:100% !important; height:auto !important;
aspect-ratio:4/5 !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
border-radius:22px; }
.biz-gallery > .biz-gal-img:nth-child(2){ margin-top:64px; } /* stagger right column — balanced masonry */
.biz-gallery > .biz-gal-img:nth-child(4){ margin-top:64px; }
.biz-gal-img.g5{ display:none !important; } /* 4 tiles → clean 2×2 symmetry */
@media (max-width:900px){ .biz-gallery{ max-width:500px; } }
/* For Companies gallery — interactive (cursor parallax + hover) */
.biz-gallery > .biz-gal-img{ animation:none !important; transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .3s, filter .3s; }
.biz-gallery > .biz-gal-img:hover{ filter:brightness(1.05) saturate(1.06); box-shadow:0 44px 84px -34px rgba(0,80,60,.6); z-index:3; }
/* For Companies — "What you get" bento interactivity + landscape Demo Day reel */
.biz-bento .b{ transition:transform .32s ease, box-shadow .32s ease; }
.biz-bento .b:hover{ transform:translateY(-6px); box-shadow:0 34px 64px -32px rgba(0,80,60,.32); }
.biz-bento .b:hover .bb-stat{ transform:scale(1.06); }
.biz-bento .bb-stat{ display:inline-block; transition:transform .3s ease; }
.biz-bento .b:hover .bb-tile{ transform:translateY(-3px); }
.biz-bento .bb-tile{ transition:transform .3s ease; }
.biz-film{ position:relative; margin:48px auto 0; max-width:1120px; aspect-ratio:21/9; border-radius:26px;
overflow:hidden; box-shadow:0 44px 96px -46px rgba(0,80,60,.5); border:1px solid var(--line); }
.biz-film-vid{ width:100%; height:100%; object-fit:cover; display:block; animation:bizfilm-kb 16s ease-in-out infinite alternate; }
@keyframes bizfilm-kb{ from{transform:scale(1)} to{transform:scale(1.07)} }
.biz-film::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 52%, rgba(0,40,30,.55)); pointer-events:none; }
.biz-film-play{ position:absolute; inset:0; margin:auto; width:74px; height:74px; border-radius:50%;
background:rgba(255,255,255,.92); display:grid; place-items:center; box-shadow:0 16px 40px -12px rgba(0,0,0,.5);
transition:transform .3s ease; z-index:1; }
.biz-film:hover .biz-film-play{ transform:scale(1.09); }
.biz-film-play svg{ width:30px; height:30px; fill:var(--color-pine); margin-left:3px; }
.biz-film-cap{ position:absolute; left:24px; bottom:20px; z-index:1; color:#fff; font-weight:700; font-size:15px; text-shadow:0 2px 14px rgba(0,0,0,.55); }
@media (prefers-reduced-motion: reduce){ .biz-film-vid{ animation:none; } }
/* Proof quotes — photo / PromoCraft logo above each quote */
.proof-quote{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.pq-ava{ width:66px; height:66px; border-radius:50%; margin:0 auto 18px; overflow:hidden; flex:0 0 auto;
box-shadow:0 12px 28px -12px rgba(0,80,60,.4); }
.pq-ava img{ width:100%; height:100%; object-fit:cover; display:block; }
.pq-ava--logo{ display:grid; place-items:center; color:#fff; font-weight:800; font-size:20px; letter-spacing:.02em;
background:linear-gradient(135deg, var(--color-pine), var(--color-pine-deep)); }
/* Contact panel — pure white + cool brand glows (no beige) */
html body .contact-section{
background:
radial-gradient(ellipse at 88% -12%, color-mix(in srgb, var(--teal) 18%, transparent), transparent 52%),
radial-gradient(ellipse at -8% 112%, color-mix(in srgb, var(--green) 14%, transparent), transparent 55%),
#ffffff !important;
}
[data-theme="dark"] html body .contact-section{
background:
radial-gradient(ellipse at 88% -12%, color-mix(in srgb, var(--teal) 24%, transparent), transparent 52%),
radial-gradient(ellipse at -8% 112%, color-mix(in srgb, var(--green) 20%, transparent), transparent 55%),
#0a1020 !important;
}
/* For Companies gallery v3 — 3-col masonry, varied dimensions + 16:9 video reel */
.biz-gallery{ display:block !important; column-count:3 !important; column-gap:16px !important;
width:100% !important; max-width:740px !important; margin-left:auto !important; aspect-ratio:auto !important;
grid-template-columns:none !important;
-webkit-mask:linear-gradient(98deg, transparent 0%, rgba(0,0,0,.3) 12%, #000 34%, #000 100%) !important;
mask:linear-gradient(98deg, transparent 0%, rgba(0,0,0,.3) 12%, #000 34%, #000 100%) !important; }
.biz-gallery > .biz-gal-img{ position:static !important; width:100% !important; height:auto !important;
display:block !important; margin:0 0 16px !important; margin-top:0 !important; border-radius:20px !important;
object-fit:cover !important; -webkit-column-break-inside:avoid; break-inside:avoid;
top:auto!important; left:auto!important; right:auto!important; bottom:auto!important;
box-shadow:0 30px 60px -34px rgba(0,80,60,.5);
transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .3s, filter .3s; }
.biz-gallery > .biz-gal-img.ar-port{ aspect-ratio:3/4 !important; }
.biz-gallery > .biz-gal-img.ar-wide{ aspect-ratio:16/9 !important; }
.biz-gallery > .biz-gal-img.ar-sq{ aspect-ratio:1/1 !important; }
.biz-gallery > .biz-gal-img.ar-land{ aspect-ratio:4/3 !important; }
.biz-gal-img.g5{ display:block !important; }
.biz-gallery > .biz-gal-img:hover{ filter:brightness(1.05) saturate(1.05); box-shadow:0 44px 84px -34px rgba(0,80,60,.6); }
@media (max-width:900px){ .biz-gallery{ column-count:2 !important; max-width:520px !important; } }
/* For Companies — step photos popping from each number on hover */
.flow .flow-step{ position:relative; }
.flow .flow-step .num{ position:relative; cursor:pointer; }
.flow-pop{ position:absolute; bottom:calc(100% + 16px); left:50%; transform:translateX(-50%) scale(.25);
transform-origin:bottom center; width:150px; aspect-ratio:4/3; border-radius:16px; overflow:hidden;
opacity:0; pointer-events:none; z-index:6; box-shadow:0 26px 54px -22px rgba(0,80,60,.55);
border:3px solid #fff; transition:transform .4s cubic-bezier(.34,1.5,.4,1), opacity .3s ease; }
.flow-pop img{ width:100%; height:100%; object-fit:cover; display:block; }
.flow-pop::after{ content:''; position:absolute; left:50%; bottom:-7px; width:14px; height:14px;
transform:translateX(-50%) rotate(45deg); background:#fff; }
.flow-step:hover .flow-pop,
.flow-step:focus-within .flow-pop{ opacity:1; transform:translateX(-50%) scale(1); }
@media (prefers-reduced-motion: reduce){ .flow-pop{ transition:opacity .2s; } }
/* ============================================================
Testimonials — video reels with 3 categories (filterable)
============================================================ */
.tstr-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:30px 0 34px; }
.tstr-tab{ padding:9px 18px; border-radius:999px; border:1px solid var(--line); background:var(--glass);
color:var(--ink-2); font-weight:700; font-size:13.5px; cursor:pointer; transition:color .2s, background .2s, box-shadow .2s; }
.tstr-tab:hover{ color:var(--ink); }
.tstr-tab.is-active{ background:var(--accent-grad); color:var(--accent-1-ink); border-color:transparent; box-shadow:0 8px 20px -10px var(--accent-shadow); }
.tstr-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:1100px){ .tstr-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .tstr-grid{ grid-template-columns:1fr; } }
.tstr-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:22px;
overflow:hidden; box-shadow:0 26px 56px -34px rgba(0,0,0,.4); transition:transform .3s ease, box-shadow .3s ease; }
[data-theme="dark"] .tstr-card{ background:rgba(255,255,255,.04); }
.tstr-card:hover{ transform:translateY(-6px); box-shadow:0 40px 80px -36px rgba(0,0,0,.5); }
.tstr-card.is-hidden{ display:none; }
.tstr-media{ position:relative; aspect-ratio:9/16; overflow:hidden; }
.tstr-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.tstr-card:hover .tstr-media img{ transform:scale(1.06); }
.tstr-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.4)); }
.tstr-chip{ position:absolute; top:12px; left:12px; z-index:1; font-size:10.5px; font-weight:800; letter-spacing:.05em;
text-transform:uppercase; color:#fff; padding:5px 11px; border-radius:999px; }
.tstr--explorer .tstr-chip{ background:var(--teal); }
.tstr--exminder .tstr-chip{ background:var(--yellow); color:#1a1505; }
.tstr--company .tstr-chip{ background:var(--green); }
.tstr-play{ position:absolute; inset:0; margin:auto; width:56px; height:56px; border-radius:50%; border:0;
background:rgba(255,255,255,.92); display:grid; place-items:center; cursor:pointer; z-index:1;
box-shadow:0 12px 30px -10px rgba(0,0,0,.5); transition:transform .25s ease; }
.tstr-card:hover .tstr-play{ transform:scale(1.1); }
.tstr-play svg{ width:24px; height:24px; fill:var(--ink); margin-left:2px; }
.tstr-body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:12px; flex:1; }
.tstr-quote{ margin:0; font-size:14px; line-height:1.5; color:var(--ink); font-weight:600; }
.tstr-author{ display:flex; flex-direction:column; gap:1px; margin-top:auto; }
.tstr-name{ font-weight:800; font-size:13.5px; color:var(--ink); }
.tstr-role{ font-size:12px; color:var(--ink-3); }
/* For Companies — pricing teaser remade: bold green→yellow brand banner */
.section-pricing-teaser .pricing-teaser{
background:linear-gradient(120deg, var(--color-pine) 0%, var(--color-pine-300) 52%, var(--color-sunflower) 118%) !important;
border-color:transparent !important; border-radius:28px !important; padding:38px 42px !important;
box-shadow:0 44px 96px -46px rgba(0,80,60,.6); position:relative; overflow:hidden;
transition:transform .3s ease, box-shadow .3s ease; }
.section-pricing-teaser .pricing-teaser:hover{ transform:translateY(-4px); box-shadow:0 58px 116px -46px rgba(0,80,60,.7); }
.section-pricing-teaser .pricing-teaser::after{ content:''; position:absolute; right:-60px; top:-60px; width:240px; height:240px;
border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); pointer-events:none; }
.section-pricing-teaser .pricing-teaser h3,
.section-pricing-teaser .pricing-teaser p,
.section-pricing-teaser .pricing-teaser-eyebrow{ color:#fff !important; }
.section-pricing-teaser .pricing-teaser-eyebrow{ opacity:.9; }
.section-pricing-teaser .pricing-teaser p{ opacity:.92; }
.pt-tiers{ display:flex; gap:8px; align-items:flex-end; margin-top:18px; }
.pt-tiers span{ display:inline-flex; align-items:center; border-radius:999px; background:rgba(255,255,255,.18);
color:#fff; font-weight:800; letter-spacing:.02em; }
.pt-tiers span:nth-child(1){ font-size:12px; padding:6px 13px; }
.pt-tiers span:nth-child(2){ font-size:13.5px; padding:8px 16px; background:rgba(255,255,255,.24); }
.pt-tiers span:nth-child(3){ font-size:15px; padding:10px 19px; background:rgba(255,255,255,.32); }
.section-pricing-teaser .pricing-teaser-arrow{ background:#fff !important; border-radius:999px; padding:13px 22px; align-self:center; }
.section-pricing-teaser .pricing-teaser-arrow span{ color:var(--color-pine) !important; font-weight:800; }
.section-pricing-teaser .pricing-teaser-arrow svg{ stroke:var(--color-pine) !important; }
/* For Companies — problem stat cards: reel + source link */
.problem-stat{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.ps-reel{ position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; margin-bottom:16px;
box-shadow:0 20px 44px -26px rgba(0,80,60,.5); }
.ps-reel img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.problem-stat:hover .ps-reel img{ transform:scale(1.06); }
.ps-reel::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.35)); }
.ps-play{ position:absolute; inset:0; margin:auto; width:46px; height:46px; border-radius:50%; border:0;
background:rgba(255,255,255,.92); display:grid; place-items:center; cursor:pointer; z-index:1;
box-shadow:0 10px 24px -8px rgba(0,0,0,.5); transition:transform .25s ease; }
.problem-stat:hover .ps-play{ transform:scale(1.12); }
.ps-play svg{ width:20px; height:20px; fill:var(--ink); margin-left:2px; }
.ps-source{ margin-top:12px; display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700;
color:var(--color-pine); text-decoration:none; opacity:.92; transition:opacity .2s; }
.ps-source:hover{ opacity:1; text-decoration:underline; }
.ps-source svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* For Companies — Demo Day company reels slider */
.crs{ position:relative; }
.crs-viewport{ overflow:hidden; }
.crs-track{ display:flex; gap:16px; list-style:none; margin:0; padding:6px 2px; overflow-x:auto;
scroll-behavior:smooth; scroll-snap-type:x mandatory; scrollbar-width:none; }
.crs-track::-webkit-scrollbar{ display:none; }
.crs-card{ flex:0 0 200px; scroll-snap-align:start; background:#fff; border:1px solid var(--line);
border-radius:20px; overflow:hidden; box-shadow:0 24px 52px -32px rgba(0,80,60,.45); transition:transform .3s; }
.crs-card:hover{ transform:translateY(-5px); }
[data-theme="dark"] .crs-card{ background:rgba(255,255,255,.04); }
.crs-media{ position:relative; aspect-ratio:3/4; overflow:hidden; }
.crs-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.crs-card:hover .crs-media img{ transform:scale(1.06); }
.crs-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35)); }
.crs-live{ position:absolute; top:10px; left:10px; z-index:1; display:inline-flex; align-items:center; gap:5px;
font-size:10px; font-weight:800; letter-spacing:.06em; color:#fff; background:rgba(0,0,0,.42); padding:4px 9px; border-radius:999px; }
.crs-live i{ width:6px; height:6px; border-radius:50%; background:#3DDC97; }
.crs-play{ position:absolute; inset:0; margin:auto; width:48px; height:48px; border-radius:50%; border:0;
background:rgba(255,255,255,.92); display:grid; place-items:center; cursor:pointer; z-index:1;
box-shadow:0 10px 24px -8px rgba(0,0,0,.5); transition:transform .25s ease; }
.crs-card:hover .crs-play{ transform:scale(1.1); }
.crs-play svg{ width:20px; height:20px; fill:var(--color-pine); margin-left:2px; }
.crs-info{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:2px; }
.crs-info b{ font-size:13.5px; color:var(--ink); }
.crs-info span{ font-size:11.5px; color:var(--ink-3); }
.crs-nav{ position:absolute; top:38%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%;
border:1px solid var(--line); background:var(--glass-strong); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
display:grid; place-items:center; cursor:pointer; z-index:3; color:var(--ink); box-shadow:0 8px 20px -8px rgba(0,0,0,.3);
transition:transform .2s ease, background .2s ease; }
.crs-nav:hover{ transform:translateY(-50%) scale(1.08); background:#fff; }
.crs-prev{ left:-10px; } .crs-next{ right:-10px; }
.crs-nav svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* For Companies — larger hero gallery, give it more of the hero width */
@media (min-width:900px){
.biz-hero-grid{ grid-template-columns:0.86fr 1.14fr !important; gap:48px !important; }
}
.biz-gallery{ max-width:880px !important; column-gap:18px !important; }
/* For Companies gallery — static (no movement on hover) + more faded extra elements */
.biz-gallery{
-webkit-mask:linear-gradient(99deg, transparent 0%, rgba(0,0,0,.18) 15%, rgba(0,0,0,.7) 30%, #000 44%, #000 100%) !important;
mask:linear-gradient(99deg, transparent 0%, rgba(0,0,0,.18) 15%, rgba(0,0,0,.7) 30%, #000 44%, #000 100%) !important; }
.biz-gallery > .biz-gal-img{ transform:none !important; transition:filter .3s ease, box-shadow .3s ease !important; }
.biz-gallery > .biz-gal-img:hover{ transform:none !important; filter:brightness(1.05) saturate(1.04); }
/* For Companies — Demo Day: slider full-width underneath the text */
.section-solution .solution-grid{ display:block !important; }
.section-solution .solution-grid > .reveal{ max-width:760px; margin-left:auto !important; margin-right:auto !important; text-align:center !important; }
.section-solution .solution-grid > .reveal .section-lead{ margin-left:auto; margin-right:auto; }
.section-solution .crs{ margin-top:44px; }
.crs-track{ align-items:flex-start; } /* no stretch → no white gap in cards */
.crs-card{ flex:0 0 230px; }
.crs-media{ aspect-ratio:4/5; }
.crs-prev{ left:-8px; } .crs-next{ right:-8px; }
/* Fix crs reel media — image must fill the card photo area */
.crs-media{ position:relative; aspect-ratio:4/5 !important; overflow:hidden; }
.crs-media img{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; }
/* For Companies gallery — 4 columns + fade on left and bottom edges */
.biz-gallery{ column-count:4 !important; max-width:960px !important; column-gap:16px !important;
-webkit-mask:
linear-gradient(99deg, transparent 0%, rgba(0,0,0,.2) 12%, #000 32%, #000 100%),
linear-gradient(180deg, #000 0%, #000 62%, transparent 100%) !important;
mask:
linear-gradient(99deg, transparent 0%, rgba(0,0,0,.2) 12%, #000 32%, #000 100%),
linear-gradient(180deg, #000 0%, #000 62%, transparent 100%) !important;
-webkit-mask-composite:source-in; mask-composite:intersect; }
@media (max-width:1100px){ .biz-gallery{ column-count:3 !important; } }
@media (max-width:760px){ .biz-gallery{ column-count:2 !important; max-width:520px !important; } }
/* Demo Day slider — full-bleed edge-to-edge + 9:16 portrait reels */
.section-solution .crs{ width:100vw !important; margin-left:calc(50% - 50vw) !important; max-width:none !important; }
.section-solution .crs-viewport{ overflow:hidden; }
.section-solution .crs-track{ padding-left:max(24px, calc((100vw - 1128px)/2)) !important; padding-right:32px !important; }
.section-solution .crs-prev{ left:16px !important; }
.section-solution .crs-next{ right:16px !important; }
.crs-media{ aspect-ratio:9/16 !important; }
.crs-card{ flex:0 0 232px; }
/* "9 weeks → 1 day" collapse visual (Faster hiring) */
.fh-collapse{ margin-top:26px; display:flex; flex-direction:column; gap:14px; }
.fh-row{ display:flex; align-items:center; gap:12px; }
.fh-tag{ flex:0 0 104px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); }
.fh-track{ display:flex; gap:3px; flex:1; }
.fh-track i{ height:16px; border-radius:4px; flex:1; }
.fh-old .fh-track i{ background:color-mix(in srgb, var(--ink) 15%, transparent); }
.fh-new .fh-track{ flex:0 0 auto; }
.fh-new .fh-track i{ width:40px; height:20px; background:linear-gradient(135deg, var(--color-pine), var(--color-sunflower));
box-shadow:0 8px 20px -8px color-mix(in srgb, var(--color-pine) 60%, transparent); animation:fh-pulse 2.2s ease-in-out infinite; }
.fh-num{ flex:0 0 auto; min-width:58px; text-align:right; font-weight:800; font-size:14px; color:var(--ink); }
.fh-old .fh-num{ color:var(--ink-3); text-decoration:line-through; }
@keyframes fh-pulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--color-pine) 45%, transparent); } 50%{ box-shadow:0 0 0 7px transparent; } }
/* Bento — light stroke tracing each box on hover (replaces the zoom) */
@property --bang{ syntax:''; initial-value:0deg; inherits:false; }
.biz-bento .b{ position:relative; transition:box-shadow .3s ease !important; }
.biz-bento .b:hover{ transform:none !important; box-shadow:0 24px 52px -30px rgba(0,80,60,.26); }
.biz-bento .b:hover .bb-stat{ transform:none !important; }
.biz-bento .b::after{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1.6px; pointer-events:none;
background:conic-gradient(from var(--bang,0deg), transparent 0deg, transparent 278deg, var(--color-pine) 318deg, var(--color-sunflower) 350deg, transparent 360deg);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
opacity:0; transition:opacity .3s ease; }
.biz-bento .b:hover::after{ opacity:1; animation:b-stroke 1.8s linear infinite; }
@keyframes b-stroke{ to{ --bang:360deg; } }
@media (prefers-reduced-motion: reduce){ .biz-bento .b:hover::after{ animation:none; } .fh-new .fh-track i{ animation:none; } }
/* ===== Business bento: kill dead space + animated fit-confidence bar (2026-06-17) ===== */
.biz-bento .b.span-3{ min-height:0 !important; }
.biz-bento .b.span-3.tall{ min-height:0 !important; }
.biz-bento .b.biz-bento-teal > .fitbar{ margin-top:auto; } /* anchor bar to card bottom — no gap */
.fitbar{ margin-top:20px; }
.fitbar-head{ display:flex; align-items:center; justify-content:space-between; font-size:11.5px;
color:var(--ink-3); margin-bottom:9px; font-weight:600; letter-spacing:.02em; }
.fitbar-pct{ font-weight:800; color:var(--color-pine); }
.fitbar-track{ height:12px; border-radius:999px; overflow:hidden;
background:color-mix(in srgb, var(--ink) 9%, transparent); }
.fitbar-fill{ width:0; height:100%; border-radius:999px;
background:linear-gradient(90deg, var(--color-lagoon), var(--color-pine));
box-shadow:0 0 18px -4px color-mix(in srgb, var(--color-lagoon) 70%, transparent);
transition:width 1.5s cubic-bezier(.16,1,.3,1); transition-delay:.25s; }
.b.reveal.in .fitbar-fill{ width:90%; }
@media (prefers-reduced-motion: reduce){ .fitbar-fill{ transition:none; width:90%; } }
/* ===== Proof quotes: company rep (larger photo + logo badge) vs candidate ===== */
.pq-ava--photo{ position:relative; width:104px; height:104px; overflow:visible; border-radius:50%; }
.pq-ava--photo img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
box-shadow:0 16px 34px -14px rgba(0,80,60,.45); }
.pq-logo{ position:absolute; top:-2px; right:-6px; width:40px; height:40px; border-radius:50%;
display:grid; place-items:center; font-size:13px; font-weight:800; letter-spacing:.02em; color:#fff;
background:linear-gradient(135deg, var(--color-pine), var(--color-pine-deep));
border:3px solid #fff; box-shadow:0 6px 16px -6px rgba(0,80,60,.55); z-index:2; }
[data-theme="dark"] .pq-logo{ border-color:#0e1714; }
/* ===== GALERIA MAI MARE — hero gallery takes the stage (2026-06-17) ===== */
@media (min-width:992px){
/* give the gallery the dominant share of the hero */
.biz-hero-grid{ grid-template-columns:minmax(330px,0.58fr) 1.42fr !important; gap:48px !important; align-items:start !important; }
.biz-hero-copy{ align-self:center !important; }
/* bleed the visual cell to the right viewport edge for maximum size */
.biz-hero-visual{ min-height:auto !important; justify-content:flex-start !important;
margin-right:min(0px, calc(506px - 50vw)) !important; }
/* bigger footprint: no cap, 4 larger columns */
.biz-gallery{ max-width:none !important; width:100% !important; margin-left:0 !important;
column-count:4 !important; column-gap:22px !important; padding-right:clamp(16px,2.6vw,44px) !important;
/* lighter left fade + restored bottom fade */
-webkit-mask:linear-gradient(100deg, transparent 0%, rgba(0,0,0,.28) 6%, #000 19%, #000 100%),
linear-gradient(180deg, #000 44%, transparent 90%) !important;
mask:linear-gradient(100deg, transparent 0%, rgba(0,0,0,.28) 6%, #000 19%, #000 100%),
linear-gradient(180deg, #000 44%, transparent 90%) !important;
-webkit-mask-composite:source-in !important; mask-composite:intersect !important; }
.biz-gallery > .biz-gal-img{ margin-bottom:22px !important; border-radius:24px !important; }
}
@media (min-width:1500px){
.biz-gallery{ column-count:4 !important; column-gap:24px !important; }
.biz-gallery > .biz-gal-img{ margin-bottom:24px !important; }
}
/* ===== Hero copy: fewer lines — smaller title + a touch more column (2026-06-17) ===== */
@media (min-width:992px){
.biz-hero-grid{ grid-template-columns:minmax(410px,0.84fr) 1.16fr !important; }
/* must out-specify `html body .hero h1 {…!important}` (line 2142/2380) */
html body .biz-hero h1.biz-hero-title{ font-size:clamp(30px,2.9vw,42px) !important; line-height:1.07 !important; letter-spacing:-0.03em !important; }
.biz-hero-copy .hero-eyebrow{ white-space:nowrap !important; }
}
/* ===== Problem section v4 — portrait explainer video + stacked stats (2026-06-17) ===== */
.problem-layout{ display:grid !important; grid-template-columns:minmax(230px,300px) minmax(0,440px) !important;
justify-content:center !important; gap:clamp(28px,3.5vw,48px) !important; align-items:start !important; margin-top:52px !important; }
@media (max-width:860px){
.problem-layout{ grid-template-columns:1fr !important; justify-content:stretch !important; }
.problem-video{ max-width:330px !important; margin:0 auto !important; }
}
/* left: 9:16 portrait video */
.problem-video{ position:relative; margin:0; width:100%; max-width:320px; aspect-ratio:9/16;
border-radius:28px; overflow:hidden; border:1px solid var(--line);
box-shadow:0 44px 96px -38px rgba(0,80,60,.5); background:#0c1714; }
.problem-video .pv-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.problem-video::after{ content:''; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(180deg, rgba(0,40,30,.04) 38%, rgba(0,30,22,.62)); }
.pv-play{ position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%; border:0; cursor:pointer; z-index:2;
background:rgba(255,255,255,.92); display:grid; place-items:center; box-shadow:0 16px 36px -12px rgba(0,80,60,.55);
transition:transform .3s ease, background .3s ease; }
.pv-play:hover{ transform:scale(1.08); background:#fff; }
.pv-play svg{ width:26px; height:26px; fill:var(--color-pine); margin-left:3px; }
.pv-cap{ position:absolute; left:18px; right:18px; bottom:18px; z-index:2; color:#fff;
font-size:14px; font-weight:600; line-height:1.4; text-shadow:0 2px 12px rgba(0,0,0,.55);
display:flex; flex-direction:column; gap:8px; }
.pv-cap-k{ align-self:flex-start; font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
background:rgba(255,255,255,.2); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
padding:4px 10px; border-radius:999px; }
/* right: stacked stat cards, top-aligned, filling the video height */
.section-problem .problem-stats{ display:flex !important; flex-direction:column !important; gap:16px !important;
grid-template-columns:none !important; margin-top:0 !important; align-self:stretch !important; }
.problem-layout > .problem-video{ align-self:start; }
.section-problem .problem-stat{ display:grid !important; grid-template-columns:140px 1fr !important;
align-items:center; gap:22px !important; padding:24px 30px !important; text-align:left !important;
flex:1 1 0 !important; min-height:152px; }
.section-problem .problem-stat:hover{ transform:translateX(4px) !important; }
.section-problem .problem-stat strong{ margin:0 !important; }
.problem-stat .ps-text{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.problem-stat .ps-text span{ display:block; margin-top:0 !important; font-size:14.5px; }
/* ===== HERO #76 — big title over a gradient-scrimmed first photo column (2026-06-17) ===== */
@media (min-width:992px){
.biz-hero-grid{ position:relative !important; display:block !important; min-height:600px; }
/* gallery becomes a back layer: from ~30% across to the right viewport edge */
.biz-hero-grid > .biz-hero-visual{ position:absolute !important; top:0 !important; bottom:0 !important;
left:40% !important; right:min(0px, calc(506px - 50vw)) !important; margin:0 !important;
display:flex !important; align-items:flex-start !important; z-index:1 !important; }
.biz-hero-grid > .biz-hero-visual .biz-gallery{ max-width:none !important; width:100% !important; }
/* scrim: solid white where the copy sits, then a long clean fade so the photos dissolve away */
.biz-hero-grid::before{ content:''; position:absolute; inset:0 0 0 -160px; z-index:2; pointer-events:none;
background:linear-gradient(100deg,
transparent 0%,
color-mix(in srgb, var(--bg,#FBFEF8) 96%, transparent) 13%,
color-mix(in srgb, var(--bg,#FBFEF8) 95%, transparent) 54%,
color-mix(in srgb, var(--bg,#FBFEF8) 74%, transparent) 63%,
color-mix(in srgb, var(--bg,#FBFEF8) 36%, transparent) 72%,
transparent 85%) !important;
/* feather top/bottom too so the white dissolves on every edge — no hard panel */
-webkit-mask:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%) !important;
mask:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%) !important; }
/* copy on top, big again */
.biz-hero-grid > .biz-hero-copy{ position:relative !important; z-index:3 !important; max-width:600px !important; padding:30px 0 64px !important; }
html body .biz-hero h1.biz-hero-title{ font-size:clamp(40px,5.2vw,66px) !important; line-height:1.04 !important; letter-spacing:-0.035em !important; }
}
/* ===== #74 — infinite reels marquee mode ===== */
.crs--marquee .crs-viewport{ overflow:hidden !important; }
.section-solution .crs--marquee .crs-track,
.crs--marquee .crs-track{ overflow:visible !important; width:max-content !important; max-width:none !important;
padding:8px 0 !important; flex-wrap:nowrap !important; scroll-snap-type:none !important; will-change:transform; }
.crs--marquee .crs-nav{ display:none !important; }
/* symmetric edge fade so cards dissolve in/out on both sides */
.section-solution .crs--marquee{
-webkit-mask:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%) !important;
mask:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%) !important; }
/* ===== Experience fan — colourful gradient backdrop + floating hourglass-sand particles (2026-06-17) ===== */
.xpc{ position:relative; }
.xpc-sand{ position:absolute; inset:-12% -8% -8%; z-index:0; pointer-events:none; }
.xpc-sand::before{ content:''; position:absolute; inset:0; z-index:0;
background:
radial-gradient(32% 38% at 20% 30%, color-mix(in srgb, var(--yellow,#EAC105) 42%, transparent), transparent 70%),
radial-gradient(34% 40% at 80% 30%, color-mix(in srgb, var(--teal,#00AFB9) 38%, transparent), transparent 70%),
radial-gradient(42% 46% at 50% 92%, color-mix(in srgb, var(--green,#007867) 34%, transparent), transparent 72%);
filter:blur(40px); opacity:.8; animation:xpc-bg-drift 18s ease-in-out infinite alternate; }
@keyframes xpc-bg-drift{ 0%{ transform:translate3d(-1%,0,0) scale(1); } 100%{ transform:translate3d(2%,-3%,0) scale(1.05); } }
.xpc-stage{ position:relative; z-index:1; }
.xpc-dots{ position:relative; z-index:1; }
.xpc-sand .sand-dot{ position:absolute; border-radius:50%; pointer-events:none; z-index:1;
box-shadow:0 0 6px 0 currentColor;
animation:sand-float var(--d,12s) ease-in-out var(--delay,0s) infinite alternate; }
@keyframes sand-float{
0%{ transform:translate(0,0) scale(.9); }
50%{ transform:translate(calc(var(--fx,8px)*.5), calc(var(--fy,-40px)*.5)) scale(1.05); }
100%{ transform:translate(var(--fx,8px), var(--fy,-40px)) scale(.95); } }
@media (prefers-reduced-motion:reduce){ .xpc-sand::before, .xpc-sand .sand-dot{ animation:none !important; } }
/* ===== #105 — Demo Day reels: centered captions (band stays full-bleed edge-to-edge, #121) ===== */
.section-solution .crs-info{ text-align:center !important; align-items:center !important; }
.section-solution .crs--marquee .crs-viewport{ width:100% !important; }
/* ===== #108 — "Start down this path" CTA catches its card's frame colour on hover/press ===== */
.paths-card .paths-card-cta{ transition:color .3s ease; }
.paths-card:hover .paths-card-cta,
.paths-card:focus-within .paths-card-cta,
.paths-card:active .paths-card-cta,
.paths-card.is-expanded .paths-card-cta{ color:var(--paths-c) !important; }
/* ===== #109 — fan: kill the ugly black card shadow + cleaner, more creative backdrop ===== */
.xpc-stage .xpc-tile{ box-shadow:0 26px 52px -30px color-mix(in srgb, var(--teal) 52%, transparent),
0 8px 22px -14px rgba(0,70,80,.20) !important; }
.xpc-stage .xpc-tile[aria-hidden="false"]{ box-shadow:0 38px 70px -32px color-mix(in srgb, var(--teal) 58%, transparent),
0 12px 28px -14px rgba(0,70,80,.26) !important; }
/* backdrop v2 — vibrant colour orbs pushed to the corners; centre stays clean (no muddy shadow) */
.xpc-sand::before{ content:''; position:absolute; inset:0;
background:
radial-gradient(24% 30% at 9% 16%, color-mix(in srgb, var(--yellow,#EAC105) 62%, transparent), transparent 64%),
radial-gradient(24% 30% at 91% 18%, color-mix(in srgb, var(--teal,#00AFB9) 56%, transparent), transparent 64%),
radial-gradient(26% 32% at 80% 94%, color-mix(in srgb, var(--green,#007867) 50%, transparent), transparent 66%),
radial-gradient(24% 28% at 16% 92%, color-mix(in srgb, var(--color-lagoon,#00AFB9) 44%, transparent), transparent 64%) !important;
filter:blur(34px) saturate(1.2) !important; opacity:.92 !important;
animation:xpc-bg-drift 22s ease-in-out infinite alternate !important; }