/* =============================================================
EasyPro Plus — Public Marketing Site
Design system tokens + page styles
============================================================= */
:root {
/* Brand — Apple-aligned per official design system (apple.css) */
--ep-blue: #007AFF; /* Apple Blue · primary */
--ep-blue-600: #0056b3; /* Hover / pressed */
--ep-blue-link: #0051D5; /* Link / active toggle */
--ep-blue-50: #f0f7ff;
--ep-blue-100: #e0ecff;
--ep-orange: #FF9500; /* Apple Orange · Immigration */
--ep-green: #34C759; /* Apple Green · success */
--ep-red: #FF3B30; /* Apple Red · destructive */
/* Sophia palette */
--sophia-violet: #8b5cf6;
--sophia-purple: #7c3aed;
--sophia-electric: #4a8bff;
--sophia-glow: rgba(139, 92, 246, 0.35);
/* Module accents — locked to real product UI */
--acc-taxes: #007AFF;
--acc-immigration: #FF9500;
--acc-explain: #8b5cf6;
--acc-legal: #5856D6; /* Apple indigo */
--acc-credit: #FF3B30;
--acc-insurance: #5AC8FA; /* Apple teal */
--acc-business: #FF9500;
--acc-event: #FF2D55; /* Apple pink */
--acc-marketplace: #6e6e73;
--acc-partner: #1d1d1f;
/* Apple neutrals */
--ink: #1d1d1f;
--ink-2: #2c2c2e;
--gray-900: #1d1d1f;
--gray-700: #424245;
--gray-500: #6e6e73;
--gray-400: #a1a1a6;
--gray-300: #d2d2d7;
--gray-200: #e8e8ed;
--gray-150: #efeff2;
--gray-100: #f5f5f7;
--gray-50: #fafafa;
--paper: #ffffff;
/* Surfaces */
--surface: #ffffff;
--surface-alt: #fafafa;
--surface-tinted: #f5f5f7;
--border: #e8e8ed;
--border-strong: #d2d2d7;
/* Dark surfaces */
--dark-bg: #1d1d1f;
--dark-card: #2c2c2e;
--dark-border: rgba(255, 255, 255, 0.10);
--dark-text: #f5f5f7;
--dark-text-muted: #a1a1a6;
/* Apple radii */
--r-xs: 6px;
--r-sm: 8px;
--r-md: 10px;
--r-lg: 12px;
--r-xl: 16px;
--r-2xl: 20px;
--r-pill: 980px; /* Apple capsule */
/* Shadow — Apple soft */
--sh-1: 0 1px 3px rgba(0, 0, 0, 0.04);
--sh-2: 0 2px 12px rgba(0, 0, 0, 0.04);
--sh-3: 0 8px 32px rgba(0, 0, 0, 0.08);
--sh-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 16px 48px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
/* Type — SF Pro stack matches the product */
--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", "Roboto Mono", monospace;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
font-family: var(--font-sans);
color: var(--ink);
background: var(--surface);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "ss01", "cv11";
text-rendering: optimizeLegibility;
}
body {
font-size: 17px;
line-height: 1.5;
letter-spacing: -0.011em;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
/* ---------- Layout primitives ---------- */
.container {
width: min(100% - 48px, 1240px);
margin-inline: auto;
}
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ep-blue);
padding: 7px 14px;
border: 1px solid var(--ep-blue-100);
background: var(--ep-blue-50);
border-radius: var(--r-pill);
white-space: nowrap;
line-height: 1;
}
/* Sophia-branded hero eyebrow */
.eyebrow.sophia {
position: relative;
background: white;
border: 1px solid var(--border);
padding: 8px 16px 8px 12px;
box-shadow: 0 1px 2px rgba(10,14,26,0.04), 0 8px 24px -10px rgba(122, 60, 255, 0.25);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(110deg, #7a3cff 0%, #5a6dff 45%, #2257ff 100%);
}
.eyebrow.sophia .sp {
display: inline-block;
position: relative;
width: 14px; height: 14px;
flex-shrink: 0;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #c6a7ff 0%, #7a3cff 50%, #4a3bd6 100%);
box-shadow: 0 0 0 3px rgba(155, 77, 255, 0.12), 0 0 10px rgba(155, 77, 255, 0.55);
animation: spPulse 2.6s ease-in-out infinite;
}
.eyebrow.sophia .sp::after {
content: "";
position: absolute; inset: -4px;
border-radius: 50%;
border: 1px solid rgba(155, 77, 255, 0.35);
animation: spRing 2.6s ease-out infinite;
}
@keyframes spPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(155, 77, 255, 0.12), 0 0 10px rgba(155, 77, 255, 0.55); }
50% { box-shadow: 0 0 0 5px rgba(155, 77, 255, 0.18), 0 0 16px rgba(155, 77, 255, 0.75); }
}
@keyframes spRing {
0% { transform: scale(0.85); opacity: 0.8; }
100% { transform: scale(1.7); opacity: 0; }
}
.eyebrow.muted {
color: var(--gray-700);
border-color: var(--border);
background: var(--surface-alt);
}
.eyebrow.dark {
color: #b6c4ff;
border-color: rgba(124, 152, 255, 0.25);
background: rgba(124, 152, 255, 0.10);
}
h1, h2, h3, h4 {
font-weight: 600;
letter-spacing: -0.025em;
color: var(--ink);
margin: 0;
line-height: 1.05;
text-wrap: balance;
}
h1 { font-size: clamp(40px, 5.4vw, 68px); letter-spacing: -0.035em; }
h2 { font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -0.03em; line-height: 1.08; }
h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; }
h4 { font-size: 17px; line-height: 1.25; }
p { margin: 0; color: var(--gray-700); text-wrap: pretty; }
.lead {
font-size: clamp(17px, 1.4vw, 20px);
line-height: 1.55;
color: var(--gray-700);
letter-spacing: -0.005em;
}
.section-head {
max-width: 760px;
margin-bottom: 48px;
}
.section-head .eyebrow { margin-bottom: 18px; }
.section-head h2 { margin-bottom: 16px; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 18px;
font-size: 14px;
font-weight: 500;
border-radius: var(--r-pill);
border: 1px solid transparent;
transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
white-space: nowrap;
letter-spacing: -0.005em;
line-height: 1;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
background: var(--ink);
color: white;
box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 6px 14px -4px rgba(10, 14, 26, 0.35);
}
.btn-primary:hover { background: #1a2138; }
.btn-blue {
background: var(--ep-blue);
color: white;
box-shadow: none;
}
.btn-blue:hover { background: var(--ep-blue-600); box-shadow: 0 2px 12px rgba(0, 122, 255, 0.30); }
.btn-ghost {
background: transparent;
color: var(--ink);
border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--surface-alt); border-color: var(--gray-300); }
.btn-quiet {
background: var(--surface-alt);
color: var(--ink);
border-color: var(--border);
}
.btn-quiet:hover { background: var(--gray-150); }
.btn-dark {
background: white;
color: var(--ink);
}
.btn-dark:hover { background: var(--gray-150); }
.btn-dark-ghost {
background: transparent;
color: var(--dark-text);
border-color: rgba(255,255,255,0.18);
}
.btn-dark-ghost:hover { border-color: rgba(255,255,255,0.32); background: rgba(255,255,255,0.04); }
.btn-sm { padding: 6px 14px; font-size: 13px; font-weight: 500; }
.btn-lg { padding: 12px 22px; font-size: 14.5px; }
.btn .arr { transition: transform 0.2s ease; }
.btn:hover .arr { transform: translateX(2px); }
/* ---------- Header ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.78);
backdrop-filter: saturate(180%) blur(18px);
-webkit-backdrop-filter: saturate(180%) blur(18px);
border-bottom: 1px solid rgba(230, 233, 242, 0.6);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
gap: 24px;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
font-weight: 600;
letter-spacing: -0.015em;
font-size: 16px;
color: var(--ink);
line-height: 1.1;
}
.brand-mark {
width: 36px;
height: 36px;
border-radius: 7px;
object-fit: contain;
flex-shrink: 0;
display: block;
}
.brand-name { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name b { font-weight: 600; font-size: 16px; letter-spacing: -0.015em; color: var(--ink); }
.brand-name span { font-weight: 500; color: var(--gray-500); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 1px; }
.nav-menu {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.nav-menu a {
padding: 8px 12px;
font-size: 14px;
font-weight: 450;
color: var(--gray-700);
border-radius: var(--r-sm);
transition: color 0.15s, background 0.15s;
}
.nav-menu a:hover { color: var(--ink); background: var(--surface-alt); }
.nav-actions {
display: flex;
align-items: center;
gap: 10px;
}
.lang-toggle {
display: inline-flex;
align-items: center;
background: rgba(0, 0, 0, 0.06);
border: 0;
border-radius: var(--r-pill);
padding: 2px;
font-size: 12px;
font-weight: 500;
}
.lang-toggle button {
padding: 5px 13px;
border: 0;
background: transparent;
border-radius: var(--r-pill);
color: var(--gray-500);
font-weight: 500;
letter-spacing: 0.01em;
transition: background 0.15s, color 0.15s;
}
.lang-toggle button[aria-pressed="true"] {
background: var(--ep-blue-link);
color: white;
box-shadow: none;
}
/* mobile menu hidden by default */
.nav-toggle { display: none; }
/* ---------- Hero ---------- */
.hero {
position: relative;
padding: 56px 0 0;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: -200px 0 auto 0;
height: 700px;
background:
radial-gradient(60% 50% at 50% 0%, rgba(34, 87, 255, 0.10) 0%, transparent 70%),
radial-gradient(40% 40% at 75% 10%, rgba(155, 77, 255, 0.08) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.hero .container { position: relative; z-index: 1; }
.hero-head {
text-align: center;
max-width: 920px;
margin: 0 auto 56px;
}
.hero-head h1 {
margin: 0 0 22px;
}
.hero-head h1 .grad {
background: linear-gradient(120deg, var(--sophia-violet), var(--sophia-electric) 50%, var(--ep-blue) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-head .lead { max-width: 680px; margin: 0 auto; }
.hero-cta {
display: flex;
justify-content: center;
gap: 12px;
margin: 28px 0 18px;
flex-wrap: wrap;
}
.trust-line {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--gray-500);
}
.trust-line .dot { width: 6px; height: 6px; border-radius: 50%; background: #28c283; box-shadow: 0 0 0 4px rgba(40,194,131,0.18); }
/* ---------- Hero product mockup ---------- */
.hero-product {
margin: 8px auto 0;
max-width: 1180px;
position: relative;
}
/* ============================================================
Demo tabs (Migración ⇄ Taxes rotating live mockup)
============================================================ */
.demo-tabs {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
position: relative;
}
.demo-tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border: 1px solid transparent;
background: transparent;
border-radius: var(--r-pill);
font-size: 12.5px;
font-weight: 500;
color: var(--gray-500);
cursor: pointer;
transition: color 0.15s, background 0.15s, border-color 0.15s;
white-space: nowrap;
line-height: 1;
}
.demo-tab:hover { color: var(--ink); background: var(--surface-alt); }
.demo-tab.active {
color: var(--ink);
background: white;
border-color: var(--border);
box-shadow: var(--sh-1);
}
.demo-tab .dt-dot {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.demo-pulse {
margin-left: auto;
font-size: 11px;
color: var(--gray-400);
font-family: var(--font-mono);
display: inline-flex;
align-items: center;
gap: 6px;
}
.demo-pulse::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: #ff453a;
box-shadow: 0 0 0 3px rgba(255, 69, 58, 0.15);
animation: liveDot 1.6s ease-in-out infinite;
}
.demo-pulse::after {
content: "LIVE DEMO";
letter-spacing: 0.08em;
}
@keyframes liveDot {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
/* Demo stage — slides crossfade in same space */
.demo-stage {
position: relative;
display: grid;
}
.demo-slide {
grid-column: 1;
grid-row: 1;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
display: flex;
flex-direction: column;
gap: 16px;
}
.demo-slide.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s;
}
/* Case header (per-slide) */
.case-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.case-top .crumbs {
font-size: 11px;
color: var(--gray-500);
letter-spacing: 0.02em;
margin-bottom: 6px;
}
.case-title {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.case-title h3 { font-size: 20px; letter-spacing: -0.02em; }
.case-status {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: var(--r-pill);
background: color-mix(in srgb, var(--sophia-violet) 10%, white);
border: 1px solid color-mix(in srgb, var(--sophia-violet) 22%, white);
color: var(--sophia-purple);
font-size: 11.5px;
font-weight: 500;
}
.case-status svg { color: var(--sophia-violet); }
.case-action {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: var(--r-pill);
border: 0;
background: var(--acc, var(--ep-blue));
color: white;
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
line-height: 1;
transition: filter 0.15s, transform 0.15s;
}
.case-action:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* Two-column case grid */
.case-grid {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 14px;
}
/* Documents column */
.docs-col {
display: flex;
flex-direction: column;
gap: 10px;
}
.docs-tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--border);
padding-bottom: 0;
}
.doc-tab {
background: transparent;
border: 0;
padding: 7px 11px;
font-size: 11.5px;
font-family: var(--font-mono);
color: var(--gray-500);
cursor: pointer;
border-radius: 6px 6px 0 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.doc-tab.active {
color: var(--ink);
border-bottom-color: var(--ink);
background: var(--surface-alt);
}
.doc-tab:hover:not(.active) { color: var(--ink); }
.doc-preview {
background: white;
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 14px;
box-shadow: var(--sh-1);
min-height: 280px;
}
/* Passport mock */
.doc-passport { background: linear-gradient(180deg, #fafafa, #f1f1f3); }
.doc-pp-header {
display: flex; justify-content: space-between; align-items: center;
font-size: 9.5px;
letter-spacing: 0.1em;
color: var(--gray-500);
text-transform: uppercase;
font-weight: 600;
padding-bottom: 8px;
border-bottom: 1px dashed var(--border-strong);
margin-bottom: 12px;
}
.doc-pp-flag { color: var(--ink); }
.doc-pp-body {
display: grid;
grid-template-columns: 60px 1fr;
gap: 14px;
align-items: start;
}
.doc-pp-photo {
width: 60px; height: 76px;
background: white;
border: 1px solid var(--border-strong);
border-radius: 4px;
display: grid; place-items: center;
color: var(--gray-400);
}
.doc-pp-fields {
display: flex;
flex-direction: column;
gap: 6px;
}
.ppf { display: flex; flex-direction: column; gap: 1px; }
.ppf-label { font-size: 8.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-500); font-weight: 500; }
.ppf-value {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink);
font-weight: 600;
letter-spacing: 0.02em;
align-self: flex-start;
padding: 1px 5px;
border-radius: 3px;
}
.ppf-value.hl {
background: rgba(255, 204, 0, 0.32);
box-shadow: 0 0 0 1px rgba(255, 149, 0, 0.35);
}
.doc-pp-mrz {
margin-top: 12px;
padding-top: 8px;
border-top: 1px dashed var(--border-strong);
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.06em;
color: var(--gray-400);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* W-2 mock */
.doc-w2 { background: white; padding: 0; overflow: hidden; }
.doc-w2-header {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 14px;
background: #fff8e7;
border-bottom: 1px solid var(--border);
}
.dw-form {
font-weight: 700;
font-size: 12px;
color: var(--ink);
letter-spacing: -0.01em;
padding: 2px 7px;
background: white;
border: 1.5px solid var(--ink);
border-radius: 3px;
margin-right: 8px;
}
.dw-year {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 600;
color: var(--ink);
}
.dw-title {
font-size: 10.5px;
color: var(--gray-700);
font-style: italic;
}
.doc-w2-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.w2-cell {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 12px;
border-bottom: 1px solid var(--border);
border-right: 1px solid var(--border);
font-size: 11px;
}
.w2-cell:nth-child(2n) { border-right: 0; }
.w2-cell:nth-last-child(-n+2) { border-bottom: 0; }
.w2-lbl {
font-size: 9px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gray-500);
font-weight: 500;
}
.w2-val {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
color: var(--ink);
align-self: flex-start;
padding: 1px 5px;
border-radius: 3px;
font-variant-numeric: tabular-nums;
}
.w2-val.hl {
background: rgba(255, 204, 0, 0.32);
box-shadow: 0 0 0 1px rgba(255, 149, 0, 0.35);
}
/* Docs footer */
.docs-footer {
display: flex; align-items: center;
gap: 8px;
padding: 8px 12px;
background: rgba(10, 166, 116, 0.06);
border: 1px solid rgba(10, 166, 116, 0.18);
border-radius: var(--r-md);
color: #0aa674;
font-size: 11.5px;
}
.docs-footer b { color: var(--ink); font-weight: 600; }
/* Form column */
.form-col {
display: flex;
flex-direction: column;
gap: 12px;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 12px;
}
.form-section {
background: white;
border: 1px solid var(--border);
border-radius: var(--r-sm);
overflow: hidden;
}
.fs-title {
padding: 9px 12px;
background: linear-gradient(180deg, #fbfcfd, #f4f6fa);
border-bottom: 1px solid var(--border);
font-size: 11px;
font-weight: 600;
color: var(--gray-700);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.fs-fields { padding: 4px 0; }
.ff {
display: grid;
grid-template-columns: 18px 1fr auto;
gap: 10px;
align-items: center;
padding: 7px 12px;
font-size: 12px;
border-bottom: 1px solid var(--border);
}
.ff:last-child { border-bottom: 0; }
.ff-icon {
width: 18px; height: 18px;
border-radius: 50%;
display: grid; place-items: center;
font-size: 10.5px;
font-weight: 700;
}
.ff.done .ff-icon { background: #e7f7f0; color: #0aa674; }
.ff.working .ff-icon {
background: transparent;
border: 1.5px solid var(--ep-blue);
border-right-color: transparent;
animation: ffSpin 1s linear infinite;
}
.ff.pending .ff-icon { background: var(--surface-alt); color: var(--gray-400); border: 1px dashed var(--border-strong); }
@keyframes ffSpin {
to { transform: rotate(360deg); }
}
.ff-label { color: var(--gray-700); font-weight: 450; }
.ff-value {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--ink);
font-weight: 600;
letter-spacing: 0.01em;
text-align: right;
font-variant-numeric: tabular-nums;
}
.ff.working .ff-value { color: var(--ep-blue); font-style: italic; font-weight: 500; }
.ff.pending .ff-value { color: var(--gray-500); font-style: italic; font-weight: 500; }
.form-foot {
padding: 4px 4px 0;
}
.form-progress {
display: flex;
flex-direction: column;
gap: 6px;
}
.fp-bar {
height: 4px;
border-radius: 999px;
background: var(--gray-200);
overflow: hidden;
}
.fp-fill {
height: 100%;
background: linear-gradient(90deg, var(--sophia-violet), var(--ep-blue));
border-radius: 999px;
transition: width 0.6s ease;
}
.fp-label {
font-size: 11.5px;
color: var(--gray-700);
}
.fp-label b { color: var(--ink); font-weight: 600; }
/* Sophia card variant switching */
.sc-variant { display: block; }
.sc-variant[hidden] { display: none; }
/* ============================================================
Animation sequence — 8 second loop per demo
Phase 0-1.5s: documents arrive (status: received)
Phase 1.5-3.5s: analyzing (highlights appear on doc)
Phase 3.5-6.5s: extracting (form fields fill in)
Phase 6.5-7s: progress bar fills
Phase 7-8s: ready for review
============================================================ */
/* Multi-phase status pill */
.case-status-anim {
position: relative;
display: inline-flex;
align-items: center;
min-width: 220px;
min-height: 24px;
padding: 4px 12px;
border-radius: var(--r-pill);
font-size: 11.5px;
font-weight: 500;
background: var(--surface-alt);
border: 1px solid var(--border);
}
.cs-phase {
position: absolute;
inset: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
opacity: 0;
white-space: nowrap;
padding: 0 12px;
}
.cs-pulse {
width: 8px; height: 8px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #c6a7ff, #8b5cf6 60%);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18), 0 0 8px rgba(139, 92, 246, 0.55);
animation: csPulse 1.2s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes csPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(139,92,246,0.18), 0 0 8px rgba(139,92,246,0.55); }
50% { box-shadow: 0 0 0 5px rgba(139,92,246,0.10), 0 0 14px rgba(139,92,246,0.80); }
}
.cs-phase.cs-received { color: var(--ep-blue); }
.cs-phase.cs-received svg { color: var(--ep-blue); }
.cs-phase.cs-analyzing { color: var(--sophia-purple); background: rgba(139,92,246,0.08); border-radius: var(--r-pill); margin: -1px; }
.cs-phase.cs-extracting { color: var(--sophia-purple); background: rgba(139,92,246,0.08); border-radius: var(--r-pill); margin: -1px; }
.cs-phase.cs-ready { color: #0aa674; background: rgba(10,166,116,0.10); border-radius: var(--r-pill); margin: -1px; }
.cs-phase.cs-ready svg { color: #0aa674; }
.demo-slide.active .cs-received { animation: csShow 1.5s ease forwards; }
.demo-slide.active .cs-analyzing { animation: csShow 2.0s ease 1.5s forwards; }
.demo-slide.active .cs-extracting { animation: csShow 3.0s ease 3.5s forwards; }
.demo-slide.active .cs-ready { animation: csStay 1.0s ease 6.8s forwards; }
@keyframes csShow {
0% { opacity: 0; transform: translateY(4px); }
12%, 88% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes csStay {
0% { opacity: 0; transform: translateY(4px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Documents arriving — tabs appear sequentially */
.demo-slide .doc-tab { opacity: 0; transform: translateY(-6px); }
.demo-slide.active .doc-tab { animation: tabIn 0.4s ease-out forwards; }
.demo-slide.active .doc-tab:nth-child(1) { animation-delay: 0.0s; }
.demo-slide.active .doc-tab:nth-child(2) { animation-delay: 0.25s; }
.demo-slide.active .doc-tab:nth-child(3) { animation-delay: 0.50s; }
@keyframes tabIn {
to { opacity: 1; transform: translateY(0); }
}
/* Doc preview drops in with bounce */
.demo-slide .doc-preview {
opacity: 0;
transform: translateY(-30px) scale(0.94) rotate(-2deg);
}
.demo-slide.active .doc-preview {
animation: docDrop 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
}
@keyframes docDrop {
0% { opacity: 0; transform: translateY(-30px) scale(0.94) rotate(-2deg); }
60% { opacity: 1; transform: translateY(6px) scale(1.01) rotate(0.5deg); }
100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
/* Yellow highlights on doc fields — appear during "analyzing" phase */
.demo-slide .ppf-value.hl,
.demo-slide .w2-val.hl {
background: transparent;
box-shadow: 0 0 0 0 transparent;
position: relative;
}
.demo-slide.active .ppf-value.hl,
.demo-slide.active .w2-val.hl {
animation: hlReveal 0.5s ease-out forwards;
}
/* Passport highlights — stagger during analyzing (1.5-3.5s) */
.demo-slide.active .doc-pp-fields .ppf:nth-child(1) .hl { animation-delay: 1.7s; }
.demo-slide.active .doc-pp-fields .ppf:nth-child(2) .hl { animation-delay: 2.0s; }
.demo-slide.active .doc-pp-fields .ppf:nth-child(3) .hl { animation-delay: 2.3s; }
.demo-slide.active .doc-pp-fields .ppf:nth-child(4) .hl { animation-delay: 2.6s; }
.demo-slide.active .doc-pp-fields .ppf:nth-child(5) .hl { animation-delay: 2.9s; }
/* W-2 highlighted cells — same window */
.demo-slide.active .doc-w2-grid .w2-cell:nth-child(3) .hl { animation-delay: 1.7s; }
.demo-slide.active .doc-w2-grid .w2-cell:nth-child(4) .hl { animation-delay: 2.1s; }
.demo-slide.active .doc-w2-grid .w2-cell:nth-child(7) .hl { animation-delay: 2.5s; }
@keyframes hlReveal {
0% { background: transparent; box-shadow: 0 0 0 0 transparent; }
40% { background: rgba(255, 204, 0, 0.65); box-shadow: 0 0 0 2px rgba(255, 149, 0, 0.6), 0 0 12px rgba(255, 204, 0, 0.5); }
100% { background: rgba(255, 204, 0, 0.32); box-shadow: 0 0 0 1px rgba(255, 149, 0, 0.35); }
}
/* Form fields fill in during "extracting" phase (3.5-6.5s) */
.demo-slide .ff {
opacity: 0;
transform: translateY(4px);
}
.demo-slide.active .ff {
animation: ffReveal 0.5s ease-out forwards;
}
.demo-slide.active .form-section:nth-of-type(1) .ff:nth-child(1) { animation-delay: 3.7s; }
.demo-slide.active .form-section:nth-of-type(1) .ff:nth-child(2) { animation-delay: 3.95s; }
.demo-slide.active .form-section:nth-of-type(1) .ff:nth-child(3) { animation-delay: 4.20s; }
.demo-slide.active .form-section:nth-of-type(1) .ff:nth-child(4) { animation-delay: 4.45s; }
.demo-slide.active .form-section:nth-of-type(1) .ff:nth-child(5) { animation-delay: 4.70s; }
.demo-slide.active .form-section:nth-of-type(1) .ff:nth-child(6) { animation-delay: 4.95s; }
.demo-slide.active .form-section:nth-of-type(2) .ff:nth-child(1) { animation-delay: 5.30s; }
.demo-slide.active .form-section:nth-of-type(2) .ff:nth-child(2) { animation-delay: 5.55s; }
.demo-slide.active .form-section:nth-of-type(2) .ff:nth-child(3) { animation-delay: 5.80s; }
@keyframes ffReveal {
0% { opacity: 0; transform: translateY(4px); background: rgba(0, 122, 255, 0.10); }
60% { opacity: 1; transform: translateY(0); background: rgba(0, 122, 255, 0.10); }
100% { opacity: 1; transform: translateY(0); background: transparent; }
}
/* Form section titles also fade in slightly earlier */
.demo-slide .form-section { opacity: 0; }
.demo-slide.active .form-section { animation: fsIn 0.4s ease-out forwards; }
.demo-slide.active .form-section:nth-of-type(1) { animation-delay: 3.5s; }
.demo-slide.active .form-section:nth-of-type(2) { animation-delay: 5.1s; }
@keyframes fsIn {
to { opacity: 1; }
}
/* Progress bar grows at end */
.demo-slide .fp-fill { width: 0 !important; }
.demo-slide.active .fp-fill { animation: barGrow 0.8s ease-out 6.4s forwards; }
.demo-slide.active[data-slide="0"] .fp-fill { --target: 78%; }
.demo-slide.active[data-slide="1"] .fp-fill { --target: 82%; }
@keyframes barGrow {
to { width: var(--target, 78%); }
}
.demo-slide .form-foot { opacity: 0; }
.demo-slide.active .form-foot { animation: fsIn 0.4s ease-out 6.0s forwards; }
/* Docs footer (confidence pill) also fades in */
.demo-slide .docs-footer { opacity: 0; }
.demo-slide.active .docs-footer { animation: fsIn 0.4s ease-out 3.2s forwards; }
/* Case action button fades in last */
.demo-slide .case-action {
opacity: 0.4;
transition: opacity 0.4s ease;
}
.demo-slide.active .case-action { animation: actionReady 0.5s ease-out 7.0s forwards; }
@keyframes actionReady {
0% { opacity: 0.4; transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 122, 255, 0); }
50% { opacity: 1; transform: scale(1.04); box-shadow: 0 0 0 6px rgba(0, 122, 255, 0.20); }
100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 122, 255, 0); }
}
/* ============================================================
Migración demo — Sophia drop zone (LEFT) + I-130 PDF (RIGHT)
============================================================ */
.case-grid-mig {
grid-template-columns: 1fr 1.15fr;
}
/* --- Sophia drop zone --- */
.dropzone-col {
display: flex;
flex-direction: column;
gap: 12px;
}
.dropzone-card {
background: white;
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 16px;
box-shadow: var(--sh-1);
display: flex;
flex-direction: column;
gap: 12px;
}
.dz-head {
display: flex;
align-items: center;
gap: 10px;
}
.dz-avatar {
position: relative;
width: 36px; height: 36px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 1.5px solid var(--sophia-violet);
box-shadow: 0 2px 6px rgba(139, 92, 246, 0.25);
}
.dz-avatar img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 18%;
}
.dz-dot {
position: absolute;
bottom: 0; right: 0;
width: 9px; height: 9px;
border-radius: 50%;
background: #34c759;
border: 1.5px solid white;
}
.dz-meta { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0;}
.dz-meta b { font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.dz-meta span { font-size: 11.5px; color: var(--gray-500); }
.dz-desc {
font-size: 12px;
line-height: 1.5;
color: var(--gray-700);
margin: 0;
}
.dz-desc b { color: var(--ink); font-weight: 600; }
.dz-zone {
border: 2px dashed var(--border-strong);
border-radius: var(--r-md);
padding: 22px 14px;
background: var(--surface-alt);
text-align: center;
position: relative;
min-height: 110px;
transition: background 0.3s, border-color 0.3s;
}
.demo-slide.active .dz-zone { animation: zoneFlash 0.4s ease 0.3s; }
@keyframes zoneFlash {
0%, 100% { background: var(--surface-alt); border-color: var(--border-strong); }
50% { background: rgba(0, 122, 255, 0.06); border-color: var(--ep-blue); }
}
.dz-zone-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
pointer-events: none;
position: relative;
z-index: 1;
}
.dz-arrow {
color: var(--gray-700);
margin-bottom: 4px;
}
.dz-zone-inner b {
font-size: 13.5px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.01em;
}
.dz-zone-inner span {
font-size: 11.5px;
color: var(--gray-500);
}
/* Flying documents */
.fly-doc {
position: absolute;
top: 22px;
left: 50%;
transform: translateX(-50%);
width: 138px;
border-radius: 7px;
box-shadow: 0 18px 36px -8px rgba(10, 14, 26, 0.40), 0 6px 14px -4px rgba(10, 14, 26, 0.18);
padding: 0;
overflow: hidden;
opacity: 0;
z-index: 2;
pointer-events: none;
}
.fly-doc::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 5px;
}
.fly-doc .fd-body {
padding: 14px 12px 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
}
.fly-doc .fd-title {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.12em;
}
.fly-doc .fd-sub {
font-size: 9px;
font-family: var(--font-mono);
letter-spacing: 0.02em;
opacity: 0.75;
}
/* Passport · Guatemala — navy + gold */
.fly-1 {
background: linear-gradient(165deg, #1a2a5e 0%, #0e1a3d 100%);
color: #f0e6cc;
border: 1px solid #2c3c70;
}
.fly-1::before { background: linear-gradient(90deg, #b8892a, #e6c466, #b8892a); }
.fly-1 svg { color: #d4a843; }
/* Marriage certificate — white + red ribbon */
.fly-2 {
background: linear-gradient(180deg, #ffffff 0%, #faf6ec 100%);
color: #4a2a0a;
border: 1px solid #d8cfb6;
}
.fly-2::before { background: linear-gradient(90deg, #6b0000, #c41e3a 30%, #c41e3a 70%, #6b0000); }
.fly-2 svg { color: #8b0000; }
/* Texas Driver License — white + blue stripe + red star */
.fly-3 {
background: white;
color: #1a1a1a;
border: 1px solid #c8c8d0;
}
.fly-3::before { background: #002868; }
.fly-3 svg { color: #002868; }
.fly-3::after {
content: "★";
position: absolute;
top: 9px; right: 9px;
color: #bf0a30;
font-size: 11px;
line-height: 1;
}
.demo-slide.active .fly-1 { animation: flyDoc 1.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.0s forwards; --fx: -70px; --frot: -22deg; }
.demo-slide.active .fly-2 { animation: flyDoc 1.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s forwards; --fx: 80px; --frot: 18deg; }
.demo-slide.active .fly-3 { animation: flyDoc 1.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s forwards; --fx: 15px; --frot: -10deg; }
@keyframes flyDoc {
0% { opacity: 0; transform: translateX(calc(-50% + var(--fx))) translateY(-150px) rotate(var(--frot)) scale(0.85); }
25% { opacity: 1; }
75% { opacity: 1; transform: translateX(-50%) translateY(10px) rotate(3deg) scale(1.04); }
88% { opacity: 1; transform: translateX(-50%) translateY(0) rotate(0) scale(1); }
100% { opacity: 0; transform: translateX(-50%) translateY(0) rotate(0) scale(0.88); }
}
/* Drop zone empty state — fades out as docs land */
.dz-empty {
font-size: 11.5px;
color: var(--gray-500);
text-align: center;
padding: 8px 12px;
border: 1px dashed var(--border);
border-radius: var(--r-sm);
background: var(--surface-alt);
}
.demo-slide.active .dz-empty { animation: emptyFade 0.4s ease 2.6s forwards; }
@keyframes emptyFade {
to { opacity: 0; visibility: hidden; height: 0; padding: 0; margin: 0; border: 0; }
}
/* Received tiles */
.dz-tiles {
display: flex;
flex-direction: column;
gap: 5px;
opacity: 0;
visibility: hidden;
max-height: 0;
}
.demo-slide.active .dz-tiles {
animation: tilesIn 0.4s ease 2.7s forwards;
}
@keyframes tilesIn {
to { opacity: 1; visibility: visible; max-height: 200px; }
}
.dz-tile {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
background: white;
border: 1px solid var(--border);
border-radius: 6px;
font-size: 11.5px;
font-family: var(--font-mono);
color: var(--ink);
opacity: 0;
transform: translateX(-6px);
}
.dz-tile svg { color: var(--ep-blue); flex-shrink: 0; }
.dz-tile span:nth-child(2) { flex: 1; }
.dz-tile .dz-ok {
width: 16px; height: 16px;
border-radius: 50%;
background: #e7f7f0;
color: #0aa674;
display: grid; place-items: center;
font-size: 10px;
font-family: var(--font-sans);
font-weight: 700;
}
.demo-slide.active .dz-tile-1 { animation: tileIn 0.4s ease 2.3s forwards; }
.demo-slide.active .dz-tile-2 { animation: tileIn 0.4s ease 2.7s forwards; }
.demo-slide.active .dz-tile-3 { animation: tileIn 0.4s ease 3.1s forwards; }
@keyframes tileIn {
to { opacity: 1; transform: translateX(0); }
}
/* Context card */
.case-context {
background: white;
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 2px;
}
.cc-label {
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-500);
font-weight: 500;
margin-bottom: 4px;
}
.cc-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.cc-role { font-size: 12px; color: var(--gray-700); }
.cc-package { font-size: 12px; color: var(--gray-700); font-family: var(--font-mono); margin-top: 4px; }
.cc-package b { color: var(--gray-500); font-family: var(--font-sans); font-weight: 500; margin-right: 4px; }
/* ============================================================
I-130 USCIS Form (RIGHT side, authentic PDF look)
============================================================ */
.i130-col {
display: flex;
flex-direction: column;
}
.i130-pdf {
background: white;
border: 1px solid #b0b0b5;
border-radius: 4px;
font-family: "Times New Roman", Times, "Liberation Serif", serif;
color: #1a1a1a;
font-size: 11px;
line-height: 1.3;
padding: 14px 16px 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.10);
position: relative;
}
.i130-pdf::before {
/* Subtle paper texture / shadow on top */
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(180deg, rgba(0,0,0,0.04), transparent);
pointer-events: none;
}
.i130-header {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 10px;
align-items: center;
padding-bottom: 8px;
border-bottom: 1px solid #555;
margin-bottom: 10px;
}
.i130-eagle {
color: #1d3a8a;
display: flex;
align-items: center;
}
.i130-agency {
font-size: 10px;
line-height: 1.25;
color: #1a1a1a;
font-weight: 600;
}
.i130-omb {
display: flex;
gap: 14px;
align-items: flex-start;
font-size: 8.5px;
color: #1a1a1a;
text-align: right;
}
.i130-omb > div:first-child { font-size: 10px; }
.i130-omb b { font-weight: 700; }
.i130-omb-num { font-size: 8px; color: #555; }
.i130-title {
text-align: center;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.01em;
margin-bottom: 14px;
padding-bottom: 6px;
border-bottom: 2px solid #1a1a1a;
}
.i130-part {
margin-bottom: 10px;
border: 1px solid #888;
}
.i130-part-bar {
background: #d8d8d8;
border-bottom: 1px solid #888;
padding: 4px 10px;
font-size: 11px;
font-weight: 700;
color: #1a1a1a;
}
.i130-part-bar span { font-weight: 700; }
.i130-questions {
padding: 8px 10px;
display: flex;
flex-direction: column;
gap: 9px;
}
.i130-q {
display: flex;
flex-direction: column;
gap: 2px;
}
.i130-q-row {
flex-direction: row;
gap: 14px;
}
.i130-q-half {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.i130-qnum {
display: inline;
font-weight: 700;
font-size: 9.5px;
color: #1a1a1a;
margin-right: 4px;
}
.i130-qlabel {
font-size: 9.5px;
color: #1a1a1a;
line-height: 1.25;
}
.i130-q-half .i130-qnum { display: inline; }
.i130-field {
border: 1px solid #444;
background: #fcfcfa;
height: 20px;
padding: 2px 6px;
display: flex;
align-items: center;
font-family: "Times New Roman", Times, serif;
font-size: 11.5px;
font-weight: 600;
color: #1a1a1a;
letter-spacing: 0.01em;
margin-top: 2px;
position: relative;
overflow: hidden;
}
.i130-field-narrow { max-width: 180px; }
.i130-fill {
opacity: 0;
transform: translateY(-2px);
}
.demo-slide.active .i130-fill { animation: fieldFill 0.5s ease forwards; }
/* Stagger I-130 fills during "Extracting" phase (4.5-8.0s) */
.demo-slide.active .i130-fill[data-d="0"] { animation-delay: 4.5s; }
.demo-slide.active .i130-fill[data-d="1"] { animation-delay: 4.9s; }
.demo-slide.active .i130-fill[data-d="2"] { animation-delay: 5.3s; }
.demo-slide.active .i130-fill[data-d="3"] { animation-delay: 5.7s; }
.demo-slide.active .i130-fill[data-d="4"] { animation-delay: 6.1s; }
.demo-slide.active .i130-fill[data-d="5"] { animation-delay: 6.5s; }
.demo-slide.active .i130-fill[data-d="6"] { animation-delay: 6.9s; }
.demo-slide.active .i130-fill[data-d="7"] { animation-delay: 7.3s; }
.demo-slide.active .i130-fill[data-d="8"] { animation-delay: 7.7s; }
@keyframes fieldFill {
0% { opacity: 0; transform: translateY(-2px); color: var(--ep-blue); text-shadow: 0 0 8px rgba(0, 122, 255, 0.45); }
60% { opacity: 1; color: var(--ep-blue); text-shadow: 0 0 6px rgba(0, 122, 255, 0.35); }
100% { opacity: 1; transform: translateY(0); color: #1a1a1a; text-shadow: none; }
}
.demo-slide.active .i130-field { transition: background 0.5s; }
.demo-slide.active .i130-field:has(.i130-fill[data-d="0"]) { animation: cellFlash 0.7s ease 4.5s; }
.demo-slide.active .i130-field:has(.i130-fill[data-d="1"]) { animation: cellFlash 0.7s ease 4.9s; }
.demo-slide.active .i130-field:has(.i130-fill[data-d="2"]) { animation: cellFlash 0.7s ease 5.3s; }
.demo-slide.active .i130-field:has(.i130-fill[data-d="4"]) { animation: cellFlash 0.7s ease 6.1s; }
.demo-slide.active .i130-field:has(.i130-fill[data-d="5"]) { animation: cellFlash 0.7s ease 6.5s; }
.demo-slide.active .i130-field:has(.i130-fill[data-d="6"]) { animation: cellFlash 0.7s ease 6.9s; }
.demo-slide.active .i130-field:has(.i130-fill[data-d="7"]) { animation: cellFlash 0.7s ease 7.3s; }
.demo-slide.active .i130-field:has(.i130-fill[data-d="8"]) { animation: cellFlash 0.7s ease 7.7s; }
@keyframes cellFlash {
0% { background: #fcfcfa; box-shadow: 0 0 0 0 rgba(255, 200, 0, 0); }
15% { background: rgba(255, 215, 0, 0.75); box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.35), 0 0 16px rgba(255, 200, 0, 0.6); }
100% { background: #fcfcfa; box-shadow: 0 0 0 0 rgba(255, 200, 0, 0); }
}
/* Checkboxes */
.i130-cb-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 4px;
font-size: 10.5px;
}
.i130-cb {
width: 13px; height: 13px;
border: 1.5px solid #1a1a1a;
border-radius: 2px;
background: white;
display: inline-block;
position: relative;
flex-shrink: 0;
}
.i130-cb.empty {}
.i130-cb[data-fill-cb] {
position: relative;
}
.i130-cb[data-fill-cb]::after {
content: "";
position: absolute;
inset: 1px;
background: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0;
}
.demo-slide.active .i130-cb[data-fill-cb][data-d="3"]::after { animation: cbCheck 0.4s ease 5.7s forwards; }
.demo-slide.active .i130-cb[data-fill-cb][data-d="9"]::after { animation: cbCheck 0.4s ease 8.1s forwards; }
.demo-slide.active .i130-cb[data-fill-cb][data-d="3"] { animation: cellFlash 0.7s ease 5.7s; }
.demo-slide.active .i130-cb[data-fill-cb][data-d="9"] { animation: cellFlash 0.7s ease 8.1s; }
@keyframes cbCheck {
0% { opacity: 0; transform: scale(0.5); }
60% { opacity: 1; transform: scale(1.2); }
100% { opacity: 1; transform: scale(1); }
}
.i130-cb-l { color: #1a1a1a; }
.i130-foot {
margin-top: 12px;
padding-top: 6px;
border-top: 1px solid #888;
text-align: center;
font-size: 8.5px;
color: #555;
letter-spacing: 0.04em;
}
/* Update animation timings for Migración slide to match new structure */
.demo-slide.active[data-slide="0"] .cs-received { animation: csShow 2.8s ease forwards; }
.demo-slide.active[data-slide="0"] .cs-analyzing { animation: csShow 1.7s ease 2.8s forwards; }
.demo-slide.active[data-slide="0"] .cs-extracting { animation: csShow 4.2s ease 4.5s forwards; }
.demo-slide.active[data-slide="0"] .cs-ready { animation: csStay 1.5s ease 8.6s forwards; }
.demo-slide.active[data-slide="0"] .case-action { animation: actionReady 0.6s ease-out 8.6s forwards; }
/* ============================================================
Taxes demo (slide 1) — 4 docs flying + Intake Fiscal 2026
============================================================ */
/* Flying tax documents — distinct per type */
.fly-w2 {
background: linear-gradient(180deg, #ffffff 0%, #fdf6f6 100%);
color: #1a1a1a;
border: 1px solid #d4c0c0;
}
.fly-w2::before { background: linear-gradient(90deg, #6b0d0d, #b91c1c 30%, #b91c1c 70%, #6b0d0d); }
.fly-w2 svg { color: #6b0d0d; }
.fly-1099 {
background: linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%);
color: #1a1a1a;
border: 1px solid #c0c8d8;
}
.fly-1099::before { background: linear-gradient(90deg, #1a2a5a, #2c4a8c 30%, #2c4a8c 70%, #1a2a5a); }
.fly-1099 svg { color: #1a2a5a; }
.fly-tid {
background: white;
color: #1a1a1a;
border: 1px solid #c8c8d0;
}
.fly-tid::before { background: #002868; }
.fly-tid svg { color: #002868; }
.fly-tid::after {
content: "★";
position: absolute;
top: 9px; right: 9px;
color: #bf0a30;
font-size: 11px;
line-height: 1;
}
.fly-1095 {
background: linear-gradient(180deg, #ffffff 0%, #f0faf6 100%);
color: #1a1a1a;
border: 1px solid #b8d8c8;
}
.fly-1095::before { background: linear-gradient(90deg, #0d6e5e, #2ea38c 30%, #2ea38c 70%, #0d6e5e); }
.fly-1095 svg { color: #0d6e5e; }
/* Slide 1 flying animation (4 docs staggered) */
.demo-slide.active[data-slide="1"] .fly-w2 { animation: flyDoc 1.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.0s forwards; --fx: -75px; --frot: -22deg; }
.demo-slide.active[data-slide="1"] .fly-1099 { animation: flyDoc 1.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s forwards; --fx: 85px; --frot: 18deg; }
.demo-slide.active[data-slide="1"] .fly-tid { animation: flyDoc 1.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s forwards; --fx: -35px; --frot: 14deg; }
.demo-slide.active[data-slide="1"] .fly-1095 { animation: flyDoc 1.85s cubic-bezier(0.34, 1.56, 0.64, 1) 1.35s forwards; --fx: 45px; --frot: -12deg; }
/* Slide 1 dz-zone flash (re-trigger when first doc lands) */
.demo-slide.active[data-slide="1"] .dz-zone { animation: zoneFlash 0.5s ease 0.4s; }
/* Slide 1 tiles + empty timings (4 docs land by 3.2s) */
.demo-slide.active[data-slide="1"] .dz-empty { animation: emptyFade 0.4s ease 3.0s forwards; }
.demo-slide.active[data-slide="1"] .dz-tiles { animation: tilesIn 0.4s ease 3.1s forwards; }
.demo-slide.active[data-slide="1"] .dz-tile-1 { animation: tileIn 0.4s ease 2.4s forwards; }
.demo-slide.active[data-slide="1"] .dz-tile-2 { animation: tileIn 0.4s ease 2.8s forwards; }
.demo-slide.active[data-slide="1"] .dz-tile-3 { animation: tileIn 0.4s ease 3.2s forwards; }
.demo-slide.active[data-slide="1"] .dz-tile-4 { animation: tileIn 0.4s ease 3.6s forwards; }
/* Slide 1 phase timings */
.demo-slide.active[data-slide="1"] .cs-received { animation: csShow 3.2s ease forwards; }
.demo-slide.active[data-slide="1"] .cs-analyzing { animation: csShow 1.8s ease 3.2s forwards; }
.demo-slide.active[data-slide="1"] .cs-extracting { animation: csShow 4.2s ease 5.0s forwards; }
.demo-slide.active[data-slide="1"] .cs-ready { animation: csStay 1.3s ease 9.2s forwards; }
.demo-slide.active[data-slide="1"] .case-action { animation: actionReady 0.6s ease-out 9.2s forwards; }
/* ============================================================
Tax Intake (EasyPro Plus) — semi-PDF look, NOT IRS form
============================================================ */
.intake-pdf {
background: white;
border: 1px solid #d2d2d7;
border-radius: 6px;
font-family: var(--font-sans);
color: #1a1a1a;
font-size: 11px;
line-height: 1.4;
padding: 14px 16px 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}
.intake-header {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: center;
padding-bottom: 10px;
border-bottom: 2px solid var(--ep-blue);
margin-bottom: 12px;
}
.intake-brand {
display: flex;
align-items: center;
gap: 10px;
}
.intake-brand img {
width: 32px; height: 32px;
border-radius: 7px;
}
.intake-brand-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.intake-brand-text b { font-size: 13px; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
.intake-brand-text span { font-size: 10px; color: var(--gray-500); }
.intake-meta {
font-size: 10px;
color: var(--gray-700);
text-align: right;
line-height: 1.4;
white-space: nowrap;
}
.intake-section {
margin-bottom: 8px;
border: 1px solid #e2e2e7;
border-radius: 5px;
overflow: hidden;
}
.intake-bar {
background: var(--ep-blue-50);
color: var(--ep-blue);
padding: 5px 12px;
font-size: 10.5px;
font-weight: 600;
border-bottom: 1px solid #d6e2f5;
display: flex;
align-items: center;
gap: 4px;
letter-spacing: 0.01em;
}
.intake-bar > span:first-child { font-weight: 700; }
.intake-fields {
padding: 4px 0;
display: flex;
flex-direction: column;
}
.if-row {
display: grid;
grid-template-columns: 22px 1fr auto;
align-items: center;
gap: 8px;
padding: 5px 12px;
border-bottom: 1px solid #f3f3f6;
font-size: 10.5px;
}
.if-row:last-child { border-bottom: 0; }
.if-num {
font-weight: 600;
color: var(--gray-500);
font-size: 10px;
font-family: var(--font-mono);
}
.if-label { color: var(--gray-700); font-size: 10.5px; }
.if-val {
font-family: var(--font-mono);
font-size: 10.5px;
color: #1a1a1a;
font-weight: 600;
letter-spacing: 0.01em;
text-align: right;
padding: 1px 5px;
border-radius: 3px;
position: relative;
white-space: nowrap;
}
/* Intake fill animation */
.intake-fill {
opacity: 0;
transform: translateY(-2px);
display: inline-block;
}
.demo-slide.active .intake-fill { animation: fieldFill 0.5s ease forwards; }
/* Slide 1 stagger: 5.0–7.5s (11 fields) */
.demo-slide.active[data-slide="1"] .intake-fill[data-d="0"] { animation-delay: 5.00s; }
.demo-slide.active[data-slide="1"] .intake-fill[data-d="1"] { animation-delay: 5.25s; }
.demo-slide.active[data-slide="1"] .intake-fill[data-d="2"] { animation-delay: 5.50s; }
.demo-slide.active[data-slide="1"] .intake-fill[data-d="3"] { animation-delay: 5.75s; }
.demo-slide.active[data-slide="1"] .intake-fill[data-d="4"] { animation-delay: 6.00s; }
.demo-slide.active[data-slide="1"] .intake-fill[data-d="5"] { animation-delay: 6.25s; }
.demo-slide.active[data-slide="1"] .intake-fill[data-d="6"] { animation-delay: 6.50s; }
.demo-slide.active[data-slide="1"] .intake-fill[data-d="7"] { animation-delay: 6.75s; }
.demo-slide.active[data-slide="1"] .intake-fill[data-d="8"] { animation-delay: 7.00s; }
.demo-slide.active[data-slide="1"] .intake-fill[data-d="9"] { animation-delay: 7.25s; }
.demo-slide.active[data-slide="1"] .intake-fill[data-d="10"] { animation-delay: 7.50s; }
/* Cell flash for intake values */
.demo-slide.active[data-slide="1"] .if-val:has(.intake-fill[data-d="0"]) { animation: cellFlash 0.7s ease 5.00s; }
.demo-slide.active[data-slide="1"] .if-val:has(.intake-fill[data-d="1"]) { animation: cellFlash 0.7s ease 5.25s; }
.demo-slide.active[data-slide="1"] .if-val:has(.intake-fill[data-d="2"]) { animation: cellFlash 0.7s ease 5.50s; }
.demo-slide.active[data-slide="1"] .if-val:has(.intake-fill[data-d="3"]) { animation: cellFlash 0.7s ease 5.75s; }
.demo-slide.active[data-slide="1"] .if-val:has(.intake-fill[data-d="4"]) { animation: cellFlash 0.7s ease 6.00s; }
.demo-slide.active[data-slide="1"] .if-val:has(.intake-fill[data-d="5"]) { animation: cellFlash 0.7s ease 6.25s; }
.demo-slide.active[data-slide="1"] .if-val:has(.intake-fill[data-d="6"]) { animation: cellFlash 0.7s ease 6.50s; }
.demo-slide.active[data-slide="1"] .if-val:has(.intake-fill[data-d="7"]) { animation: cellFlash 0.7s ease 6.75s; }
.demo-slide.active[data-slide="1"] .if-val:has(.intake-fill[data-d="8"]) { animation: cellFlash 0.7s ease 7.00s; }
.demo-slide.active[data-slide="1"] .if-val:has(.intake-fill[data-d="9"]) { animation: cellFlash 0.7s ease 7.25s; }
.demo-slide.active[data-slide="1"] .if-val:has(.intake-fill[data-d="10"]) { animation: cellFlash 0.7s ease 7.50s; }
.demo-slide.active[data-slide="1"] .if-val { transition: background 0.5s; }
/* Documents on file checkboxes (idoc) */
.intake-docs {
padding: 8px 12px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 14px;
}
.idoc {
display: flex;
align-items: center;
gap: 7px;
font-size: 10.5px;
color: var(--ink);
padding: 2px 4px;
border-radius: 3px;
}
.idoc-cb {
width: 13px; height: 13px;
border: 1.5px solid var(--gray-400);
border-radius: 3px;
display: inline-block;
position: relative;
flex-shrink: 0;
background: white;
}
.idoc-cb::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0;
}
.demo-slide.active[data-slide="1"] .idoc-cb { transition: border-color 0.4s, background 0.4s; }
.demo-slide.active[data-slide="1"] .idoc-cb[data-d="11"]::after { animation: cbCheck 0.4s ease 7.80s forwards; }
.demo-slide.active[data-slide="1"] .idoc-cb[data-d="12"]::after { animation: cbCheck 0.4s ease 8.05s forwards; }
.demo-slide.active[data-slide="1"] .idoc-cb[data-d="13"]::after { animation: cbCheck 0.4s ease 8.30s forwards; }
.demo-slide.active[data-slide="1"] .idoc-cb[data-d="14"]::after { animation: cbCheck 0.4s ease 8.55s forwards; }
.demo-slide.active[data-slide="1"] .idoc-cb[data-d="11"] { animation: idocFlash 0.8s ease 7.80s; }
.demo-slide.active[data-slide="1"] .idoc-cb[data-d="12"] { animation: idocFlash 0.8s ease 8.05s; }
.demo-slide.active[data-slide="1"] .idoc-cb[data-d="13"] { animation: idocFlash 0.8s ease 8.30s; }
.demo-slide.active[data-slide="1"] .idoc-cb[data-d="14"] { animation: idocFlash 0.8s ease 8.55s; }
@keyframes idocFlash {
0% { background: white; box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); border-color: var(--gray-400); }
20% { background: rgba(52, 199, 89, 0.35); box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.18), 0 0 10px rgba(52, 199, 89, 0.4); border-color: #34c759; }
100% { background: white; box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); border-color: #34c759; }
}
.intake-foot {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid #e0e0e5;
text-align: center;
font-size: 9.5px;
color: var(--gray-500);
font-style: italic;
letter-spacing: 0.02em;
}
.product-frame {
position: relative;
border-radius: var(--r-2xl);
background: linear-gradient(180deg, #fafbfe, #ffffff);
border: 1px solid var(--border);
box-shadow: var(--sh-3), 0 60px 120px -40px rgba(34, 87, 255, 0.18);
overflow: hidden;
}
.product-chrome {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, #fafbfe, #f4f6fb);
}
.product-chrome .dots { display: flex; gap: 6px; }
.product-chrome .dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--gray-200); }
.product-chrome .url {
flex: 1;
height: 26px;
border-radius: var(--r-pill);
background: white;
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 12px;
color: var(--gray-500);
font-family: var(--font-mono);
padding: 0 14px;
max-width: 340px;
margin-inline: auto;
}
.product-chrome .url::before { content: ""; width: 9px; height: 9px; border-radius: 2px; border: 1.5px solid var(--gray-300); border-bottom: none; border-right: none; transform: translateY(2px); }
.product-body {
display: grid;
grid-template-columns: 232px 1fr;
min-height: 560px;
}
/* Sidebar */
.app-sidebar {
background: linear-gradient(180deg, #fbfcfe, #f6f8fc);
border-right: 1px solid var(--border);
padding: 18px 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.app-org {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--r-sm);
border: 1px solid var(--border);
background: white;
margin-bottom: 14px;
}
.app-org .av {
width: 28px; height: 28px;
border-radius: 8px;
background: linear-gradient(135deg, #ffce6b, #ff8e3c);
display: grid; place-items: center;
color: white; font-weight: 600; font-size: 12px;
}
.app-org .meta { flex: 1; min-width: 0; }
.app-org .meta b { font-size: 12.5px; display: block; letter-spacing: -0.01em; }
.app-org .meta span { font-size: 11px; color: var(--gray-500); }
.app-org .chev { color: var(--gray-400); }
.side-label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gray-400);
padding: 12px 10px 6px;
font-weight: 500;
}
.side-item {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
font-size: 13px;
color: var(--gray-700);
border-radius: var(--r-sm);
cursor: pointer;
}
.side-item:hover { background: rgba(34, 87, 255, 0.06); color: var(--ink); }
.side-item.active { background: var(--ep-blue-50); color: var(--ep-blue); font-weight: 500; }
.side-item .ico {
width: 16px; height: 16px;
display: grid; place-items: center;
color: currentColor;
}
.side-item .badge {
margin-left: auto;
font-size: 10.5px;
background: var(--ink);
color: white;
padding: 1px 6px;
border-radius: var(--r-pill);
}
.side-item.active .badge { background: var(--ep-blue); }
/* App workspace */
.app-main {
padding: 22px 28px 28px;
background: white;
display: flex;
flex-direction: column;
gap: 20px;
}
.app-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.app-top h3 {
font-size: 18px;
letter-spacing: -0.02em;
}
.app-top .crumbs { font-size: 12px; color: var(--gray-500); margin-top: 4px; }
.app-search {
height: 34px;
border-radius: var(--r-pill);
border: 1px solid var(--border);
background: var(--surface-alt);
padding: 0 14px 0 36px;
font-size: 13px;
color: var(--gray-500);
position: relative;
display: flex; align-items: center;
min-width: 260px;
}
.app-search::before {
content: "";
position: absolute;
left: 14px;
width: 12px; height: 12px;
border-radius: 50%;
border: 1.5px solid var(--gray-400);
}
.app-search::after {
content: "";
position: absolute;
left: 23px; top: 18px;
width: 6px; height: 1.5px;
background: var(--gray-400);
transform: rotate(45deg);
}
/* Three perspective cards */
.perspectives {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.perspective-card {
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 14px;
background: white;
position: relative;
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.perspective-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.perspective-card .pc-head {
display: flex; align-items: flex-start; gap: 10px;
margin-bottom: 12px;
}
.perspective-card .pc-head > div:last-child { min-width: 0; flex: 1; }
.perspective-card .pc-icon {
width: 30px; height: 30px;
border-radius: 9px;
display: grid; place-items: center;
color: white;
font-size: 14px;
}
.pc-leadership .pc-icon { background: linear-gradient(135deg, #2257ff, #1c46d6); }
.pc-operations .pc-icon { background: linear-gradient(135deg, #0aa674, #08855e); }
.pc-client .pc-icon { background: linear-gradient(135deg, #7a3cff, #5a26cc); }
.perspective-card .pc-title { font-size: 13px; font-weight: 600; line-height: 1.2; }
.perspective-card .pc-sub { font-size: 11px; color: var(--gray-500); line-height: 1.3; margin-top: 2px; }
.perspective-card .pc-stat { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; margin-bottom: 4px; }
.perspective-card .pc-delta { font-size: 11.5px; color: #0aa674; font-weight: 500; display:inline-flex; align-items: center; gap: 4px;}
.perspective-card .pc-row { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--gray-500); margin-top: 8px; }
.perspective-card .pc-row b { color: var(--ink); font-weight: 500; }
/* Inline chart */
.spark {
margin-top: 10px;
height: 38px;
border-radius: 6px;
background: linear-gradient(180deg, var(--ep-blue-50), rgba(255,255,255,0));
position: relative;
overflow: hidden;
}
.spark svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Module mini grid inside hero */
.modules-mini {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.mod-tile {
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 10px;
background: white;
display: flex;
align-items: center;
gap: 8px;
font-size: 11.5px;
font-weight: 500;
position: relative;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.mod-tile:hover { border-color: var(--gray-300); transform: translateY(-1px); }
.mod-tile .mt-icon {
width: 22px; height: 22px;
border-radius: 6px;
display: grid; place-items: center;
color: white;
flex-shrink: 0;
}
.mod-tile .mt-status {
position: absolute;
top: -1px; right: 8px;
font-size: 9.5px;
color: var(--gray-500);
background: white;
padding: 1px 6px;
border: 1px solid var(--border);
border-radius: var(--r-pill);
transform: translateY(-50%);
}
.mod-tile.live .mt-status { color: #0aa674; }
.mod-tile.live .mt-status::before {
content: ""; display: inline-block;
width: 5px; height: 5px;
border-radius: 50%; background: #0aa674;
margin-right: 4px;
vertical-align: middle;
}
/* Ask Sophia floating card — toast style (compact, less invasive) */
.sophia-card {
position: absolute;
right: 24px;
bottom: -54px;
width: 200px;
background: linear-gradient(160deg, #1a1340 0%, #2a1a6a 50%, #3a1f8a 100%);
color: white;
border-radius: 14px;
padding: 9px 11px;
box-shadow: 0 18px 40px -16px rgba(122, 60, 255, 0.55), 0 8px 18px -8px rgba(0,0,0,0.40);
border: 1px solid rgba(155, 77, 255, 0.36);
font-size: 11.5px;
z-index: 5;
}
.sophia-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: 14px;
padding: 1px;
background: linear-gradient(140deg, rgba(155, 77, 255, 0.5), rgba(74, 139, 255, 0.4), transparent);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.sophia-card .sc-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.sophia-card .sc-pulse {
flex: 0 0 14px;
width: 14px; height: 14px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #c6a7ff, #7a3cff 60%, #3a1f8a);
position: relative;
box-shadow: 0 0 0 2px rgba(155, 77, 255, 0.20), 0 0 6px rgba(155, 77, 255, 0.55);
flex-shrink: 0;
}
.sophia-card .sc-pulse::after {
content: ""; position: absolute; inset: -4px;
border-radius: 50%;
border: 1px solid rgba(155, 77, 255, 0.4);
animation: pulse 2.5s ease-out infinite;
}
@keyframes pulse {
0% { transform: scale(0.9); opacity: 0.9; }
100% { transform: scale(1.5); opacity: 0; }
}
.sophia-card .sc-head > div { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
.sophia-card .sc-title { font-size: 11px; font-weight: 600; letter-spacing: -0.005em; color: white; }
.sophia-card .sc-sub { font-size: 9.5px; color: rgba(255,255,255,0.55); font-family: var(--font-mono); letter-spacing: 0.02em; }
.sophia-card .sc-msg {
font-size: 11px;
line-height: 1.4;
color: rgba(255,255,255,0.88);
margin: 0 0 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sophia-card .sc-msg b { color: white; font-weight: 600; }
.sophia-card .sc-actions { display: flex; gap: 6px; }
.sophia-card .sc-btn {
padding: 5px 11px;
border-radius: var(--r-pill);
font-size: 10.5px;
font-weight: 500;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.08);
color: white;
cursor: pointer;
}
.sophia-card .sc-btn.primary {
background: white;
color: var(--sophia-purple);
border-color: white;
flex: 1;
}
.sophia-card .sc-btn:not(.primary) { width: 30px; padding: 4px 6px; font-size: 13px; line-height: 1; }
/* Sophia images with violet ring — product brand treatment */
.sophia-ring {
border: 2px solid var(--sophia-violet);
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.28);
}
.sophia-portrait {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 15%;
display: block;
}
.logo-ribbon {
padding: 56px 0 32px;
border-top: 1px solid var(--border);
margin-top: 80px;
}
.logo-ribbon .label {
text-align: center;
font-size: 13px;
color: var(--gray-500);
margin-bottom: 24px;
}
.logos {
display: flex;
justify-content: center;
align-items: center;
gap: 64px;
flex-wrap: wrap;
filter: grayscale(1) opacity(0.6);
}
.logos span {
font-weight: 600;
font-size: 18px;
letter-spacing: -0.01em;
color: var(--gray-700);
font-family: var(--font-sans);
}
/* ---------- Sophia Neural Hub ---------- */
.neural-hub {
padding: 72px 0 56px;
border-top: 1px solid var(--border);
margin-top: 80px;
position: relative;
}
.neural-hub::before {
content: "";
position: absolute;
inset: 60px 0 40px;
background:
radial-gradient(ellipse 60% 50% at 50% 50%, rgba(139,92,246,0.07), transparent 70%),
radial-gradient(ellipse 30% 30% at 30% 40%, rgba(74,139,255,0.05), transparent 65%);
pointer-events: none;
z-index: 0;
}
.nh-title {
text-align: center;
font-size: clamp(28px, 3.4vw, 42px);
letter-spacing: -0.025em;
line-height: 1.1;
margin: 0 auto 14px;
max-width: 760px;
position: relative;
z-index: 1;
font-weight: 600;
color: var(--gray-900, #0f172a);
}
.nh-label {
text-align: center;
font-size: 16px;
line-height: 1.45;
color: var(--gray-500, #6b7280);
margin: 0 auto 44px;
position: relative;
z-index: 1;
letter-spacing: -0.005em;
max-width: 620px;
}
.nh-stage {
position: relative;
max-width: 880px;
height: 460px;
margin: 0 auto;
z-index: 1;
}
.nh-lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: visible;
}
.nh-link {
transition: stroke-width 0.4s ease;
}
/* Core (Sophia center brain) */
.nh-core {
position: absolute;
left: 50%;
top: 240px;
transform: translate(-50%, -50%);
width: 138px;
height: 138px;
z-index: 3;
will-change: transform;
transition: transform 0.18s cubic-bezier(.2,.7,.2,1);
}
.nh-core-img {
position: absolute;
inset: 18px;
border-radius: 50%;
overflow: hidden;
background: radial-gradient(circle at 30% 30%, #2a1a6a, #0f0a2e 80%);
box-shadow:
0 0 0 1px rgba(155,77,255,0.5),
0 20px 60px -10px rgba(122,60,255,0.55),
inset 0 0 30px rgba(139,92,246,0.2);
}
.nh-core-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
filter: saturate(1.1) contrast(1.05);
}
.nh-core-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1px solid rgba(139,92,246,0.45);
animation: nh-ring 4s ease-in-out infinite;
}
.nh-core-ring-2 {
inset: -18px;
border-color: rgba(139,92,246,0.22);
animation-delay: 1.3s;
animation-duration: 5s;
}
@keyframes nh-ring {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.06); opacity: 0.3; }
}
.nh-core-label {
position: absolute;
left: 50%;
bottom: -30px;
transform: translateX(-50%);
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--sophia-purple);
font-weight: 600;
white-space: nowrap;
background: white;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(139,92,246,0.22);
box-shadow: 0 2px 8px -2px rgba(122,60,255,0.18);
z-index: 4;
}
/* Vertical nodes */
.nh-node {
position: absolute;
left: var(--x);
top: var(--y);
transform: translate(-50%, -50%);
display: flex;
align-items: center;
gap: 7px;
padding: 6px 12px 6px 9px;
background: white;
border: 1px solid var(--border);
border-radius: 999px;
box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.08);
z-index: 2;
white-space: nowrap;
will-change: transform;
transition: transform 0.22s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
cursor: default;
font-size: 11.5px;
}
.nh-node:hover {
border-color: rgba(139,92,246,0.45);
box-shadow: 0 8px 24px -6px rgba(122,60,255,0.25);
}
.nh-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sophia-violet);
box-shadow: 0 0 0 2px rgba(139,92,246,0.18), 0 0 8px rgba(139,92,246,0.55);
flex-shrink: 0;
animation: nh-dot 2.4s ease-in-out infinite;
}
.nh-node:nth-child(3) .nh-dot { animation-delay: 0.3s; }
.nh-node:nth-child(4) .nh-dot { animation-delay: 0.6s; }
.nh-node:nth-child(5) .nh-dot { animation-delay: 0.9s; }
.nh-node:nth-child(6) .nh-dot { animation-delay: 1.2s; }
.nh-node:nth-child(7) .nh-dot { animation-delay: 1.5s; }
.nh-node:nth-child(8) .nh-dot { animation-delay: 1.8s; }
@keyframes nh-dot {
0%, 100% { box-shadow: 0 0 0 3px rgba(139,92,246,0.18), 0 0 8px rgba(139,92,246,0.5); }
50% { box-shadow: 0 0 0 6px rgba(139,92,246,0.10), 0 0 16px rgba(139,92,246,0.8); }
}
.nh-node-text {
font-size: 12px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--gray-800, #1f2937);
}
/* Responsive — collapse to stacked chips on mobile */
@media (max-width: 900px) {
.neural-hub { padding: 56px 0 40px; margin-top: 56px; }
.nh-stage { height: auto; min-height: unset; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.nh-lines { display: none; }
.nh-core { position: relative; left: auto; top: auto; transform: none; width: 132px; height: 132px; margin-bottom: 36px; }
.nh-node {
position: relative;
left: auto; top: auto;
transform: none;
}
.nh-node + .nh-node { margin-top: -8px; }
}
/* ---------- Problem section ---------- */
.problem {
background: var(--surface-alt);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.problem-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 40px;
align-items: center;
}
.problem-chips {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.chip {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: white;
border: 1px solid var(--border);
border-radius: var(--r-md);
font-size: 13.5px;
color: var(--gray-700);
transition: transform 0.15s, border-color 0.15s;
}
.chip:hover { transform: translateY(-1px); border-color: var(--gray-300); }
.chip .ico {
width: 28px; height: 28px;
border-radius: 8px;
display: grid; place-items: center;
background: var(--gray-100);
color: var(--gray-500);
flex-shrink: 0;
}
/* ---------- Problem · Attention-grabbing eyebrow chip ---------- */
.prob-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
background: #fff1ed;
border: 1px solid #fcc6b3;
border-radius: 999px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.14em;
color: #c2410c;
text-transform: uppercase;
}
.prob-chip::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #f97316;
box-shadow: 0 0 0 3px rgba(249,115,22,0.18);
animation: prob-pulse 2.2s ease-in-out infinite;
}
@keyframes prob-pulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(249,115,22,0.18); }
50% { box-shadow: 0 0 0 6px rgba(249,115,22,0.08); }
}
/* ---------- Three Islands (Taxes · Migración · Seguros) ---------- */
.islands-wrap {
display: flex;
flex-direction: column;
gap: 8px;
}
.islands-row {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 0;
align-items: center;
position: relative;
}
.island {
background: white;
border-radius: 12px;
padding: 11px 11px 10px;
border: 1px solid var(--border);
box-shadow: 0 6px 18px -6px rgba(15,23,42,0.08);
position: relative;
min-width: 0;
z-index: 1;
}
.island:hover { z-index: 4; }
.island.island-tax { transform: rotate(-1.2deg); background: linear-gradient(180deg, #ffffff 70%, #fef3c7 230%); animation: float-tax 5.4s ease-in-out infinite; }
.island.island-imm { transform: rotate(0.6deg) translateY(-6px); background: linear-gradient(180deg, #ffffff 70%, #dbeafe 230%); animation: float-imm 6.2s ease-in-out infinite; }
.island.island-ins { transform: rotate(-0.5deg) translateY(4px); background: linear-gradient(180deg, #ffffff 70%, #dcfce7 230%); animation: float-ins 5.8s ease-in-out infinite; }
.island.island-credit { transform: rotate(0.8deg) translateY(2px); background: linear-gradient(180deg, #ffffff 70%, #f3e8ff 230%); animation: float-credit 6.6s ease-in-out infinite; }
.island.island-legal { transform: rotate(-0.7deg) translateY(-4px); background: linear-gradient(180deg, #ffffff 70%, #ffe4e6 230%); animation: float-legal 5.2s ease-in-out infinite; }
.island.island-ops { transform: rotate(1deg) translateY(5px); background: linear-gradient(180deg, #ffffff 70%, #cffafe 230%); animation: float-ops 6.0s ease-in-out infinite; }
/* Boat-like bobbing — collisions on purpose. Top row dives down, bottom row rises up. */
@keyframes float-tax {
0%, 100% { transform: rotate(-1.2deg) translateY(0); }
30% { transform: rotate(-0.5deg) translateY(14px); }
60% { transform: rotate(-1.8deg) translateY(-4px); }
85% { transform: rotate(-0.9deg) translateY(8px); }
}
@keyframes float-imm {
0%, 100% { transform: rotate(0.6deg) translateY(-4px); }
25% { transform: rotate(1.4deg) translateY(11px); }
55% { transform: rotate(0.0deg) translateY(-12px); }
80% { transform: rotate(1.1deg) translateY(6px); }
}
@keyframes float-ins {
0%, 100% { transform: rotate(-0.5deg) translateY(6px); }
35% { transform: rotate(0.2deg) translateY(16px); }
65% { transform: rotate(-1.1deg) translateY(-2px); }
90% { transform: rotate(-0.3deg) translateY(12px); }
}
@keyframes float-credit {
0%, 100% { transform: rotate(0.8deg) translateY(0); }
30% { transform: rotate(0.0deg) translateY(-15px); }
60% { transform: rotate(1.4deg) translateY(9px); }
85% { transform: rotate(0.4deg) translateY(-7px); }
}
@keyframes float-legal {
0%, 100% { transform: rotate(-0.7deg) translateY(-2px); }
25% { transform: rotate(-1.5deg) translateY(8px); }
55% { transform: rotate(-0.1deg) translateY(-17px); }
85% { transform: rotate(-1.1deg) translateY(3px); }
}
@keyframes float-ops {
0%, 100% { transform: rotate(1deg) translateY(2px); }
30% { transform: rotate(0.3deg) translateY(-14px); }
65% { transform: rotate(1.6deg) translateY(11px); }
88% { transform: rotate(0.7deg) translateY(-6px); }
}
/* Soft bump at the row joint — the ✕ jolts when islands collide */
.island-break {
animation: break-bump 3.8s ease-in-out infinite;
}
.islands-row:nth-child(1) .island-break:nth-child(2) { animation-delay: 0s; }
.islands-row:nth-child(1) .island-break:nth-child(4) { animation-delay: 1.4s; }
.islands-row:nth-child(2) .island-break:nth-child(2) { animation-delay: 2.1s; }
.islands-row:nth-child(2) .island-break:nth-child(4) { animation-delay: 0.7s; }
@keyframes break-bump {
0%, 100% { transform: scale(1) rotate(0deg); }
48% { transform: scale(1.05) rotate(-12deg); }
52% { transform: scale(1.18) rotate(15deg); }
56% { transform: scale(1.05) rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) {
.island, .island-break { animation: none !important; }
}
.island-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
padding-bottom: 7px;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.island-dept {
font-size: 9.5px;
letter-spacing: 0.14em;
font-weight: 700;
display: flex;
align-items: center;
gap: 6px;
}
.island-dept::before {
content: "";
width: 6px; height: 6px;
border-radius: 2px;
}
.island-tax .island-dept { color: #92400e; }
.island-tax .island-dept::before { background: #f59e0b; }
.island-imm .island-dept { color: #1e40af; }
.island-imm .island-dept::before { background: #3b82f6; }
.island-ins .island-dept { color: #166534; }
.island-ins .island-dept::before { background: #22c55e; }
.island-credit .island-dept { color: #6b21a8; }
.island-credit .island-dept::before { background: #a855f7; }
.island-legal .island-dept { color: #9f1239; }
.island-legal .island-dept::before { background: #f43f5e; }
.island-ops .island-dept { color: #155e75; }
.island-ops .island-dept::before { background: #06b6d4; }
.island-badge {
background: #dc2626;
color: white;
font-size: 9px;
font-weight: 700;
padding: 1.5px 6px;
border-radius: 999px;
line-height: 1.3;
}
.island-tools {
display: flex;
flex-direction: column;
gap: 4px;
}
.island-tool {
--tool-color: rgba(0,0,0,0.4);
--tool-bg: rgba(0,0,0,0.04);
display: flex;
align-items: center;
gap: 7px;
padding: 5px 7px;
background: rgba(255,255,255,0.7);
border-radius: 6px;
font-size: 10.5px;
color: var(--gray-700, #475569);
border: 1px solid rgba(0,0,0,0.03);
line-height: 1.3;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.island-tool:hover {
transform: translateX(2px);
box-shadow: 0 2px 8px -2px rgba(15,23,42,0.10);
}
.island-tool.urgent {
background: var(--tool-bg);
color: var(--tool-color);
border-color: color-mix(in srgb, var(--tool-color) 20%, transparent);
font-weight: 600;
}
.island-tool-ic {
width: 16px;
height: 16px;
border-radius: 4px;
background: var(--tool-bg);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--tool-color);
flex-shrink: 0;
}
.island-tool.urgent .island-tool-ic {
background: color-mix(in srgb, var(--tool-color) 18%, white);
color: var(--tool-color);
}
/* === Per-tool brand colors === */
.tool-gmail { --tool-color: #ea4335; --tool-bg: #fef2f2; }
.tool-cal-red { --tool-color: #dc2626; --tool-bg: #fee2e2; }
.tool-cal-blue { --tool-color: #4285f4; --tool-bg: #e6f0fe; }
.tool-chart { --tool-color: #f97316; --tool-bg: #fff7ed; }
.tool-wsp { --tool-color: #25d366; --tool-bg: #f0fdf4; }
.tool-pdf { --tool-color: #ef4444; --tool-bg: #fee2e2; }
.tool-clock { --tool-color: #f59e0b; --tool-bg: #fffbeb; }
.tool-pay { --tool-color: #06b6d4; --tool-bg: #ecfeff; }
.tool-phone { --tool-color: #6366f1; --tool-bg: #eef2ff; }
.tool-renew { --tool-color: #eab308; --tool-bg: #fefce8; }
.tool-word { --tool-color: #2b579a; --tool-bg: #e6edf6; }
.tool-equifax { --tool-color: #dc2626; --tool-bg: #fee2e2; }
.tool-sms { --tool-color: #14b8a6; --tool-bg: #f0fdfa; }
.tool-folder { --tool-color: #d97706; --tool-bg: #fef3c7; }
.tool-dropbox { --tool-color: #0061ff; --tool-bg: #e6efff; }
.tool-postit { --tool-color: #ca8a04; --tool-bg: #fef9c3; }
.tool-excel { --tool-color: #107c41; --tool-bg: #ecfdf5; }
.tool-people { --tool-color: #a855f7; --tool-bg: #faf5ff; }
/* ✕ between islands */
.island-break {
width: 28px;
height: 28px;
border-radius: 50%;
background: white;
border: 2px solid #fecaca;
color: #dc2626;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px -4px rgba(220,38,38,0.25);
position: relative;
z-index: 3;
margin: 0 -4px;
flex-shrink: 0;
}
.island-break::before,
.island-break::after {
content: "";
position: absolute;
top: 50%;
width: 12px;
height: 0;
border-top: 2px dashed #fca5a5;
transform: translateY(-50%);
z-index: -1;
}
.island-break::before { right: 100%; }
.island-break::after { left: 100%; }
/* ---------- Solution / strip ---------- */
.solution {
background: white;
}
.solution-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 36px;
}
.sol-card {
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 28px;
background: var(--surface);
position: relative;
}
.sol-card .num {
font-family: var(--font-mono);
font-size: 12px;
color: var(--gray-400);
margin-bottom: 24px;
}
.sol-card h3 { margin-bottom: 8px; font-size: 18px; }
.sol-card p { font-size: 14.5px; }
/* ---------- Sophia dark section ---------- */
.dark-section {
background: var(--dark-bg);
color: var(--dark-text);
position: relative;
overflow: hidden;
}
.dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4 {
color: var(--dark-text);
}
.dark-section p { color: var(--dark-text-muted); }
.dark-section .eyebrow {
color: #b6c4ff;
border-color: rgba(124, 152, 255, 0.25);
background: rgba(124, 152, 255, 0.10);
}
.sophia-section {
padding: 120px 0;
position: relative;
}
.sophia-section::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(40% 60% at 15% 10%, rgba(122, 60, 255, 0.25) 0%, transparent 60%),
radial-gradient(50% 50% at 90% 90%, rgba(74, 139, 255, 0.20) 0%, transparent 60%);
pointer-events: none;
}
.sophia-section .container { position: relative; }
.sophia-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: end;
margin-bottom: 56px;
}
.sophia-head h2 .grad {
background: linear-gradient(120deg, #c6a7ff 0%, #7a3cff 40%, #4a8bff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.sophia-roles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.role-card {
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
border: 1px solid var(--dark-border);
border-radius: var(--r-xl);
overflow: hidden;
position: relative;
}
.role-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: var(--r-xl);
padding: 1px;
background: linear-gradient(160deg, rgba(155, 77, 255, 0.3), rgba(74, 139, 255, 0.2), transparent 60%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.role-img {
aspect-ratio: 4 / 5;
background: #e8e7e5;
position: relative;
overflow: hidden;
}
.role-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.role-img::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 40%;
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.25));
pointer-events: none;
}
.role-body { padding: 22px 22px 24px; }
.role-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
color: rgba(198, 167, 255, 0.85);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 8px;
}
.role-body h3 { font-size: 20px; margin-bottom: 8px; }
.role-body p { font-size: 14px; line-height: 1.5; }
.role-body .role-tags {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 14px;
}
.role-tags span {
font-size: 11px;
color: rgba(255,255,255,0.7);
padding: 4px 9px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--r-pill);
}
/* ---------- How Sophia works ---------- */
.how-section {
padding: 120px 0;
}
.how-flow {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 48px;
position: relative;
}
.flow-step {
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 22px;
background: white;
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
min-height: 220px;
}
.flow-step .step-num {
font-family: var(--font-mono);
font-size: 11px;
color: var(--gray-400);
letter-spacing: 0.04em;
}
.flow-step h4 { font-size: 16px; }
.flow-step p { font-size: 13.5px; }
.flow-step .step-viz {
margin-top: auto;
height: 96px;
border-radius: var(--r-md);
border: 1px solid var(--border);
background: var(--surface-alt);
padding: 10px;
font-size: 11px;
font-family: var(--font-mono);
color: var(--gray-700);
overflow: hidden;
position: relative;
}
.viz-doc { display: flex; flex-direction: column; gap: 4px; }
.viz-doc .line { height: 4px; border-radius: 2px; background: var(--gray-200); }
.viz-doc .line.s { width: 60%; }
.viz-doc .line.m { width: 80%; }
.viz-doc .line.h { background: #ffe1a8; }
.viz-doc .label { font-size: 9.5px; color: var(--gray-400); margin-bottom: 2px; letter-spacing: 0.04em; text-transform: uppercase;}
.viz-extract {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.viz-extract .kv { display:flex; flex-direction: column; gap: 2px; }
.viz-extract .k { font-size: 9px; color: var(--gray-400); letter-spacing: 0.04em; text-transform: uppercase;}
.viz-extract .v { font-size: 10px; color: var(--ink); font-family: var(--font-sans); font-weight: 500; }
.viz-form {
display: flex; flex-direction: column; gap: 5px;
}
.viz-form .field {
height: 14px;
background: white;
border: 1px solid var(--border);
border-radius: 4px;
padding: 2px 5px;
font-size: 9px;
display: flex; align-items: center;
color: var(--gray-700);
}
.viz-form .field .fill { width: 70%; height: 5px; background: var(--ep-blue-50); border-radius: 2px; }
.viz-form .field.ok::after { content: "✓"; margin-left: auto; color: #0aa674; }
.viz-approve {
display: flex; flex-direction: column; gap: 6px;
}
.viz-approve .row {
display: flex; align-items: center; gap: 6px;
font-family: var(--font-sans);
font-size: 10px;
color: var(--ink);
padding: 4px 6px;
background: white;
border: 1px solid var(--border);
border-radius: 4px;
}
.viz-approve .row .av {
width: 14px; height: 14px; border-radius: 50%;
background: linear-gradient(135deg, #ffce6b, #ff8e3c);
color: white; font-size: 8px;
display:grid; place-items: center; font-weight: 600;
}
.viz-approve .row .ok {
margin-left: auto;
width: 14px; height: 14px;
border-radius: 50%;
background: #e7f7f0;
color: #0aa674;
display: grid; place-items: center;
font-size: 9px;
}
/* ───────────────────────────────────────────────────────────────────
How Sophia Works · animated 2×2 grid (Upload / Extract / Prepare / Approve)
Each card runs its own auto-loop while visible in the viewport.
──────────────────────────────────────────────────────────────── */
.how-flow-2x2 {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.how-flow-2x2 .flow-step {
min-height: 360px;
}
.how-flow-2x2 .step-viz.step-anim {
height: 180px;
position: relative;
background: #fafafa;
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px;
overflow: hidden;
}
/* ── Card 01 · Upload documents — docs fall INTO the dropzone ── */
.anim-upload { display: flex; padding: 12px; }
.anim-upload .up-stage {
position: relative;
width: 100%; height: 100%;
display: flex;
gap: 10px;
align-items: stretch;
}
.anim-upload .up-dropzone {
position: relative;
flex: 0 0 48%;
border: 2px dashed var(--gray-300);
border-radius: 12px;
background: #fff;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 4px;
color: var(--gray-500);
text-align: center;
overflow: hidden;
animation: up-drop-pulse 5s ease-in-out infinite;
}
.anim-upload .up-arrow {
color: var(--ep-blue);
animation: up-arrow-bob 1.6s ease-in-out infinite;
}
.anim-upload .up-text { font-size: 11px; font-weight: 700; color: var(--ink); letter-spacing: -0.005em; }
.anim-upload .up-sub { font-size: 9px; color: var(--gray-400); }
.anim-upload .up-glow {
position: absolute; inset: 0;
pointer-events: none;
background: radial-gradient(circle at 50% 50%, rgba(0, 122, 255, 0.18) 0%, transparent 60%);
opacity: 0;
animation: up-glow-pulse 5s ease-in-out infinite;
}
@keyframes up-arrow-bob {
0%, 100% { transform: translateY(2px); opacity: 0.7; }
50% { transform: translateY(-4px); opacity: 1; }
}
@keyframes up-drop-pulse {
0%, 100% { border-color: var(--gray-300); background: #fff; }
20%, 80% { border-color: var(--ep-blue); background: #f0f7ff; }
}
@keyframes up-glow-pulse {
0%, 100% { opacity: 0; }
20%, 80% { opacity: 0.9; }
}
/* Falling doc chips — absolute, fall from top into dropzone center */
.anim-upload .up-falling {
position: absolute;
left: 50%; top: -22px;
transform: translateX(-50%) rotate(-8deg);
background: #fff;
border: 1.5px solid var(--ep-blue);
border-radius: 6px;
padding: 3px 8px;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 700;
color: var(--ep-blue);
box-shadow: 0 6px 14px rgba(0, 122, 255, 0.28);
opacity: 0;
animation: up-fall 5s ease-in infinite;
}
.anim-upload .up-falling[data-fdoc="1"] { animation-delay: 0.3s; }
.anim-upload .up-falling[data-fdoc="2"] { animation-delay: 1.4s; }
.anim-upload .up-falling[data-fdoc="3"] { animation-delay: 2.5s; }
.anim-upload .up-falling[data-fdoc="4"] { animation-delay: 3.6s; }
@keyframes up-fall {
0% { opacity: 0; top: -22px; transform: translateX(-50%) rotate(-12deg) scale(0.9); }
4% { opacity: 1; }
10% { opacity: 1; top: 50%; transform: translate(-50%, -50%) rotate(4deg) scale(1.05); }
14% { opacity: 0; top: 50%; transform: translate(-50%, -50%) rotate(0) scale(0.4); }
100% { opacity: 0; top: -22px; transform: translateX(-50%) rotate(-12deg) scale(0.9); }
}
/* Received list — rows slide in after each falling doc lands */
.anim-upload .up-received {
flex: 1; min-width: 0;
display: flex; flex-direction: column;
gap: 4px;
overflow: hidden;
}
.anim-upload .up-rcv {
display: flex; align-items: center; gap: 6px;
padding: 5px 8px;
background: #fff;
border: 1px solid var(--border);
border-radius: 6px;
font-size: 9.5px; color: var(--ink);
font-family: var(--font-mono);
opacity: 0;
transform: translateX(12px);
animation: up-rcv-in 5s ease-out infinite;
}
.anim-upload .up-rcv[data-rcv="1"] { animation-delay: 0.65s; }
.anim-upload .up-rcv[data-rcv="2"] { animation-delay: 1.75s; }
.anim-upload .up-rcv[data-rcv="3"] { animation-delay: 2.85s; }
.anim-upload .up-rcv[data-rcv="4"] { animation-delay: 3.95s; }
.anim-upload .up-rcv-name {
flex: 1; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.anim-upload .up-rcv-check { color: #0aa674; font-weight: 700; font-size: 11px; }
@keyframes up-rcv-in {
0% { opacity: 0; transform: translateX(12px); }
6% { opacity: 1; transform: translateX(0); }
90% { opacity: 1; transform: translateX(0); }
100% { opacity: 0; transform: translateX(12px); }
}
/* ── Card 02 · Sophia extracts — 4 prominent translucent neon cubes ── */
.anim-extract {
display: block;
background: radial-gradient(ellipse at center, #14132a 0%, #07060f 80%);
padding: 0;
}
.anim-extract .cubes-stage {
position: relative;
width: 100%; height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
padding: 12px;
}
.anim-extract .cube {
position: relative;
border-radius: 10px;
background:
linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
rgba(10, 8, 24, 0.4);
border: 1.5px solid currentColor;
display: flex; flex-direction: column; justify-content: space-between;
padding: 8px 10px;
overflow: visible;
animation: cube-breathe 4.5s ease-in-out infinite;
}
.anim-extract .cube-taxes { color: #4a8bff; box-shadow: 0 0 0 1px rgba(74, 139, 255, 0.25), 0 0 20px rgba(74, 139, 255, 0.32), inset 0 0 24px rgba(74, 139, 255, 0.18); animation-delay: 0s; }
.anim-extract .cube-migracion { color: #FF9500; box-shadow: 0 0 0 1px rgba(255, 149, 0, 0.25), 0 0 20px rgba(255, 149, 0, 0.32), inset 0 0 24px rgba(255, 149, 0, 0.18); animation-delay: 0.3s; }
.anim-extract .cube-explain { color: #a78bfa; box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.25), 0 0 20px rgba(167, 139, 250, 0.32), inset 0 0 24px rgba(167, 139, 250, 0.18); animation-delay: 0.6s; }
.anim-extract .cube-credit { color: #34C759; box-shadow: 0 0 0 1px rgba(52, 199, 89, 0.25), 0 0 20px rgba(52, 199, 89, 0.32), inset 0 0 24px rgba(52, 199, 89, 0.18); animation-delay: 0.9s; }
@keyframes cube-breathe {
0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
50% { transform: translateY(-2px) scale(1.02); filter: brightness(1.15); }
}
.anim-extract .cube-label {
font-family: var(--font-sans);
font-size: 11px; font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
text-shadow: 0 0 8px currentColor;
z-index: 2;
}
.anim-extract .cube-glow {
position: absolute; inset: 4px;
border-radius: 8px;
background: radial-gradient(circle at 30% 30%, currentColor, transparent 70%);
opacity: 0.18;
pointer-events: none;
}
.anim-extract .cube-inner { display: flex; gap: 4px; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; z-index: 2; }
.anim-extract .cube-doc {
font-family: var(--font-mono);
font-size: 9px; font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.14);
color: #fff;
text-shadow: 0 0 4px currentColor;
opacity: 0;
animation: cube-doc-settle 5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.anim-extract .cube[data-cube="1"] .cube-doc-1 { animation-delay: 0.7s; }
.anim-extract .cube[data-cube="1"] .cube-doc-2 { animation-delay: 0.95s; }
.anim-extract .cube[data-cube="2"] .cube-doc-1 { animation-delay: 1.25s; }
.anim-extract .cube[data-cube="2"] .cube-doc-2 { animation-delay: 1.5s; }
.anim-extract .cube[data-cube="3"] .cube-doc-1 { animation-delay: 1.8s; }
.anim-extract .cube[data-cube="3"] .cube-doc-2 { animation-delay: 2.05s; }
.anim-extract .cube[data-cube="4"] .cube-doc-1 { animation-delay: 2.35s; }
.anim-extract .cube[data-cube="4"] .cube-doc-2 { animation-delay: 2.6s; }
@keyframes cube-doc-settle {
0%, 12% { opacity: 0; transform: scale(0.4); }
18% { opacity: 1; transform: scale(1.2); }
22%, 82% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.6); }
}
/* Flying docs that come from outside the cube and get absorbed.
We offset each cube's flyer so they enter from the cube's outer corner. */
.anim-extract .cube-fly {
position: absolute;
font-family: var(--font-mono);
font-size: 8px; font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.95);
color: #1d1d1f;
box-shadow: 0 4px 12px currentColor;
opacity: 0;
pointer-events: none;
z-index: 3;
animation: cube-fly-in 5s cubic-bezier(0.5, 0, 0.4, 1) infinite;
}
/* Cube 1 (top-left): fly in from upper-left, outside the cube */
.anim-extract .cube[data-cube="1"] .cube-fly { left: -32px; top: -18px; }
.anim-extract .cube[data-cube="1"] .fly-1 { animation-delay: 0.3s; }
.anim-extract .cube[data-cube="1"] .fly-2 { animation-delay: 0.55s; left: -28px; top: -22px; }
/* Cube 2 (top-right): fly in from upper-right */
.anim-extract .cube[data-cube="2"] .cube-fly { right: -32px; left: auto; top: -18px; }
.anim-extract .cube[data-cube="2"] .fly-1 { animation-delay: 0.85s; }
.anim-extract .cube[data-cube="2"] .fly-2 { animation-delay: 1.1s; right: -28px; top: -22px; }
/* Cube 3 (bottom-left): from lower-left */
.anim-extract .cube[data-cube="3"] .cube-fly { left: -32px; bottom: -18px; top: auto; }
.anim-extract .cube[data-cube="3"] .fly-1 { animation-delay: 1.4s; }
.anim-extract .cube[data-cube="3"] .fly-2 { animation-delay: 1.65s; left: -28px; bottom: -22px; }
/* Cube 4 (bottom-right): from lower-right */
.anim-extract .cube[data-cube="4"] .cube-fly { right: -32px; left: auto; bottom: -18px; top: auto; }
.anim-extract .cube[data-cube="4"] .fly-1 { animation-delay: 1.95s; }
.anim-extract .cube[data-cube="4"] .fly-2 { animation-delay: 2.2s; right: -28px; bottom: -22px; }
@keyframes cube-fly-in {
0% { opacity: 0; transform: scale(1) translate(0, 0) rotate(-8deg); }
4% { opacity: 1; transform: scale(1) translate(0, 0) rotate(-8deg); }
12% { opacity: 1; transform: scale(0.5) translate(30%, 30%) rotate(0deg); }
16% { opacity: 0; transform: scale(0.2) translate(50%, 50%) rotate(8deg); }
100% { opacity: 0; transform: scale(0.2) translate(50%, 50%) rotate(8deg); }
}
.anim-extract .cube-spark {
position: absolute; right: 6px; top: 4px;
font-size: 12px;
opacity: 0;
z-index: 4;
filter: drop-shadow(0 0 6px currentColor);
animation: cube-spark-pop 5s ease-out infinite;
}
.anim-extract .cube[data-cube="1"] .cube-spark { animation-delay: 0.55s; }
.anim-extract .cube[data-cube="2"] .cube-spark { animation-delay: 1.1s; }
.anim-extract .cube[data-cube="3"] .cube-spark { animation-delay: 1.65s; }
.anim-extract .cube[data-cube="4"] .cube-spark { animation-delay: 2.2s; }
@keyframes cube-spark-pop {
0%, 8% { opacity: 0; transform: scale(0.4) rotate(-30deg); }
14% { opacity: 1; transform: scale(1.6) rotate(10deg); }
22% { opacity: 0.5; transform: scale(1) rotate(0); }
100% { opacity: 0; transform: scale(0.7) rotate(0); }
}
/* ── Card 03 · EasyPro prepares (typewriter values, rows turn green) ── */
.anim-prepare { padding: 14px; }
.anim-prepare .prep-sheet {
width: 100%; background: #fff;
border: 1px solid var(--border); border-radius: 10px;
padding: 10px 12px;
font-family: var(--font-mono); font-size: 11px;
}
.anim-prepare .prep-sheet-head {
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--border);
padding-bottom: 6px; margin-bottom: 8px;
}
.anim-prepare .prep-sheet-title { font-size: 10.5px; font-weight: 700; color: var(--ink); letter-spacing: 0.04em; }
.anim-prepare .prep-sheet-status { font-size: 9px; color: var(--gray-400); letter-spacing: 0.06em; text-transform: uppercase; }
.anim-prepare .prep-sheet-status::after {
content: "Filling…";
animation: prep-status-text 6s steps(1, end) infinite;
}
@keyframes prep-status-text {
0%, 78% { content: "Filling…"; color: var(--gray-400); }
80%, 100% { content: "✓ Ready"; color: #0aa674; }
}
.anim-prepare .prep-row {
display: flex; align-items: center; gap: 8px;
padding: 5px 6px; margin: 3px 0;
border-radius: 5px;
background: var(--gray-100);
animation: prep-row-fill 6s ease-out infinite;
}
.anim-prepare .prep-row[data-prep="1"] { animation-delay: 0.2s; }
.anim-prepare .prep-row[data-prep="2"] { animation-delay: 1.4s; }
.anim-prepare .prep-row[data-prep="3"] { animation-delay: 2.6s; }
.anim-prepare .prep-row[data-prep="4"] { animation-delay: 3.8s; }
@keyframes prep-row-fill {
0%, 5% { background: var(--gray-100); }
10%, 70% { background: #f0f7ff; }
74%, 100% { background: #e7faf0; }
}
.anim-prepare .prep-key {
flex: 0 0 56px;
font-size: 9px; color: var(--gray-500);
letter-spacing: 0.04em; text-transform: uppercase;
}
.anim-prepare .prep-val {
flex: 1;
display: flex; align-items: center;
position: relative; min-width: 0;
font-size: 10.5px; color: var(--ink); font-weight: 600;
overflow: hidden;
white-space: nowrap;
}
.anim-prepare .prep-val-text {
display: inline-block;
/* typewriter: clip the text from 0% width to 100% */
overflow: hidden;
white-space: nowrap;
max-width: 0;
animation: prep-val-typewrite 6s steps(20, end) infinite;
color: var(--ink);
}
.anim-prepare .prep-row[data-prep="1"] .prep-val-text { animation-delay: 0.2s; }
.anim-prepare .prep-row[data-prep="2"] .prep-val-text { animation-delay: 1.4s; }
.anim-prepare .prep-row[data-prep="3"] .prep-val-text { animation-delay: 2.6s; }
.anim-prepare .prep-row[data-prep="4"] .prep-val-text { animation-delay: 3.8s; }
@keyframes prep-val-typewrite {
0%, 5% { max-width: 0; color: var(--ink); }
18% { max-width: 14em; color: var(--ink); }
70% { max-width: 14em; color: var(--ink); }
74%, 100% { max-width: 14em; color: #15803d; }
}
.anim-prepare .prep-cursor {
display: inline-block;
width: 1px; height: 12px;
background: var(--ep-blue);
margin-left: 1px;
opacity: 0;
animation: prep-cursor-blink 6s steps(1, end) infinite;
}
.anim-prepare .prep-row[data-prep="1"] .prep-cursor { animation-delay: 0.2s; }
.anim-prepare .prep-row[data-prep="2"] .prep-cursor { animation-delay: 1.4s; }
.anim-prepare .prep-row[data-prep="3"] .prep-cursor { animation-delay: 2.6s; }
.anim-prepare .prep-row[data-prep="4"] .prep-cursor { animation-delay: 3.8s; }
@keyframes prep-cursor-blink {
0%, 4% { opacity: 0; }
6%, 16% { opacity: 1; }
18%, 100% { opacity: 0; }
}
.anim-prepare .prep-check {
font-size: 11px; font-weight: 800; color: #0aa674;
margin-left: auto;
opacity: 0; transform: scale(0.4);
animation: prep-check-in 6s ease-out infinite;
}
.anim-prepare .prep-row[data-prep="1"] .prep-check { animation-delay: 0.2s; }
.anim-prepare .prep-row[data-prep="2"] .prep-check { animation-delay: 1.4s; }
.anim-prepare .prep-row[data-prep="3"] .prep-check { animation-delay: 2.6s; }
.anim-prepare .prep-row[data-prep="4"] .prep-check { animation-delay: 3.8s; }
@keyframes prep-check-in {
0%, 70% { opacity: 0; transform: scale(0.4); }
76% { opacity: 1; transform: scale(1.4); }
82%, 100% { opacity: 1; transform: scale(1); }
}
/* ── Card 04 · Your team approves (cursor → click → seal) ───────── */
.anim-approve { padding: 14px; display: flex; align-items: stretch; }
.anim-approve .ap-doc {
position: relative;
width: 100%; background: #fff;
border: 1px solid var(--border); border-radius: 10px;
padding: 10px 12px;
display: flex; flex-direction: column; gap: 8px;
}
.anim-approve .ap-doc-head { display: flex; align-items: center; justify-content: space-between; }
.anim-approve .ap-doc-title { font-size: 11px; font-weight: 700; color: var(--ink); }
.anim-approve .ap-doc-meta { font-size: 9px; color: var(--gray-400); font-family: var(--font-mono); letter-spacing: 0.04em; }
.anim-approve .ap-doc-lines { display: flex; flex-direction: column; gap: 4px; }
.anim-approve .ap-line { height: 5px; background: var(--gray-200); border-radius: 3px; }
.anim-approve .ap-line.w-90 { width: 90%; }
.anim-approve .ap-line.w-85 { width: 85%; }
.anim-approve .ap-line.w-75 { width: 75%; }
.anim-approve .ap-line.w-60 { width: 60%; }
.anim-approve .ap-cta-row { display: flex; gap: 8px; margin-top: auto; position: relative; }
.anim-approve .ap-btn-secondary,
.anim-approve .ap-btn-primary {
flex: 1;
font-family: var(--font-sans);
font-size: 11px; font-weight: 600;
letter-spacing: -0.005em;
border-radius: 6px;
padding: 6px 10px;
border: 1px solid var(--border);
background: #fff;
color: var(--gray-700);
cursor: pointer; pointer-events: none;
position: relative; overflow: hidden;
}
.anim-approve .ap-btn-primary {
background: #34C759; color: #fff; border-color: #2cae50;
animation: ap-btn-press 6.5s ease-out infinite;
}
@keyframes ap-btn-press {
0%, 56% { transform: scale(1); box-shadow: 0 2px 6px rgba(52, 199, 89, 0.25); }
60% { transform: scale(0.94); box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.18); }
68%, 100% { transform: scale(1); box-shadow: 0 2px 6px rgba(52, 199, 89, 0.25); }
}
.anim-approve .ap-btn-ripple {
position: absolute; left: 50%; top: 50%;
width: 6px; height: 6px; border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
transform: translate(-50%, -50%) scale(0);
animation: ap-ripple 6.5s ease-out infinite;
}
@keyframes ap-ripple {
0%, 58% { transform: translate(-50%, -50%) scale(0); opacity: 0.7; }
62% { transform: translate(-50%, -50%) scale(8); opacity: 0; }
100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}
.anim-approve .ap-cursor {
position: absolute;
left: 10%; top: 10%;
pointer-events: none;
opacity: 0;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
animation: ap-cursor-fly 6.5s ease-in-out infinite;
}
@keyframes ap-cursor-fly {
0% { opacity: 0; left: 10%; top: 10%; }
8% { opacity: 1; left: 10%; top: 10%; }
50% { opacity: 1; left: 72%; top: 75%; }
58% { opacity: 1; left: 72%; top: 75%; transform: scale(0.88); }
62% { opacity: 1; left: 72%; top: 75%; transform: scale(1); }
82% { opacity: 0.5; left: 72%; top: 75%; }
90%, 100% { opacity: 0; left: 10%; top: 10%; }
}
.anim-approve .ap-seal {
position: absolute;
right: 12px; top: 12px;
width: 78px; height: 78px;
pointer-events: none;
opacity: 0;
transform: rotate(-18deg) scale(0.5);
animation: ap-seal-stamp 6.5s ease-out infinite;
}
@keyframes ap-seal-stamp {
0%, 62% { opacity: 0; transform: rotate(-18deg) scale(0.5); }
66% { opacity: 1; transform: rotate(-12deg) scale(1.2); }
72% { opacity: 1; transform: rotate(-8deg) scale(1); }
90%, 100% { opacity: 0; transform: rotate(-8deg) scale(1); }
}
.anim-approve .ap-seal-ring {
width: 100%; height: 100%; border-radius: 50%;
border: 2px solid #0f7a44;
background: rgba(16, 185, 91, 0.95);
color: #fff;
display: grid; place-items: center; text-align: center;
position: relative;
}
.anim-approve .ap-seal-text-top,
.anim-approve .ap-seal-text-bot {
font-family: var(--font-mono);
font-size: 7px; font-weight: 800;
letter-spacing: 0.12em;
position: absolute; left: 0; right: 0;
}
.anim-approve .ap-seal-text-top { top: 8px; }
.anim-approve .ap-seal-text-bot { bottom: 7px; }
@media (max-width: 720px) {
.how-flow-2x2 { grid-template-columns: 1fr; }
.how-flow-2x2 .flow-step { min-height: 320px; }
}
/* ---------- Modules grid ---------- */
.modules-section { padding: 120px 0; }
.modules-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 48px;
}
.module-card {
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 26px;
background: white;
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
overflow: hidden;
}
.module-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--acc);
opacity: 0.85;
}
.module-card:hover {
transform: translateY(-3px);
box-shadow: var(--sh-card);
border-color: var(--gray-300);
}
.module-card .mc-head { display: flex; align-items: center; gap: 12px; }
.module-card .mc-icon {
width: 36px; height: 36px;
border-radius: 10px;
background: color-mix(in srgb, var(--acc) 14%, white);
color: var(--acc);
display: grid; place-items: center;
}
.module-card h3 { font-size: 19px; flex: 1; }
.module-card .mc-status {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
padding: 3px 9px;
border-radius: var(--r-pill);
border: 1px solid var(--border);
color: var(--gray-500);
white-space: nowrap;
}
.module-card .mc-status.live {
color: #0aa674;
background: rgba(10, 166, 116, 0.08);
border-color: rgba(10, 166, 116, 0.25);
}
.module-card .mc-status.live::before {
content: "";
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: #0aa674;
margin-right: 5px;
vertical-align: middle;
}
.module-card .mc-status.soon {
color: #b8862b;
background: rgba(184, 134, 43, 0.08);
border-color: rgba(184, 134, 43, 0.25);
}
.module-card .mc-status.ent {
color: var(--ink);
background: var(--surface-alt);
border-color: var(--border-strong);
}
.module-card .mc-desc { font-size: 14px; line-height: 1.5; color: var(--gray-700); }
.module-card ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.module-card ul li {
font-size: 13px;
color: var(--gray-700);
display: flex;
gap: 8px;
align-items: flex-start;
line-height: 1.45;
}
.module-card ul li::before {
content: "";
width: 14px; height: 14px;
flex-shrink: 0;
margin-top: 2px;
border-radius: 4px;
background: color-mix(in srgb, var(--acc) 16%, white);
background-image:
linear-gradient(45deg, transparent 35%, var(--acc) 35%, var(--acc) 45%, transparent 45%),
linear-gradient(-45deg, transparent 50%, var(--acc) 50%, var(--acc) 65%, transparent 65%);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.module-card .mc-cta {
margin-top: auto;
padding-top: 6px;
display: flex;
align-items: center;
gap: 6px;
font-size: 13.5px;
font-weight: 500;
color: var(--acc);
}
.module-card .mc-cta .arr { transition: transform 0.2s; }
.module-card:hover .mc-cta .arr { transform: translateX(3px); }
/* ---------- Inside EasyPro ---------- */
.inside-section { padding: 120px 0; background: var(--surface-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.inside-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 18px;
margin-top: 40px;
}
.inside-grid .col { display: flex; flex-direction: column; gap: 18px; }
.inside-card {
background: white;
border: 1px solid var(--border);
border-radius: var(--r-xl);
box-shadow: var(--sh-2);
overflow: hidden;
position: relative;
}
.inside-card .ic-head {
padding: 14px 18px;
border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, #fbfcfe, #f6f8fc);
display: flex; align-items: center; justify-content: space-between;
font-size: 12.5px;
color: var(--gray-500);
font-family: var(--font-mono);
}
.inside-card .ic-head b { color: var(--ink); font-weight: 500; font-family: var(--font-sans); font-size: 13px; letter-spacing: -0.01em;}
.inside-card .ic-body { padding: 22px; }
.inside-card .ic-tall { min-height: 380px; }
/* Module selector mini */
.module-grid-mini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.module-grid-mini .item {
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
background: white;
position: relative;
}
.module-grid-mini .item .ic {
width: 28px; height: 28px;
border-radius: 8px;
background: color-mix(in srgb, var(--acc) 14%, white);
color: var(--acc);
display: grid; place-items: center;
}
.module-grid-mini .item b { font-size: 13px; letter-spacing: -0.01em; }
.module-grid-mini .item span { font-size: 11px; color: var(--gray-500); }
.module-grid-mini .item .tag {
position: absolute;
top: 10px; right: 10px;
font-size: 9.5px;
color: var(--gray-500);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.module-grid-mini .item.live .tag { color: #0aa674; }
/* Clients table */
.clients-table {
display: flex;
flex-direction: column;
gap: 0;
font-size: 13px;
}
.clients-table .row {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 80px 60px;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
}
.clients-table .row.head {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-400);
font-weight: 500;
border-bottom: 1px solid var(--border-strong);
background: var(--surface-alt);
}
.clients-table .row:last-child { border-bottom: none; }
.clients-table .row .name {
display: flex; align-items: center; gap: 8px;
}
.clients-table .row .av {
width: 26px; height: 26px;
border-radius: 50%;
display: grid; place-items: center;
color: white;
font-size: 10.5px;
font-weight: 600;
}
.av-a { background: linear-gradient(135deg, #ffce6b, #ff8e3c); }
.av-b { background: linear-gradient(135deg, #76d4ff, #2580ff); }
.av-c { background: linear-gradient(135deg, #c6a7ff, #7a3cff); }
.av-d { background: linear-gradient(135deg, #9bf6c9, #0aa674); }
.av-e { background: linear-gradient(135deg, #ff9aa2, #d6483a); }
.clients-table .status {
font-size: 11.5px;
padding: 2px 8px;
border-radius: var(--r-pill);
font-weight: 500;
display: inline-block;
}
.status.review { background: #fff5e0; color: #b8862b; }
.status.intake { background: #e8efff; color: #2257ff; }
.status.signed { background: #e7f7f0; color: #0aa674; }
.status.draft { background: #f3f5fa; color: var(--gray-500); }
.status.urgent { background: #fde9e6; color: #d6483a; }
/* Doc flow */
.doc-flow {
display: flex;
flex-direction: column;
gap: 10px;
}
.doc-row {
display: grid;
grid-template-columns: 32px 1fr auto auto;
gap: 12px;
align-items: center;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: white;
font-size: 13px;
}
.doc-row .ic {
width: 30px; height: 36px;
border-radius: 4px;
background: var(--surface-alt);
border: 1px solid var(--border);
position: relative;
display: grid; place-items: center;
font-size: 9px;
font-family: var(--font-mono);
color: var(--gray-500);
font-weight: 500;
}
.doc-row .meta b { font-size: 13px; display: block; letter-spacing: -0.005em; }
.doc-row .meta span { font-size: 11.5px; color: var(--gray-500); }
.doc-row .prog {
width: 90px; height: 4px;
border-radius: 2px;
background: var(--gray-200);
position: relative;
}
.doc-row .prog::after {
content: "";
position: absolute;
inset: 0;
width: var(--p, 60%);
background: var(--ep-blue);
border-radius: 2px;
}
.doc-row .pct { font-size: 11.5px; color: var(--gray-500); font-variant-numeric: tabular-nums; width: 36px; text-align: right; }
/* Ask Sophia panel */
.ask-sophia {
background: linear-gradient(160deg, #1a1340 0%, #2a1a6a 60%, #3a1f8a 100%);
color: white;
border-radius: var(--r-xl);
padding: 22px;
position: relative;
overflow: hidden;
}
.ask-sophia::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(60% 60% at 20% 10%, rgba(155, 77, 255, 0.4) 0%, transparent 60%);
pointer-events: none;
}
.ask-sophia .as-head {
display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.ask-sophia .as-pulse {
width: 28px; height: 28px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #c6a7ff, #7a3cff 55%, #3a1f8a);
box-shadow: 0 0 0 5px rgba(155, 77, 255, 0.15), 0 0 16px rgba(155, 77, 255, 0.6);
}
.ask-sophia .as-name { font-size: 14px; font-weight: 500; }
.ask-sophia .as-status { font-size: 11px; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 5px; }
.ask-sophia .as-status::before { content:""; width:5px; height:5px; border-radius:50%; background:#7af0b9; box-shadow:0 0 0 2px rgba(122,240,185,0.25);}
.ask-sophia .as-q {
font-size: 12px;
font-family: var(--font-mono);
color: rgba(198, 167, 255, 0.9);
margin-bottom: 6px;
letter-spacing: 0.02em;
}
.ask-sophia .as-input {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--r-md);
padding: 12px 14px;
font-size: 13px;
color: rgba(255,255,255,0.95);
margin-bottom: 14px;
position: relative;
}
.ask-sophia .as-input::after {
content: "▌";
margin-left: 2px;
color: rgba(198, 167, 255, 0.9);
animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.ask-sophia .as-answer {
font-size: 13px;
line-height: 1.55;
color: rgba(255,255,255,0.95);
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
border-radius: var(--r-md);
padding: 14px;
}
.ask-sophia .as-answer b { color: #c6a7ff; font-weight: 500; }
.ask-sophia .as-meta {
margin-top: 12px;
display: flex; justify-content: space-between;
font-size: 11px;
color: rgba(255,255,255,0.5);
font-family: var(--font-mono);
}
/* Login mock */
.login-mock {
background: white;
border-radius: var(--r-xl);
border: 1px solid var(--border);
padding: 32px 28px 28px;
text-align: center;
position: relative;
}
.login-mock .brand-mark { margin: 0 auto 14px; width: 36px; height: 36px; }
.login-mock h4 { font-size: 17px; margin-bottom: 4px; }
.login-mock p { font-size: 13px; margin-bottom: 18px; }
.login-mock .form {
display: flex;
flex-direction: column;
gap: 8px;
text-align: left;
}
.login-mock .field {
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 10px 12px;
font-size: 13px;
color: var(--gray-500);
background: var(--surface-alt);
}
.login-mock .field b { display: block; font-size: 11px; color: var(--gray-400); margin-bottom: 2px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;}
.login-mock .btn { width: 100%; margin-top: 8px; }
.login-mock .meta {
margin-top: 14px;
font-size: 12px;
color: var(--gray-500);
text-align: center;
}
/* ---------- Marketplace ---------- */
.marketplace-section {
padding: 120px 0;
background: white;
}
.marketplace-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 64px;
align-items: center;
}
.marketplace-visual {
position: relative;
border-radius: var(--r-xl);
border: 1px solid var(--border);
background: linear-gradient(180deg, #fbfcfe, #f6f8fc);
padding: 32px;
min-height: 460px;
box-shadow: var(--sh-2);
display: flex;
flex-direction: column;
gap: 16px;
}
.mp-prompt {
background: linear-gradient(160deg, #1a1340, #3a1f8a);
color: white;
border-radius: var(--r-lg);
padding: 14px 16px;
font-size: 13px;
display: flex; align-items: center; gap: 10px;
position: relative;
}
.mp-prompt .pulse {
width: 20px; height: 20px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #c6a7ff, #7a3cff 55%);
box-shadow: 0 0 12px rgba(155, 77, 255, 0.6);
flex-shrink: 0;
}
.mp-result {
background: white;
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 14px;
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 12px;
align-items: center;
}
.mp-result .av {
width: 44px; height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, var(--ep-blue), var(--sophia-violet));
color: white;
display: grid; place-items: center;
font-weight: 600;
font-size: 14px;
}
.mp-result .info b { display: block; font-size: 13.5px; }
.mp-result .info span { font-size: 11.5px; color: var(--gray-500); }
.mp-result .rating { font-size: 12px; color: var(--gray-700); display: flex; align-items: center; gap: 4px;}
.mp-result .rating::before { content: "★"; color: #ffa500; }
.mp-verified {
position: absolute;
top: -1px; right: 8px;
font-size: 9.5px;
background: #e7f7f0; color: #0aa674;
padding: 2px 8px;
border-radius: var(--r-pill);
border: 1px solid rgba(10, 166, 116, 0.25);
transform: translateY(-50%);
}
/* ---------- Security dark section ---------- */
.security-section { padding: 120px 0; }
.security-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 48px;
}
.sec-pillar {
border: 1px solid var(--dark-border);
border-radius: var(--r-lg);
padding: 22px;
background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
display: flex;
flex-direction: column;
gap: 10px;
}
.sec-pillar .sp-icon {
width: 36px; height: 36px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(74, 139, 255, 0.25), rgba(155, 77, 255, 0.18));
border: 1px solid rgba(124, 152, 255, 0.2);
color: #b6c4ff;
display: grid; place-items: center;
margin-bottom: 4px;
}
.sec-pillar h4 { font-size: 15px; }
.sec-pillar p { font-size: 13px; line-height: 1.5; }
.security-quote {
margin-top: 48px;
padding: 32px 28px;
border-radius: var(--r-xl);
border: 1px solid var(--dark-border);
background: linear-gradient(160deg, rgba(122, 60, 255, 0.10), rgba(74, 139, 255, 0.06));
text-align: center;
font-size: clamp(18px, 1.6vw, 22px);
font-weight: 500;
letter-spacing: -0.015em;
color: white;
line-height: 1.4;
}
.security-quote b { color: #c6a7ff; font-weight: 500; }
/* ---------- Investors ---------- */
.investors-section {
padding: 120px 0;
background: var(--surface-alt);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.investors-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 56px;
align-items: center;
}
.investors-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.stat-card {
background: white;
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 22px;
}
.stat-card .num {
font-size: 36px;
font-weight: 600;
letter-spacing: -0.04em;
background: linear-gradient(120deg, var(--ep-blue), var(--sophia-violet));
-webkit-background-clip: text; background-clip: text;
color: transparent;
margin-bottom: 6px;
}
.stat-card .lbl { font-size: 13px; color: var(--gray-700); }
.investor-note {
font-size: 12.5px;
color: var(--gray-500);
border-left: 2px solid var(--border-strong);
padding: 6px 0 6px 14px;
margin-top: 28px;
max-width: 480px;
}
/* ---------- Pricing ---------- */
.pricing-section { padding: 120px 0; background: white; }
.pricing-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.pricing-head .eyebrow { margin-bottom: 18px; }
.pricing-head h2 { margin-bottom: 14px; }
.pricing-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
max-width: 1080px;
margin: 0 auto;
}
.price-card {
border: 1px solid var(--border);
border-radius: var(--r-xl);
padding: 28px;
background: white;
display: flex; flex-direction: column;
gap: 14px;
position: relative;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.price-card:hover { transform: translateY(-3px); box-shadow: var(--sh-card); border-color: var(--gray-300);}
.price-card .pc-head { display: flex; align-items: center; gap: 12px;}
.price-card .pc-icon {
width: 36px; height: 36px;
border-radius: 10px;
background: color-mix(in srgb, var(--acc) 14%, white);
color: var(--acc);
display: grid; place-items: center;
}
.price-card h3 { font-size: 19px; }
.price-card .price {
display: flex; align-items: baseline; gap: 4px;
margin-top: 4px;
}
.price-card .price b {
font-size: 38px;
font-weight: 600;
letter-spacing: -0.035em;
color: var(--ink);
}
.price-card .price span { font-size: 13px; color: var(--gray-500); }
.price-card .desc { font-size: 13.5px; color: var(--gray-700); }
.price-card ul {
list-style: none;
padding: 0;
margin: 0;
display: flex; flex-direction: column;
gap: 8px;
font-size: 13px;
color: var(--gray-700);
border-top: 1px solid var(--border);
padding-top: 14px;
}
.price-card ul li { display: flex; gap: 8px; align-items: flex-start;}
.price-card ul li::before {
content: "";
width: 14px; height: 14px;
flex-shrink: 0; margin-top: 2px;
border-radius: 50%;
background: color-mix(in srgb, var(--acc) 14%, white);
background-image: radial-gradient(circle at 50% 50%, var(--acc) 30%, transparent 35%);
}
.price-card .btn { margin-top: 8px; }
.price-card .featured-flag {
position: absolute;
top: -10px; right: 18px;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 4px 10px;
border-radius: var(--r-pill);
background: linear-gradient(120deg, var(--ep-blue), var(--sophia-violet));
color: white;
font-weight: 500;
}
.pricing-note {
margin: 36px auto 0;
max-width: 720px;
text-align: center;
font-size: 13px;
color: var(--gray-500);
}
/* ---------- Final CTA ---------- */
.final-cta { padding: 140px 0; }
.final-cta .wrap {
position: relative;
border-radius: var(--r-2xl);
background: linear-gradient(160deg, #0a0e1a 0%, #1a1340 45%, #2a1a6a 100%);
padding: 80px 56px;
text-align: center;
overflow: hidden;
border: 1px solid rgba(155, 77, 255, 0.2);
}
.final-cta .wrap::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(40% 60% at 18% 0%, rgba(122, 60, 255, 0.4) 0%, transparent 60%),
radial-gradient(50% 60% at 90% 100%, rgba(74, 139, 255, 0.3) 0%, transparent 60%);
}
.final-cta .wrap > * { position: relative; }
.final-cta h2 { color: white; max-width: 720px; margin: 0 auto 14px; }
.final-cta h2 .grad {
background: linear-gradient(120deg, #c6a7ff, #7a3cff 50%, #4a8bff);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.final-cta p { color: rgba(255,255,255,0.7); max-width: 540px; margin: 0 auto 28px; font-size: 16px; }
.final-cta .cta-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* ---------- Footer ---------- */
.site-footer {
background: white;
border-top: 1px solid var(--border);
padding: 64px 0 32px;
color: var(--gray-700);
font-size: 13.5px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.3fr repeat(4, 1fr);
gap: 48px;
margin-bottom: 48px;
}
.footer-col h5 {
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gray-400);
margin: 0 0 16px;
font-weight: 500;
}
.footer-col ul {
list-style: none;
padding: 0; margin: 0;
display: flex; flex-direction: column;
gap: 10px;
}
.footer-col a {
font-size: 13.5px;
color: var(--gray-700);
transition: color 0.15s;
}
.footer-col a:hover { color: var(--ink); }
.footer-brand p {
font-size: 13px;
color: var(--gray-500);
margin-top: 14px;
max-width: 280px;
line-height: 1.5;
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 28px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--gray-500);
}
/* ---------- Language toggle ---------- */
html[lang="es"] [data-i18n-en] { display: none; }
html[lang="en"] [data-i18n-es] { display: none; }
/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
.product-body { grid-template-columns: 1fr; min-height: 0; }
.app-sidebar { display: none; }
.sophia-card { position: absolute; right: 16px; bottom: 16px; width: 220px; max-width: calc(100% - 32px); margin-top: 0; }
.hero-product { padding: 0 12px; }
.sophia-roles { grid-template-columns: 1fr; }
.modules-grid { grid-template-columns: repeat(2, 1fr); }
.how-flow { grid-template-columns: repeat(2, 1fr); }
.inside-grid, .marketplace-grid, .investors-grid, .problem-grid, .sophia-head { grid-template-columns: 1fr; gap: 32px; }
.security-grid, .pricing-cards, .solution-cards { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.nav-menu { display: none; }
.nav-toggle { display: inline-flex; }
}
@media (max-width: 640px) {
.section, .sophia-section, .how-section, .modules-section, .inside-section, .marketplace-section, .security-section, .investors-section, .pricing-section { padding: 72px 0; }
.final-cta { padding: 80px 0; }
.final-cta .wrap { padding: 56px 24px; }
h1 { font-size: 38px; }
h2 { font-size: 28px; }
.container { width: min(100% - 32px, 1240px); }
.perspectives { grid-template-columns: 1fr; }
.modules-mini { grid-template-columns: repeat(2, 1fr); }
.modules-grid { grid-template-columns: 1fr; }
.problem-chips { grid-template-columns: 1fr; }
.islands-wrap { gap: 12px; }
.islands-row { grid-template-columns: 1fr; gap: 12px; }
.islands-row .island { transform: none !important; }
.islands-row .island-break { transform: rotate(90deg); margin: -6px auto; }
.islands-row .island-break::before, .islands-row .island-break::after { width: 12px; }
.footer-grid { grid-template-columns: 1fr; }
}