/* LeadAddict — Realtor landing page
─────────────────────────────────
Tokens scale via [data-mode] on : midnight (default), editorial, mono.
Accent + density are CSS vars set inline by React.
*/
:root {
/* Daylight — default. Warm off-white, deep ink, brand orange. */
--bg: #fafaf6;
--bg-1: #f3f1ea;
--bg-2: #ebe8dd;
--bg-3: #14131a;
--border: #e6e2d3;
--border-strong: #cec8b4;
--ink: #14131a;
--ink-2: #4a4853;
--ink-3: #7a7783;
--ink-4: #b1adb8;
--accent: #ff5a1f;
--accent-2: #ff9d5a;
--accent-soft: rgba(255, 90, 31, 0.08);
--accent-glow: rgba(255, 90, 31, 0.18);
--ok: #1f8a5b;
--warn: #c0851b;
/* Light-mode shadows. Override in [data-mode="midnight"]. */
--shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 30px rgba(20, 19, 26, 0.06), 0 2px 4px rgba(20, 19, 26, 0.04);
--shadow-big: 0 30px 60px rgba(20, 19, 26, 0.12), 0 4px 12px rgba(20, 19, 26, 0.06);
--shadow-glow-card: 0 24px 60px rgba(255, 90, 31, 0.15);
--font-sans: "Geist", "Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display: "Geist", "Söhne", "Helvetica Neue", Helvetica, sans-serif;
--font-serif: "Instrument Serif", "Times New Roman", Georgia, serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--pad-x: clamp(20px, 4vw, 64px);
--max-w: 1280px;
--rad-sm: 6px;
--rad-md: 10px;
--rad-lg: 16px;
--rad-xl: 24px;
--density: 1;
}
/* Midnight mode — the original dark direction */
[data-mode="midnight"] {
--bg: #0a0a0b;
--bg-1: #111114;
--bg-2: #16161b;
--bg-3: #1d1d24;
--border: #26262e;
--border-strong: #34343f;
--ink: #f5f3ef;
--ink-2: #b8b8c0;
--ink-3: #76767f;
--ink-4: #4a4a52;
--accent: #ff6a2c;
--accent-2: #ffb072;
--accent-soft: rgba(255, 106, 44, 0.12);
--accent-glow: rgba(255, 106, 44, 0.28);
--ok: #5ddb8d;
--warn: #f5c451;
--shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.4);
--shadow-big: 0 30px 80px rgba(0,0,0,0.5);
--shadow-glow-card: 0 24px 60px rgba(255, 106, 44, 0.28);
}
/* Editorial mode — cream/ink */
[data-mode="editorial"] {
--bg: #f3eee5;
--bg-1: #ece6d8;
--bg-2: #e5dec9;
--bg-3: #1c1a16;
--border: #d1c8b3;
--border-strong: #b7ac92;
--ink: #1a1814;
--ink-2: #4a463c;
--ink-3: #7a7466;
--ink-4: #a59e8a;
--accent: #c8431a;
--accent-2: #f0a160;
--accent-soft: rgba(200, 67, 26, 0.1);
--accent-glow: rgba(200, 67, 26, 0.18);
}
/* Mono mode — high-contrast brutalist data */
[data-mode="mono"] {
--bg: #fafaf9;
--bg-1: #f2f2f0;
--bg-2: #e8e8e6;
--bg-3: #0a0a0a;
--border: #0a0a0a;
--border-strong: #0a0a0a;
--ink: #0a0a0a;
--ink-2: #2a2a2a;
--ink-3: #585858;
--ink-4: #888;
--accent: #ff5722;
--accent-2: #ff5722;
--accent-soft: rgba(255, 87, 34, 0.08);
--accent-glow: rgba(255, 87, 34, 0.2);
}
/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
background: var(--bg);
color: var(--ink);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: "ss01", "cv11";
}
body {
background: var(--bg);
overflow-x: hidden;
min-height: 100vh;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #fff; }
/* ─── Layout ─── */
.shell {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--pad-x);
position: relative;
}
.section {
padding: calc(96px * var(--density)) 0;
position: relative;
}
.section--compact { padding: calc(56px * var(--density)) 0; }
.section--hero { padding-top: calc(88px * var(--density)); padding-bottom: calc(40px * var(--density)); }
/* ─── Type ─── */
.eyebrow {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
display: inline-flex;
align-items: center;
gap: 8px;
}
.eyebrow::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 12px var(--accent-glow);
}
.h-display {
font-family: var(--font-display);
font-size: clamp(38px, 5.4vw, 76px);
line-height: 1.05;
letter-spacing: -0.035em;
font-weight: 500;
margin: 0;
text-wrap: balance;
}
.h-display em {
font-style: normal;
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.03em;
color: var(--accent);
}
.h1 {
font-family: var(--font-display);
font-size: clamp(36px, 4.4vw, 64px);
line-height: 1;
letter-spacing: -0.03em;
font-weight: 500;
margin: 0;
text-wrap: balance;
}
.h1 em {
font-style: normal;
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--accent);
}
.h2 {
font-family: var(--font-display);
font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.15;
letter-spacing: -0.02em;
font-weight: 500;
margin: 0;
text-wrap: balance;
}
.lede {
font-size: clamp(17px, 1.4vw, 21px);
line-height: 1.45;
color: var(--ink-2);
max-width: 56ch;
text-wrap: pretty;
margin: 0;
}
.kicker {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--ink-3);
text-transform: uppercase;
}
/* ─── Buttons ─── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 46px;
padding: 0 20px;
border-radius: 999px;
font-size: 15px;
font-weight: 500;
letter-spacing: -0.01em;
border: 1px solid transparent;
background: transparent;
color: var(--ink);
white-space: nowrap;
transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
background: var(--accent);
color: #fff;
box-shadow: 0 0 0 1px var(--accent), 0 8px 24px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn--primary:hover { background: #ff7a44; }
.btn--ghost {
border-color: var(--border-strong);
color: var(--ink);
}
.btn--ghost:hover { background: var(--bg-1); border-color: var(--ink-3); }
.btn--sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn .arr { transition: transform .2s ease; }
.btn:hover .arr { transform: translateX(2px); }
/* ─── Surfaces ─── */
.card {
background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
border: 1px solid var(--border);
border-radius: var(--rad-lg);
}
.surface {
background: var(--bg-1);
border: 1px solid var(--border);
border-radius: var(--rad-lg);
}
.divider {
height: 1px;
background: var(--border);
width: 100%;
}
.divider-strong {
height: 1px;
background: var(--border-strong);
}
/* ─── Nav ─── */
.nav {
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
background: color-mix(in oklab, var(--bg) 78%, transparent);
border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
gap: 24px;
}
.nav-logo {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 600;
font-size: 17px;
letter-spacing: -0.02em;
}
.nav-logo .mark {
width: 28px;
height: 28px;
border-radius: 8px;
overflow: hidden;
display: grid;
place-items: center;
box-shadow: 0 0 14px var(--accent-glow), 0 0 0 1px rgba(20,19,26,0.04);
}
.nav-logo .mark img {
width: 100%;
height: 100%;
object-fit: cover;
}
.nav-links {
display: flex;
align-items: center;
gap: 4px;
}
.nav-links a {
font-size: 14px;
color: var(--ink-2);
padding: 8px 12px;
border-radius: 8px;
transition: color .15s, background .15s;
}
.nav-links a:hover { color: var(--ink); background: var(--bg-1); }
.nav-cta { display: flex; align-items: center; gap: 8px; }
/* Nav center: industry switch + section links */
.nav-center {
display: flex;
align-items: center;
gap: 18px;
flex: 1;
justify-content: center;
}
/* Realtor / Car Sales segmented switch */
.industry-switch {
position: relative;
display: inline-flex;
align-items: center;
background: var(--bg-1);
border: 1px solid var(--border);
border-radius: 999px;
padding: 4px;
}
.industry-switch button {
appearance: none;
border: 0;
background: transparent;
padding: 6px 14px;
font-family: var(--font-sans);
font-size: 12.5px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--ink-3);
border-radius: 999px;
cursor: pointer;
transition: color .2s;
position: relative;
z-index: 1;
white-space: nowrap;
}
.industry-switch button.active { color: #fff; }
.industry-thumb {
position: absolute;
top: 4px;
bottom: 4px;
background: var(--accent);
border-radius: 999px;
transition: left .25s cubic-bezier(.3,.7,.4,1), width .25s cubic-bezier(.3,.7,.4,1);
box-shadow: 0 2px 10px var(--accent-glow);
z-index: 0;
}
@media (max-width: 980px) {
.nav-center .nav-links { display: none; }
}
@media (max-width: 820px) {
.nav-links { display: none; }
}
/* Compact nav on phones — logo + toggle + Log in + Get started must fit one row. */
@media (max-width: 640px) {
.nav-inner { gap: 10px; }
.nav-logo { font-size: 15px; }
.nav-logo > span:not(.mark) { display: none; } /* mark only, frees ~90px */
.nav-center { gap: 10px; flex: 0 1 auto; }
.industry-switch { padding: 3px; }
.industry-switch button { padding: 5px 9px; font-size: 11.5px; }
.nav-cta { gap: 6px; }
.nav-cta .btn--sm { height: 34px; padding: 0 11px; font-size: 12.5px; }
.nav-cta .btn .arr { display: none; } /* drop the → arrow to save width */
/* Subdomain: niche is preset → hide the toggle, keep Log in + Get started. */
html.app-subdomain .industry-switch { display: none; }
/* Root: keep the toggle for niche-picking; Get started lives in the hero. */
html:not(.app-subdomain) .nav-cta .btn--primary { display: none; }
}
/* ─── Hero ─── */
.hero {
position: relative;
padding-top: 64px;
}
.hero-bg {
position: absolute;
inset: -40px 0 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.hero-bg::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(800px 400px at 80% 0%, var(--accent-soft), transparent 60%),
radial-gradient(600px 300px at 20% 30%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%);
}
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
gap: 48px;
align-items: center;
position: relative;
z-index: 1;
}
.hero-eyebrow-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.hero-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px 5px 5px;
border-radius: 999px;
background: var(--bg-1);
border: 1px solid var(--border);
font-size: 12px;
color: var(--ink-2);
}
.hero-pill .tag {
background: var(--accent);
color: #fff;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
padding: 3px 8px;
border-radius: 999px;
text-transform: uppercase;
}
.hero-lede { margin-top: 24px; max-width: 52ch; }
.hero-ctas {
margin-top: 36px;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.hero-meta {
margin-top: 28px;
display: flex;
align-items: center;
gap: 18px;
color: var(--ink-3);
font-size: 13px;
}
.hero-meta .avatars {
display: flex;
}
.hero-meta .avatar {
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid var(--bg);
margin-left: -8px;
background: var(--bg-3);
display: grid;
place-items: center;
font-size: 10px;
font-weight: 600;
color: var(--ink);
font-family: var(--font-mono);
}
.hero-meta .avatar:first-child { margin-left: 0; }
.hero-meta .stars {
color: var(--accent);
letter-spacing: 1px;
font-size: 12px;
}
@media (max-width: 860px) {
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
}
/* ─── Hero product preview ─── */
.preview-wrap {
position: relative;
perspective: 2000px;
}
.preview {
background: linear-gradient(180deg, var(--bg), var(--bg-1));
border: 1px solid var(--border-strong);
border-radius: 20px;
padding: 14px;
box-shadow: var(--shadow-big);
position: relative;
}
.preview-chrome {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 10px 14px;
border-bottom: 1px solid var(--border);
margin-bottom: 14px;
}
.preview-dots { display: flex; gap: 6px; }
.preview-dots i {
width: 10px; height: 10px; border-radius: 50%;
background: var(--border-strong);
}
.preview-url {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
padding: 4px 10px;
flex: 1;
text-align: center;
}
.preview-body {
display: grid;
grid-template-columns: 180px 1fr;
gap: 14px;
}
.dash-side {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.dash-side .label {
font-size: 10px;
color: var(--ink-4);
letter-spacing: 0.08em;
text-transform: uppercase;
font-family: var(--font-mono);
padding: 6px 8px 4px;
}
.dash-side .nav-item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 8px;
border-radius: 7px;
font-size: 12.5px;
color: var(--ink-2);
}
.dash-side .nav-item.active {
background: var(--bg-2);
color: var(--ink);
}
.dash-side .nav-item i {
width: 14px; height: 14px;
display: inline-block;
background: currentColor;
opacity: 0.6;
border-radius: 3px;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}
.dash-side .count {
margin-left: auto;
font-family: var(--font-mono);
font-size: 10px;
color: var(--ink-4);
}
.dash-side .nav-item.active .count { color: var(--accent); }
.dash-main {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.dash-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.dash-title {
font-size: 13px;
font-weight: 600;
letter-spacing: -0.01em;
}
.dash-sub {
font-size: 11px;
color: var(--ink-3);
font-family: var(--font-mono);
}
.dash-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.stat-cell {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
position: relative;
overflow: hidden;
}
.stat-cell .stat-k {
font-size: 9.5px;
color: var(--ink-3);
font-family: var(--font-mono);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 4px;
}
.stat-cell .stat-v {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1;
}
.stat-cell .stat-d {
font-size: 10px;
color: var(--ok);
font-family: var(--font-mono);
margin-top: 4px;
}
.dash-table {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.dash-row {
display: grid;
grid-template-columns: 22px 1fr auto auto;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-bottom: 1px solid var(--border);
font-size: 12px;
}
.dash-row:last-child { border-bottom: 0; }
.dash-row .ava {
width: 22px; height: 22px;
border-radius: 50%;
background: var(--bg-3);
display: grid; place-items: center;
font-size: 9px; font-weight: 600;
font-family: var(--font-mono);
color: var(--ink);
}
.dash-row .name { font-weight: 500; }
.dash-row .meta {
color: var(--ink-3);
font-size: 10.5px;
font-family: var(--font-mono);
}
.dash-row .badge {
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 3px 7px;
border-radius: 999px;
font-family: var(--font-mono);
}
.dash-row .badge.hot { background: var(--accent); color: #fff; }
.dash-row .badge.warm { background: var(--bg-2); color: var(--accent-2); border: 1px solid var(--border); }
.dash-row .badge.new { background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--border); }
.dash-row .badge.book { background: rgba(93,219,141,0.12); color: var(--ok); border: 1px solid rgba(93,219,141,0.2); }
.dash-pulse {
position: absolute;
top: 12px; right: 12px;
display: flex; align-items: center; gap: 6px;
font-size: 10px;
font-family: var(--font-mono);
color: var(--ok);
}
.dash-pulse i {
width: 6px; height: 6px; border-radius: 50%;
background: var(--ok);
box-shadow: 0 0 0 0 var(--ok);
animation: pulse 1.8s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(93,219,141,0.6); }
100% { box-shadow: 0 0 0 10px rgba(93,219,141,0); }
}
/* Floating SMS notification overlay */
.float-notif {
position: absolute;
bottom: -28px;
left: -32px;
background: var(--bg);
border: 1px solid var(--border-strong);
border-radius: 14px;
padding: 14px 16px;
width: 290px;
box-shadow: var(--shadow-big);
animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.float-notif .row { display: flex; align-items: center; gap: 10px; }
.float-notif .badge-dot {
width: 30px; height: 30px;
border-radius: 8px;
background: var(--accent);
display: grid; place-items: center;
color: #fff;
position: relative;
flex-shrink: 0;
}
.float-notif .badge-dot::after {
content: ""; position: absolute;
top: -3px; right: -3px;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--ok);
border: 2px solid var(--bg);
animation: pulse 1.8s infinite;
}
.float-notif .who { font-size: 12.5px; font-weight: 500; }
.float-notif .sub { font-size: 10.5px; color: var(--ink-3); font-family: var(--font-mono); }
.float-notif .quote {
margin-top: 10px;
padding: 9px 12px;
background: var(--bg-1);
border: 1px solid var(--border);
border-radius: 10px;
border-bottom-left-radius: 4px;
font-size: 12.5px;
color: var(--ink);
line-height: 1.4;
position: relative;
overflow: hidden;
}
.float-notif .quote .typing-dots {
display: inline-flex; gap: 3px; margin-left: 4px;
vertical-align: middle;
}
.float-notif .quote .typing-dots i {
width: 4px; height: 4px; border-radius: 50%;
background: var(--ink-3);
animation: blink 1.2s infinite;
}
.float-notif .quote .typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.float-notif .quote .typing-dots i:nth-child(3) { animation-delay: 0.3s; }
.float-notif .meta-row {
display: flex; align-items: center; justify-content: space-between;
margin-top: 8px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--ink-3);
letter-spacing: 0.04em;
}
.float-notif .meta-row .ok { color: var(--ok); }
@media (max-width: 820px) {
.preview-body { grid-template-columns: 1fr; }
.dash-side { display: none; }
.float-notif { display: none; }
}
/* ─── Proof strip ─── */
.proof {
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--bg-1);
padding: 22px 0;
}
.proof-inner {
display: flex;
align-items: center;
gap: 40px;
flex-wrap: wrap;
justify-content: space-between;
}
.proof-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
flex-shrink: 0;
}
.proof-logos {
display: flex;
align-items: center;
gap: 36px;
flex-wrap: wrap;
}
.proof-logo {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink-2);
display: flex;
align-items: center;
gap: 8px;
opacity: 0.7;
transition: opacity .2s;
}
.proof-logo:hover { opacity: 1; }
.proof-logo .dot {
width: 14px; height: 14px;
border-radius: 4px;
background: var(--ink-3);
}
/* ─── Section header ─── */
.sec-head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: 48px;
align-items: end;
margin-bottom: 56px;
}
.sec-head.center {
grid-template-columns: 1fr;
text-align: center;
justify-items: center;
align-items: center;
gap: 18px;
}
.sec-head h2 { max-width: 18ch; }
.sec-head p { color: var(--ink-2); }
@media (max-width: 820px) {
.sec-head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
}
/* ─── How it works ─── */
.how {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
.step {
background: var(--bg-1);
border: 1px solid var(--border);
border-radius: var(--rad-lg);
padding: 28px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 360px;
transition: border-color .2s ease, transform .2s ease;
}
.step:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.step-num {
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.step-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.02em;
margin: 8px 0 8px;
}
.step-desc {
color: var(--ink-2);
font-size: 14px;
line-height: 1.5;
margin: 0 0 20px;
}
.step-viz {
margin-top: auto;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px;
min-height: 140px;
position: relative;
overflow: hidden;
}
@media (max-width: 820px) {
.how { grid-template-columns: 1fr; }
}
/* ─── AI Demo ─── */
.demo-wrap {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: 56px;
align-items: center;
}
.demo-controls .demo-bullets {
margin-top: 32px;
display: flex;
flex-direction: column;
gap: 16px;
}
.demo-bullet {
display: flex;
gap: 14px;
padding: 14px 16px;
border-radius: 12px;
background: var(--bg-1);
border: 1px solid var(--border);
cursor: pointer;
transition: border-color .2s, background .2s, transform .2s;
text-align: left;
font-family: inherit;
color: inherit;
position: relative;
align-items: flex-start;
width: 100%;
}
.demo-bullet:hover {
border-color: var(--border-strong);
transform: translateY(-1px);
}
.demo-bullet:hover .demo-bullet-jump { opacity: 1; transform: translateX(0); }
.demo-bullet.active {
border-color: var(--accent);
background: var(--accent-soft);
}
.demo-bullet .demo-bullet-jump {
margin-left: auto;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--accent);
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 4px;
opacity: 0;
transform: translateX(-3px);
transition: opacity .2s, transform .2s;
align-self: center;
flex-shrink: 0;
}
.demo-bullet.active .demo-bullet-jump { opacity: 0.65; transform: translateX(0); }
.demo-bullet .demo-bullet-jump svg { width: 11px; height: 11px; }
.demo-bullet .num {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
margin-top: 2px;
}
.demo-bullet.active .num { color: var(--accent); }
.demo-bullet h4 {
margin: 0 0 4px;
font-size: 15px;
font-weight: 500;
letter-spacing: -0.01em;
}
.demo-bullet p {
margin: 0;
font-size: 13px;
color: var(--ink-3);
line-height: 1.45;
}
.phone {
background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
border: 1px solid var(--border-strong);
border-radius: 32px;
padding: 18px;
max-width: 380px;
margin: 0 auto;
box-shadow: var(--shadow-big);
}
.phone-screen {
background: var(--bg);
border-radius: 22px;
border: 1px solid var(--border);
height: 580px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.phone-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 18px 8px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-2);
}
.phone-head {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px 14px;
border-bottom: 1px solid var(--border);
}
.phone-head .ava {
width: 34px; height: 34px;
border-radius: 50%;
background: var(--accent);
display: grid; place-items: center;
color: #fff; font-size: 13px; font-weight: 600;
font-family: var(--font-display);
}
.phone-head .info { display: flex; flex-direction: column; gap: 1px; }
.phone-head .info .n { font-size: 13.5px; font-weight: 500; }
.phone-head .info .s {
font-size: 10.5px;
color: var(--ok);
font-family: var(--font-mono);
display: flex; align-items: center; gap: 6px;
}
.phone-head .info .s::before {
content: ""; width: 5px; height: 5px;
border-radius: 50%; background: var(--ok);
}
.phone-body {
flex: 1;
padding: 14px 14px 12px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
}
.phone-body::-webkit-scrollbar { display: none; }
.bubble {
max-width: 78%;
padding: 9px 13px;
border-radius: 16px;
font-size: 13.5px;
line-height: 1.35;
animation: bubbleIn .4s cubic-bezier(.3,.7,.4,1) both;
}
.bubble.them {
align-self: flex-start;
background: var(--bg-2);
color: var(--ink);
border-bottom-left-radius: 4px;
}
.bubble.me {
align-self: flex-end;
background: var(--accent);
color: #fff;
border-bottom-right-radius: 4px;
}
.bubble .ts {
display: block;
font-family: var(--font-mono);
font-size: 9.5px;
margin-top: 4px;
opacity: 0.55;
}
@keyframes bubbleIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.typing {
align-self: flex-start;
background: var(--bg-2);
padding: 10px 14px;
border-radius: 16px;
border-bottom-left-radius: 4px;
display: flex;
gap: 4px;
}
.typing i {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--ink-3);
animation: blink 1.2s infinite;
}
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink {
0%, 60%, 100% { opacity: 0.3; }
30% { opacity: 1; }
}
.phone-actions {
border-top: 1px solid var(--border);
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-1);
}
.phone-actions .btn-cap {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
display: flex;
align-items: center;
gap: 8px;
}
.phone-actions .reset {
background: var(--bg-2);
border: 1px solid var(--border);
color: var(--ink-2);
padding: 6px 12px;
border-radius: 999px;
font-size: 11px;
font-family: var(--font-mono);
}
@media (max-width: 980px) {
.demo-wrap { grid-template-columns: 1fr; }
}
/* ─── Features grid ─── */
.features {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
}
.feature {
background: var(--bg-1);
border: 1px solid var(--border);
border-radius: var(--rad-lg);
padding: 24px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 220px;
transition: border-color .2s, transform .2s, box-shadow .2s;
}
.feature:hover {
border-color: var(--border-strong);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(20,19,26,0.06);
}
/* Icon in soft squircle — matches hero action list */
.feature-ico {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--accent-soft);
color: var(--accent);
display: grid;
place-items: center;
border: 1px solid color-mix(in oklab, var(--accent) 18%, transparent);
margin-bottom: 4px;
}
.feature-ico svg { width: 22px; height: 22px; }
/* Reusable orange-fill + white-stroke statement (matches hero "All on autopilot") */
.outline-stroke {
color: var(--accent);
-webkit-text-stroke: 1.5px #fff;
text-stroke: 1.5px #fff;
paint-order: stroke fill;
filter: drop-shadow(0 1px 0 rgba(20,19,26,0.06));
}
/* Early Access section */
.early-access {
text-align: center;
max-width: 760px;
margin: 0 auto;
}
.early-perks {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 56px;
text-align: left;
}
.early-perk {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 22px;
background: var(--bg-1);
border: 1px solid var(--border);
border-radius: var(--rad-lg);
}
.early-perk .perk-num {
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent);
letter-spacing: 0.08em;
text-transform: uppercase;
flex-shrink: 0;
padding-top: 2px;
}
.early-perk .perk-h {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--ink);
}
.early-perk .perk-p {
font-size: 13px;
color: var(--ink-3);
margin-top: 4px;
line-height: 1.45;
}
@media (max-width: 760px) {
.early-perks { grid-template-columns: 1fr; }
}
/* Pricing channel toggle (SMS / iMessage) — iMessage variant uses blue thumb */
.channel-toggle.imessage-mode .thumb {
background: #0a84ff;
box-shadow: 0 4px 14px rgba(10, 132, 255, 0.28);
}
.channel-toggle.imessage-mode button:not(.active) .save-tag {
background: rgba(10, 132, 255, 0.1);
color: #0a84ff;
}
/* Plan footnote line (replaces annual-savings tag) */
.plan-foot {
margin: 12px 0 0;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--ink-3);
letter-spacing: 0.02em;
text-align: center;
}
/* Single-plan layout (iMessage Pro) */
.pricing.pricing-single {
display: grid;
grid-template-columns: minmax(0, 1fr) !important;
max-width: 520px;
margin: 0 auto;
gap: 22px;
}
.pricing-single .imessage-plan {
background: linear-gradient(180deg, #f2f8ff, #fff);
border-color: #0a84ff;
box-shadow: 0 0 0 1px #0a84ff, 0 24px 60px rgba(10, 132, 255, 0.16);
}
.pricing-single .imsg-badge {
background: #0a84ff;
box-shadow: 0 4px 12px rgba(10, 132, 255, 0.32);
}
.pricing-single .imessage-plan .plan-cta {
background: #0a84ff;
box-shadow: 0 0 0 1px #0a84ff, 0 8px 24px rgba(10, 132, 255, 0.28), inset 0 1px 0 rgba(255,255,255,0.22);
}
.pricing-single .imessage-plan .plan-cta:hover { background: #1a8eff; }
.pricing-single .li-tag {
margin-left: 8px;
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.04em;
font-family: var(--font-mono);
text-transform: uppercase;
padding: 2px 6px;
border-radius: 999px;
background: rgba(10, 132, 255, 0.1);
color: #0a84ff;
}
.imessage-why {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 20px 22px;
background: rgba(10, 132, 255, 0.06);
border: 1px solid rgba(10, 132, 255, 0.18);
border-radius: var(--rad-lg);
font-size: 13.5px;
color: var(--ink-2);
line-height: 1.5;
overflow: hidden;
word-break: break-word;
min-width: 0;
}
.imessage-why-ico {
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(10, 132, 255, 0.1);
color: #0a84ff;
display: grid;
place-items: center;
flex-shrink: 0;
}
.imessage-why strong { color: var(--ink); }
/* ─── Booking modal (embedded Calendly) ──────────────────────────────── */
.booking-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.booking-backdrop {
position: absolute;
inset: 0;
background: rgba(20, 19, 26, 0.55);
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
animation: bookingFadeIn .25s ease both;
}
.booking-sheet {
position: relative;
width: 100%;
max-width: 1080px;
height: min(86vh, 760px);
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow:
0 1px 0 rgba(255,255,255,0.5) inset,
0 30px 80px rgba(20, 19, 26, 0.25),
0 4px 12px rgba(20, 19, 26, 0.08);
animation: bookingSheetIn .35s cubic-bezier(.2,.7,.3,1.05) both;
}
@keyframes bookingFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes bookingSheetIn {
from { opacity: 0; transform: translateY(20px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.booking-close {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid var(--border-strong);
background: #fff;
color: var(--ink);
display: grid;
place-items: center;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
box-shadow: 0 4px 12px rgba(20,19,26,0.08);
}
.booking-close:hover {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.booking-widget {
width: 100%;
height: 100%;
}
.booking-widget iframe {
width: 100% !important;
height: 100% !important;
border: 0;
}
@media (max-width: 640px) {
.booking-modal { padding: 12px; }
.booking-sheet { height: 92vh; border-radius: 14px; }
}
.feature.f-wide { grid-column: span 6; }
.feature.f-third { grid-column: span 4; }
.feature.f-half { grid-column: span 6; }
.feature.f-tall { min-height: 260px; }
.feature .f-tag {
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.feature h3 {
margin: 0;
font-family: var(--font-display);
font-size: 19px;
letter-spacing: -0.02em;
font-weight: 500;
line-height: 1.2;
text-wrap: balance;
}
.feature p {
margin: 0;
font-size: 13.5px;
color: var(--ink-3);
line-height: 1.45;
}
.feature .f-viz {
margin-top: auto;
}
@media (max-width: 980px) {
.feature.f-wide { grid-column: span 12; }
.feature.f-third { grid-column: span 12; }
.feature.f-half { grid-column: span 12; }
}
/* ─── Stats band ─── */
.stats-band {
background: var(--bg-1);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 60px 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.stat-big {
display: flex;
flex-direction: column;
gap: 6px;
border-left: 1px solid var(--border);
padding-left: 24px;
}
.stat-big:first-child { border-left: 0; padding-left: 0; }
.stat-big .v {
font-family: var(--font-display);
font-size: clamp(42px, 4vw, 64px);
font-weight: 500;
letter-spacing: -0.04em;
line-height: 0.95;
color: var(--ink);
}
.stat-big .v em {
font-family: var(--font-display);
font-style: normal;
font-weight: 500;
color: var(--accent);
}
.stat-big .l {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 8px;
}
.stat-big .d {
font-size: 13px;
color: var(--ink-2);
}
@media (max-width: 820px) {
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.stat-big:nth-child(3) { border-left: 0; padding-left: 0; }
}
/* ─── Testimonials ─── */
.tests {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 16px;
}
.tst {
background: var(--bg-1);
border: 1px solid var(--border);
border-radius: var(--rad-lg);
padding: 28px;
display: flex;
flex-direction: column;
gap: 18px;
}
.tst.featured {
background:
radial-gradient(400px 200px at 0% 0%, var(--accent-soft), transparent 60%),
var(--bg-1);
border-color: var(--border-strong);
}
.tst .q {
font-family: var(--font-display);
font-size: 22px;
letter-spacing: -0.02em;
line-height: 1.25;
font-weight: 500;
text-wrap: balance;
}
.tst.featured .q { font-size: 28px; }
.tst .q em {
font-family: var(--font-display);
font-style: normal;
font-weight: 700;
color: var(--accent);
}
.tst .who {
display: flex;
align-items: center;
gap: 10px;
margin-top: auto;
}
.tst .who .ava {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--bg-3);
display: grid; place-items: center;
font-size: 12px; font-weight: 600;
font-family: var(--font-mono);
}
.tst .who .n { font-size: 13.5px; font-weight: 500; }
.tst .who .r { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); }
.tst .metric {
display: flex;
align-items: baseline;
gap: 8px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.tst .metric .num {
font-family: var(--font-display);
font-size: 28px;
font-weight: 500;
letter-spacing: -0.03em;
color: var(--accent);
}
.tst .metric .lbl {
font-size: 12px;
color: var(--ink-3);
}
@media (max-width: 980px) {
.tests { grid-template-columns: 1fr; }
}
/* ─── Pricing ─── */
.pricing {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.plan {
background: var(--bg-1);
border: 1px solid var(--border);
border-radius: var(--rad-lg);
padding: 32px;
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
}
.plan.featured {
background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 8%, var(--bg-1)), var(--bg-1));
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent), 0 20px 60px var(--accent-glow);
}
.plan-badge {
position: absolute;
top: -10px; left: 24px;
background: var(--accent);
color: #fff;
padding: 4px 10px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
font-family: var(--font-mono);
}
.plan-name {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-3);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.plan-price {
display: flex; align-items: baseline; gap: 6px;
font-family: var(--font-display);
}
.plan-price .num {
font-size: 48px;
font-weight: 500;
letter-spacing: -0.03em;
line-height: 1;
}
.plan-price .per {
font-size: 13px;
color: var(--ink-3);
font-family: var(--font-sans);
}
.plan-desc {
font-size: 13.5px;
color: var(--ink-2);
margin: -6px 0 0;
}
.plan ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.plan li {
font-size: 13.5px;
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--ink-2);
}
.plan li::before {
content: "";
flex-shrink: 0;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--accent-soft);
margin-top: 2px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
}
.plan .plan-cta { margin-top: auto; }
@media (max-width: 980px) {
.pricing { grid-template-columns: 1fr; }
}
/* ─── FAQ ─── */
.faq {
max-width: 760px;
margin: 0 auto;
}
.faq-item {
border-bottom: 1px solid var(--border);
padding: 20px 0;
cursor: pointer;
}
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q {
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--font-display);
font-size: 19px;
font-weight: 500;
letter-spacing: -0.015em;
gap: 16px;
}
.faq-q .ico {
width: 28px; height: 28px;
flex-shrink: 0;
display: grid;
place-items: center;
border: 1px solid var(--border-strong);
border-radius: 50%;
color: var(--ink-3);
transition: background .2s, color .2s, border-color .2s, transform .2s;
position: relative;
}
.faq-q .ico svg {
grid-area: 1 / 1;
transition: opacity .2s, transform .2s;
}
.faq-q .ico .ico-minus { opacity: 0; transform: scale(0.6); }
.faq-item[data-open="1"] .faq-q .ico {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.faq-item[data-open="1"] .faq-q .ico .ico-plus { opacity: 0; transform: scale(0.6); }
.faq-item[data-open="1"] .faq-q .ico .ico-minus { opacity: 1; transform: scale(1); }
.faq-a {
max-height: 0;
overflow: hidden;
color: var(--ink-2);
font-size: 14.5px;
line-height: 1.55;
transition: max-height .3s ease, padding-top .3s ease;
}
.faq-item[data-open="1"] .faq-a {
max-height: 240px;
padding-top: 14px;
}
.faq-a p { margin: 0; max-width: 60ch; }
/* ─── Closing CTA ─── */
.closing {
position: relative;
background: linear-gradient(180deg, var(--bg-1), var(--bg));
border-top: 1px solid var(--border);
overflow: hidden;
}
.closing::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(800px 400px at 50% 100%, var(--accent-glow), transparent 60%);
pointer-events: none;
}
.closing-inner {
position: relative;
text-align: center;
padding: 100px 0 120px;
}
.closing-inner h2 { margin: 0 auto 18px; max-width: 18ch; }
.closing-inner p { margin: 0 auto 36px; max-width: 52ch; }
.closing-ctas { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.closing-foot {
margin-top: 28px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.06em;
}
/* ─── Footer ─── */
.foot {
border-top: 1px solid var(--border);
padding: 56px 0 28px;
}
.foot-grid {
display: grid;
grid-template-columns: 1.5fr repeat(4, 1fr);
gap: 32px;
margin-bottom: 56px;
}
.foot-brand {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
}
.foot-brand .mark {
width: 32px;
height: 32px;
border-radius: 9px;
overflow: hidden;
display: grid;
place-items: center;
box-shadow: 0 0 14px var(--accent-glow);
}
.foot-brand .mark img {
width: 100%;
height: 100%;
object-fit: cover;
}
.foot-blurb {
font-size: 13.5px;
color: var(--ink-3);
max-width: 32ch;
line-height: 1.5;
}
.foot-col h5 {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--ink-3);
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 16px;
}
.foot-col a {
display: block;
font-size: 13.5px;
color: var(--ink-2);
padding: 4px 0;
transition: color .15s;
}
.foot-col a:hover { color: var(--ink); }
.foot-bot {
border-top: 1px solid var(--border);
padding-top: 24px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-4);
letter-spacing: 0.04em;
}
@media (max-width: 820px) {
.foot-grid { grid-template-columns: 1fr 1fr; }
}
/* ─── Editorial mode tweaks ─── */
[data-mode="editorial"] .h-display,
[data-mode="editorial"] .h1 {
font-family: var(--font-serif);
font-weight: 400;
letter-spacing: -0.02em;
}
[data-mode="editorial"] .h-display em,
[data-mode="editorial"] .h1 em {
font-style: italic;
color: var(--accent);
}
[data-mode="editorial"] .nav-logo .mark,
[data-mode="editorial"] .foot-brand .mark {
background: var(--bg-3);
color: var(--bg);
}
[data-mode="editorial"] .preview {
background: var(--bg-1);
}
[data-mode="editorial"] .btn--primary {
background: var(--bg-3);
color: var(--bg);
box-shadow: 0 0 0 1px var(--bg-3), 0 8px 24px rgba(0,0,0,0.15);
}
[data-mode="editorial"] .btn--primary:hover { background: #2a2620; }
[data-mode="editorial"] .plan.featured {
background: var(--bg-3);
color: var(--bg);
}
[data-mode="editorial"] .plan.featured .plan-name,
[data-mode="editorial"] .plan.featured .plan-desc,
[data-mode="editorial"] .plan.featured .plan-price .per,
[data-mode="editorial"] .plan.featured li { color: var(--bg-1); }
[data-mode="editorial"] .plan.featured li { color: #d8d2c2; }
[data-mode="editorial"] .plan.featured li::before {
background: rgba(255,255,255,0.1);
background-image: url("data:image/svg+xml;utf8,");
}
[data-mode="editorial"] .plan.featured .btn--primary {
background: var(--accent);
color: #fff;
}
/* ─── Mono mode tweaks ─── */
[data-mode="mono"] .h-display,
[data-mode="mono"] .h1,
[data-mode="mono"] .h2 {
font-family: var(--font-sans);
font-weight: 700;
letter-spacing: -0.04em;
}
[data-mode="mono"] .h-display em,
[data-mode="mono"] .h1 em {
font-family: var(--font-mono);
font-style: normal;
text-transform: uppercase;
font-size: 0.7em;
font-weight: 500;
letter-spacing: 0;
color: var(--accent);
border: 2px solid var(--accent);
padding: 0 0.2em;
display: inline-block;
transform: translateY(-0.18em);
vertical-align: middle;
}
[data-mode="mono"] .step,
[data-mode="mono"] .feature,
[data-mode="mono"] .tst,
[data-mode="mono"] .plan,
[data-mode="mono"] .surface,
[data-mode="mono"] .card,
[data-mode="mono"] .preview {
border-radius: 0;
border-width: 1.5px;
}
[data-mode="mono"] .btn { border-radius: 0; }
[data-mode="mono"] .nav-logo .mark,
[data-mode="mono"] .foot-brand .mark { border-radius: 4px; }
[data-mode="mono"] .stat-big .v em { font-family: var(--font-mono); font-style: normal; }
[data-mode="mono"] .tst .q em { font-family: var(--font-mono); font-style: normal; }
/* ─── Compact density ─── */
[data-density="compact"] {
--density: 0.7;
}
[data-density="comfy"] {
--density: 1.2;
}
/* ─── Misc ─── */
.grid-bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--border) 1px, transparent 1px),
linear-gradient(90deg, var(--border) 1px, transparent 1px);
background-size: 32px 32px;
mask-image: radial-gradient(circle at center, black, transparent 70%);
-webkit-mask-image: radial-gradient(circle at center, black, transparent 70%);
opacity: 0.4;
pointer-events: none;
}
.spark {
display: inline-block;
width: 1em; height: 1em;
vertical-align: -0.15em;
color: var(--accent);
}
/* ─── Live activity ticker ─────────────────────────────────────────────── */
.ticker {
background: var(--bg);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
overflow: hidden;
}
.ticker-inner { display: flex; align-items: center; }
.ticker-label {
flex-shrink: 0;
display: flex; align-items: center; gap: 10px;
padding: 16px 20px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink);
border-right: 1px solid var(--border);
background: var(--bg-1);
}
.ticker-label::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 0 var(--accent);
animation: tpulse 1.6s infinite;
}
@keyframes tpulse {
0% { box-shadow: 0 0 0 0 var(--accent-glow); }
100% { box-shadow: 0 0 0 10px transparent; }
}
.ticker-track {
flex: 1; overflow: hidden; position: relative;
mask-image: linear-gradient(90deg, transparent, black 40px, black calc(100% - 40px), transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, black 40px, black calc(100% - 40px), transparent);
}
.ticker-track-inner {
display: flex; gap: 28px; align-items: center;
width: max-content; padding: 16px 0;
animation: tickerSlide 60s linear infinite;
}
@keyframes tickerSlide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.ticker-item {
display: inline-flex; align-items: center; gap: 10px;
font-size: 13px; white-space: nowrap; color: var(--ink-2);
}
.ticker-item .ico {
width: 22px; height: 22px; border-radius: 6px;
background: var(--accent-soft); color: var(--accent);
display: grid; place-items: center; flex-shrink: 0;
}
.ticker-item .ico--ok { background: rgba(31,138,91,0.1); color: var(--ok); }
.ticker-item .ico--warm { background: var(--bg-1); color: var(--ink-2); }
.ticker-item strong { color: var(--ink); font-weight: 500; }
.ticker-item .time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.ticker-item .sep {
width: 4px; height: 4px; border-radius: 50%;
background: var(--ink-4); flex-shrink: 0;
}
@media (max-width: 820px) {
.ticker-label { padding: 12px 14px; font-size: 10px; }
.ticker-item { font-size: 12px; }
}
/* ─── Scroll reveal ───────────────────────────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal[data-d="1"] { transition-delay: 0.08s; }
.reveal[data-d="2"] { transition-delay: 0.16s; }
.reveal[data-d="3"] { transition-delay: 0.24s; }
/* ─── Pricing billing toggle ──────────────────────────────────────────── */
.billing-toggle {
display: inline-flex;
align-items: stretch;
padding: 4px;
background: var(--bg-1);
border: 1px solid var(--border);
border-radius: 999px;
margin: 0 auto 36px;
position: relative;
}
.billing-toggle button {
appearance: none;
border: 0;
background: transparent;
padding: 8px 18px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--ink-3);
border-radius: 999px;
cursor: pointer;
transition: color .2s;
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
flex: 1 1 auto;
white-space: nowrap;
}
.billing-toggle button.active { color: #fff; }
.billing-toggle .thumb {
position: absolute;
top: 4px;
bottom: 4px;
background: var(--accent);
border-radius: 999px;
transition: left .25s cubic-bezier(.3,.7,.4,1), width .25s cubic-bezier(.3,.7,.4,1);
box-shadow: 0 4px 14px var(--accent-glow);
z-index: 0;
}
.billing-toggle .save-tag {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.04em;
padding: 2px 6px;
border-radius: 999px;
background: rgba(255,255,255,0.22);
}
.billing-toggle button:not(.active) .save-tag {
background: var(--accent-soft);
color: var(--accent);
}
/* ─── Live notification card (floating, replaces voice/call card) ─────── */
.float-notif {
position: absolute;
bottom: -28px;
left: -32px;
background: var(--bg);
border: 1px solid var(--border-strong);
border-radius: 14px;
padding: 14px 16px;
width: 300px;
box-shadow: var(--shadow-big);
animation: floaty 6s ease-in-out infinite;
}
.float-notif .row { display: flex; align-items: center; gap: 10px; }
.float-notif .icobox {
width: 32px; height: 32px;
border-radius: 9px;
background: var(--accent);
color: #fff;
display: grid; place-items: center;
position: relative;
flex-shrink: 0;
}
.float-notif .icobox::after {
content: ""; position: absolute;
top: -3px; right: -3px;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--ok);
border: 2px solid var(--bg);
animation: pulse 1.8s infinite;
}
.float-notif .who { font-size: 12.5px; font-weight: 500; }
.float-notif .sub { font-size: 10.5px; color: var(--ink-3); font-family: var(--font-mono); }
.float-notif .body {
margin-top: 10px;
padding: 10px 12px;
background: var(--bg-1);
border: 1px solid var(--border);
border-radius: 10px;
border-bottom-left-radius: 4px;
font-size: 12.5px;
color: var(--ink);
line-height: 1.4;
min-height: 36px;
}
.float-notif .meta-row {
display: flex; align-items: center; justify-content: space-between;
margin-top: 8px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--ink-3);
letter-spacing: 0.04em;
}
.float-notif .meta-row .ok { color: var(--ok); }
@media (max-width: 820px) { .float-notif { display: none; } }
/* ─── Light-mode polish (overrides for default light tokens) ──────────── */
:root:not([data-mode="midnight"]) .nav {
background: color-mix(in oklab, var(--bg) 85%, transparent);
}
:root:not([data-mode="midnight"]) .preview {
background: linear-gradient(180deg, #fff, var(--bg));
}
:root:not([data-mode="midnight"]) .dash-side,
:root:not([data-mode="midnight"]) .stat-cell,
:root:not([data-mode="midnight"]) .dash-table,
:root:not([data-mode="midnight"]) .preview-url {
background: #fff;
}
:root:not([data-mode="midnight"]) .dash-side .nav-item.active {
background: var(--bg-1);
}
:root:not([data-mode="midnight"]) .dash-row .ava,
:root:not([data-mode="midnight"]) .phone-head .ava {
background: var(--bg-3);
color: #fff;
}
:root:not([data-mode="midnight"]) .hero-meta .avatar {
background: var(--bg-1);
color: var(--ink);
border-color: var(--bg);
}
:root:not([data-mode="midnight"]) .step-viz,
:root:not([data-mode="midnight"]) .feature {
background: #fff;
}
:root:not([data-mode="midnight"]) .step {
background: #fff;
}
:root:not([data-mode="midnight"]) .tst {
background: #fff;
}
:root:not([data-mode="midnight"]) .plan {
background: #fff;
}
:root:not([data-mode="midnight"]) .phone {
background: linear-gradient(180deg, #fff, var(--bg-1));
}
:root:not([data-mode="midnight"]) .phone-screen {
background: #fff;
}
:root:not([data-mode="midnight"]) .bubble.them {
background: var(--bg-1);
border: 1px solid var(--border);
}
:root:not([data-mode="midnight"]) .phone-actions { background: var(--bg); }
:root:not([data-mode="midnight"]) .stat-cell { background: #fff; }
:root:not([data-mode="midnight"]) .hero-pill { background: #fff; }
:root:not([data-mode="midnight"]) .ticker { background: var(--bg-1); }
:root:not([data-mode="midnight"]) .ticker-label { background: #fff; }
:root:not([data-mode="midnight"]) .stats-band { background: #fff; }
:root:not([data-mode="midnight"]) .closing {
background: linear-gradient(180deg, var(--bg), var(--bg-1));
}
:root:not([data-mode="midnight"]) .proof { background: #fff; }
/* Subtle paper grain on light bg only */
:root:not([data-mode="midnight"]) body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 100;
background-image: radial-gradient(rgba(20,19,26,0.025) 1px, transparent 1px);
background-size: 3px 3px;
opacity: 0.6;
mix-blend-mode: multiply;
}
/* ─── Hero phone (live SMS preview) ──────────────────────────────────── */
/* ─── Hero brand line (above icon-action list) ────────────────────────── */
.hero-brand {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--font-display);
font-size: 30px;
font-weight: 600;
letter-spacing: -0.025em;
color: var(--ink);
line-height: 1;
}
.hero-brand-mark {
width: 46px;
height: 46px;
border-radius: 12px;
overflow: hidden;
display: grid;
place-items: center;
box-shadow: 0 4px 18px var(--accent-glow), 0 0 0 1px rgba(20,19,26,0.04);
flex-shrink: 0;
}
.hero-brand-mark img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-brand-name {
font-weight: 600;
}
.hero-brand-tag {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
margin-left: 4px;
padding-left: 14px;
border-left: 1px solid var(--border);
align-self: center;
line-height: 1.2;
}
/* ─── Hero icon-action list ───────────────────────────────────────────── */
.hero-actions {
list-style: none;
padding: 0;
margin: 24px 0 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.hero-action {
display: flex;
align-items: center;
gap: 18px;
font-family: var(--font-display);
font-size: clamp(28px, 3.4vw, 44px);
letter-spacing: -0.025em;
font-weight: 500;
line-height: 1.05;
color: var(--ink);
}
.hero-action-ico {
width: 52px;
height: 52px;
border-radius: 14px;
background: var(--accent-soft);
color: var(--accent);
display: grid;
place-items: center;
flex-shrink: 0;
border: 1px solid color-mix(in oklab, var(--accent) 18%, transparent);
}
.hero-action-ico svg { width: 24px; height: 24px; }
.hero-suffix {
margin-top: 28px;
width: 100%;
display: block;
font-family: var(--font-display);
font-size: clamp(32px, 3.4vw, 46px);
line-height: 1;
letter-spacing: -0.025em;
color: var(--accent);
font-weight: 700;
-webkit-text-stroke: 1.5px #fff;
text-stroke: 1.5px #fff;
paint-order: stroke fill;
filter: drop-shadow(0 1px 0 rgba(20,19,26,0.06));
}
.hero-suffix em {
font-style: normal;
font-weight: 700;
}
@media (max-width: 980px) {
.hero-action-ico { width: 44px; height: 44px; }
.hero-action-ico svg { width: 20px; height: 20px; }
}
.hero-proof-strip {
display: flex;
align-items: center;
gap: 22px;
margin-top: 36px;
}
.hero-proof-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.hero-proof-item .v {
font-family: var(--font-display);
font-size: 30px;
font-weight: 500;
letter-spacing: -0.03em;
line-height: 1;
}
.hero-proof-item .v span {
font-size: 14px;
color: var(--ink-3);
font-weight: 400;
letter-spacing: -0.01em;
margin-left: 1px;
}
.hero-proof-item .l {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
}
.hero-proof-sep {
width: 1px;
height: 32px;
background: var(--border);
}
/* ─── Hero text column ────────────────────────────────────────────────── */
.hero-text { display: flex; flex-direction: column; }
.hero-text .hero-ctas { margin-top: 32px; }
.hero-text .hero-meta { margin-top: 28px; }
.hero-phone-col {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.hero-phone-wrap {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
/* Stacked slot: pipeline strip OR booked card, cross-faded */
.hero-stack-top {
position: relative;
width: 100%;
max-width: 380px;
}
.hero-stack-slot {
width: 100%;
transition: opacity .45s cubic-bezier(.2,.7,.3,1), transform .45s cubic-bezier(.2,.7,.3,1);
}
.hero-stack-slot.swap-out {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(-6px) scale(0.98);
pointer-events: none;
}
.hero-stack-slot.swap-in {
position: relative;
opacity: 1;
transform: translateY(0) scale(1);
}
/* ─── Lead source card (top of flow) ──────────────────────────────────── */
.source-card {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
max-width: 380px;
padding: 14px 16px;
background:
linear-gradient(180deg, #ffffff, var(--bg));
border: 0.5px solid var(--border-strong);
border-radius: 18px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.8) inset,
0 12px 28px rgba(20, 19, 26, 0.08),
0 3px 8px rgba(20, 19, 26, 0.04);
opacity: 0;
transform: translateY(-8px) scale(0.97);
transition: opacity .4s cubic-bezier(.2,.7,.3,1), transform .4s cubic-bezier(.2,.7,.3,1);
position: relative;
}
.source-card.in {
opacity: 1;
transform: translateY(0) scale(1);
}
.source-logo {
width: 38px;
height: 38px;
border-radius: 10px;
overflow: hidden;
display: grid;
place-items: center;
flex-shrink: 0;
box-shadow:
0 1px 0 rgba(255,255,255,0.4) inset,
0 2px 6px rgba(20, 19, 26, 0.12),
0 0 0 0.5px rgba(20,19,26,0.06);
}
.source-logo svg { width: 100%; height: 100%; }
.source-text { flex: 1; min-width: 0; }
.source-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
min-width: 0;
}
.source-name {
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
white-space: nowrap;
}
.source-ts {
font-size: 10.5px;
font-family: var(--font-mono);
color: var(--ok);
letter-spacing: 0.02em;
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 5px;
}
.source-ts::before {
content: "";
width: 5px; height: 5px;
border-radius: 50%;
background: var(--ok);
box-shadow: 0 0 0 0 var(--ok);
animation: tpulse 1.4s infinite;
}
.source-detail {
font-size: 11.5px;
color: var(--ink-3);
margin-top: 2px;
font-family: var(--font-mono);
letter-spacing: 0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.source-pulse {
display: flex;
flex-direction: column;
gap: 2px;
flex-shrink: 0;
}
.source-pulse span {
width: 4px; height: 4px; border-radius: 50%;
background: var(--ok);
opacity: 0.4;
}
.source-pulse span:nth-child(1) { animation: sourcePulse 1.4s 0s infinite; }
.source-pulse span:nth-child(2) { animation: sourcePulse 1.4s 0.2s infinite; }
.source-pulse span:nth-child(3) { animation: sourcePulse 1.4s 0.4s infinite; }
@keyframes sourcePulse {
0%, 100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 1; transform: scale(1.4); }
}
/* ─── Vertical connector between stacked flow elements ────────────────── */
.flow-connector {
width: 2px;
height: 22px;
background: var(--border);
position: relative;
margin: 4px 0;
border-radius: 2px;
overflow: hidden;
}
.flow-connector[data-state="done"] { background: var(--accent); }
.flow-connector[data-state="active"]::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent, var(--accent), transparent);
animation: connectorFlow 1.4s linear infinite;
}
@keyframes connectorFlow {
from { transform: translateY(-100%); }
to { transform: translateY(100%); }
}
/* ─── Pipeline strip (above phone) ─────────────────────────────────────── */
.pipeline {
display: flex;
align-items: center;
width: 100%;
max-width: 380px;
padding: 16px 20px;
background:
linear-gradient(180deg, rgba(255,255,255,0.7), rgba(250,250,246,0.5));
border: 0.5px solid var(--border-strong);
border-radius: 18px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.8) inset,
0 8px 24px rgba(20, 19, 26, 0.06),
0 2px 6px rgba(20, 19, 26, 0.04);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
}
.pipeline-stage {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
position: relative;
flex-shrink: 0;
}
.pipeline-dot {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg-1);
border: 1.5px solid var(--border-strong);
display: grid;
place-items: center;
color: var(--ink-3);
transition: background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.pipeline-stage[data-state="done"] .pipeline-dot {
background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 70%, white), var(--accent));
border-color: var(--accent);
color: #fff;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
0 2px 6px var(--accent-glow);
}
.pipeline-stage[data-state="active"] .pipeline-dot {
background: linear-gradient(180deg, #fff, var(--bg));
border-color: var(--accent);
color: var(--accent);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.8),
0 0 0 4px var(--accent-soft),
0 2px 10px var(--accent-glow);
animation: pipelinePulse 1.8s ease-in-out infinite;
transform: scale(1.04);
}
@keyframes pipelinePulse {
0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 0 0 4px var(--accent-soft), 0 2px 10px var(--accent-glow); }
50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 0 0 9px var(--accent-soft), 0 2px 14px var(--accent-glow); }
}
.pipeline-label {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
transition: color .3s;
}
.pipeline-stage[data-state="active"] .pipeline-label { color: var(--accent); }
.pipeline-stage[data-state="done"] .pipeline-label { color: var(--ink); }
.pipeline-line {
flex: 1;
height: 2px;
background: var(--border);
margin: 0 8px;
margin-bottom: 30px; /* align with dots, not labels */
position: relative;
overflow: hidden;
border-radius: 2px;
}
.pipeline-line[data-state="done"] { background: var(--accent); }
.pipeline-line[data-state="flowing"] {
background: var(--border);
}
.pipeline-line[data-state="flowing"]::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
animation: pipelineFlow 1.4s linear infinite;
}
@keyframes pipelineFlow {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
/* ─── Booked card (below phone) ───────────────────────────────────────── */
.booked-card {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
max-width: 380px;
padding: 14px 16px;
background:
linear-gradient(180deg, #ffffff, var(--bg));
border: 0.5px solid var(--border-strong);
border-radius: 18px;
box-shadow:
0 1px 0 rgba(255,255,255,0.8) inset,
0 14px 32px rgba(20, 19, 26, 0.1),
0 4px 10px rgba(20, 19, 26, 0.05);
}
.booked-card.in {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.booked-card .booked-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--accent-soft);
color: var(--accent);
display: grid;
place-items: center;
flex-shrink: 0;
}
.booked-card .booked-icon svg { width: 18px; height: 18px; }
.booked-card .booked-text { flex: 1; min-width: 0; }
.booked-card .booked-title {
font-size: 13.5px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink);
}
.booked-card .booked-meta {
font-size: 11.5px;
font-family: var(--font-mono);
color: var(--ink-3);
margin-top: 2px;
}
.booked-card .booked-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px 3px 6px;
background: rgba(31, 138, 91, 0.1);
color: var(--ok);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: 999px;
}
.booked-card .booked-tag .check svg {
width: 10px;
height: 10px;
}
/* ─── Receipt under "me" bubble ───────────────────────────────────────── */
.hero-receipt {
align-self: flex-end;
font-size: 10px;
font-family: var(--font-mono);
color: var(--ink-3);
margin-top: -1px;
margin-bottom: 4px;
margin-right: 4px;
letter-spacing: 0.02em;
}
.hero-phone {
width: 340px;
background:
linear-gradient(155deg, rgba(255,255,255,0.06), transparent 40%),
linear-gradient(180deg, #232329 0%, #0d0d12 100%);
border: 0.5px solid rgba(255,255,255,0.08);
border-radius: 48px;
padding: 11px;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.5),
0 0 0 6px rgba(20, 19, 26, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.12),
inset 0 -1px 0 rgba(0, 0, 0, 0.6),
0 8px 18px rgba(20, 19, 26, 0.08),
0 30px 60px rgba(20, 19, 26, 0.18),
0 60px 100px rgba(20, 19, 26, 0.12);
position: relative;
}
/* Side power button (right) */
.hero-phone::before {
content: "";
position: absolute;
right: -2px;
top: 130px;
width: 3px;
height: 62px;
background: linear-gradient(270deg, #0a0a0e, #2a2a32);
border-radius: 0 2px 2px 0;
box-shadow: inset -1px 0 0 rgba(255,255,255,0.04);
}
/* Side volume buttons (left) */
.hero-phone::after {
content: "";
position: absolute;
left: -2px;
top: 110px;
width: 3px;
height: 26px;
background: linear-gradient(90deg, #0a0a0e, #2a2a32);
border-radius: 2px 0 0 2px;
box-shadow:
inset 1px 0 0 rgba(255,255,255,0.04),
0 36px 0 -1px #0a0a0e,
0 36px 0 0 #2a2a32;
}
.hero-phone-notch {
position: absolute;
top: 18px;
left: 50%;
transform: translateX(-50%);
width: 116px;
height: 30px;
background:
radial-gradient(ellipse at 28% 50%, #1a1a22 0%, #050507 60%);
border-radius: 999px;
z-index: 4;
box-shadow:
inset 0 1px 1px rgba(0,0,0,0.6),
inset 0 -1px 0 rgba(255,255,255,0.04);
}
/* Front camera */
.hero-phone-notch::before {
content: "";
position: absolute;
right: 14px;
top: 50%;
width: 9px;
height: 9px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, #4a4a55 0%, #1a1a22 35%, #0a0a0e 100%);
transform: translateY(-50%);
box-shadow:
inset 0 0 2px rgba(0,0,0,0.6),
inset 0 1px 0 rgba(255,255,255,0.08);
}
/* Earpiece speaker */
.hero-phone-notch::after {
content: "";
position: absolute;
left: 18px;
top: 50%;
width: 28px;
height: 4px;
border-radius: 2px;
background: linear-gradient(180deg, #050507, #1a1a22);
transform: translateY(-50%);
box-shadow: inset 0 1px 0 rgba(0,0,0,0.6);
}
.hero-phone-screen {
background: var(--bg);
border-radius: 36px;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
height: 560px;
box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.4);
}
/* Subtle glass reflection at top of screen */
.hero-phone-screen::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 80px;
background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
pointer-events: none;
z-index: 5;
opacity: 0.5;
}
.hero-phone-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 28px 8px;
font-family: "Geist", sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--ink);
}
.hero-phone-bar span:first-child { padding-left: 8px; }
.hero-phone-bar span:last-child { padding-right: 4px; color: var(--ink); }
.hero-phone-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px 12px;
border-bottom: 0.5px solid color-mix(in oklab, var(--ink-3) 25%, transparent);
background: color-mix(in oklab, var(--bg) 92%, var(--ink-3));
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
.hero-phone-back {
appearance: none;
border: 0;
background: transparent;
color: #0a84ff;
font-size: 22px;
font-weight: 400;
width: 28px;
cursor: pointer;
line-height: 1;
padding: 0;
}
.hero-phone-who {
display: flex;
align-items: center;
gap: 8px;
flex-direction: column;
}
.hero-phone-who .ava {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--accent);
color: #fff;
display: grid;
place-items: center;
font-size: 13px;
font-weight: 600;
font-family: var(--font-display);
}
.hero-phone-who .n {
font-size: 11px;
font-weight: 500;
color: var(--ink);
text-align: center;
letter-spacing: -0.01em;
}
.hero-phone-who .s {
font-size: 9.5px;
color: var(--ink-3);
font-family: var(--font-mono);
text-align: center;
margin-top: 1px;
white-space: nowrap;
}
.hero-phone-body {
flex: 1;
padding: 14px 12px 12px;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 4px;
position: relative;
}
.hero-phone-body::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 30px;
background: linear-gradient(180deg, var(--bg), transparent);
pointer-events: none;
}
.hero-phone-day {
text-align: center;
font-size: 10.5px;
font-family: var(--font-mono);
color: var(--ink-3);
margin: 4px 0 12px;
letter-spacing: 0.02em;
}
.hero-bubble {
max-width: 76%;
padding: 8px 13px;
font-size: 14px;
line-height: 1.32;
border-radius: 20px;
position: relative;
margin-bottom: 2px;
word-wrap: break-word;
}
.hero-bubble.them {
align-self: flex-start;
background: #e9e9eb;
color: #14131a;
border-bottom-left-radius: 6px;
}
.hero-bubble.me {
align-self: flex-end;
background: linear-gradient(180deg, #0a84ff, #0070e0);
color: #fff;
border-bottom-right-radius: 6px;
box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset;
}
[data-mode="midnight"] .hero-bubble.them { background: #2a2a32; color: #f5f3ef; }
.hero-typing {
align-self: flex-start;
background: #e9e9eb;
padding: 11px 14px;
border-radius: 20px;
border-bottom-left-radius: 6px;
display: flex;
gap: 4px;
}
[data-mode="midnight"] .hero-typing { background: #2a2a32; }
.hero-typing i {
width: 7px; height: 7px;
border-radius: 50%;
background: #8e8e93;
animation: blink 1.2s infinite;
}
.hero-typing i:nth-child(2) { animation-delay: 0.15s; }
.hero-typing i:nth-child(3) { animation-delay: 0.3s; }
.hero-phone-input {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px 16px;
}
.hero-phone-input .input-field {
flex: 1;
height: 32px;
display: flex;
align-items: center;
padding: 0 14px;
background: transparent;
border: 1px solid color-mix(in oklab, var(--ink-3) 28%, transparent);
border-radius: 999px;
font-size: 14px;
color: var(--ink-3);
}
.hero-phone-input .mic {
width: 30px;
height: 30px;
border-radius: 50%;
background: color-mix(in oklab, var(--ink-3) 14%, transparent);
display: grid;
place-items: center;
font-size: 14px;
color: var(--ink-3);
flex-shrink: 0;
}
.hero-phone-home {
width: 134px;
height: 5px;
background: linear-gradient(180deg, #1a1a22, #050507);
border-radius: 999px;
margin: 8px auto 6px;
box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.06);
}
.hero-phone-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px 8px 12px;
background: var(--bg);
border: 1px solid var(--border-strong);
border-radius: 999px;
font-size: 12.5px;
color: var(--ink-2);
box-shadow: var(--shadow-card);
}
.hero-phone-badge .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ok);
box-shadow: 0 0 0 0 rgba(31,138,91,0.4);
animation: pulse 1.8s infinite;
}
.hero-phone-badge strong { color: var(--ink); font-weight: 600; }
@keyframes bubbleIn {
from { opacity: 0; transform: translateY(6px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 980px) {
.hero-phone { width: 320px; }
.hero-phone-screen { height: 500px; }
}