:root{ --embers:1; }
footer{ position:relative; }
.ftr-embers{ position:absolute; inset:0; width:100%; height:100%;
pointer-events:none; z-index:0; }
footer > *:not(.ftr-embers){ position:relative; z-index:1; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
text-rendering: optimizeLegibility;
background: var(--surface-0);
color: var(--text-2);
line-height: 1.55;
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
letter-spacing: -0.005em;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6, .mockh {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
letter-spacing: -0.022em;
font-weight: 600;
line-height: 1.15;
}
h1, h2 {
font-family: 'Outfit', 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 700;
letter-spacing: -0.04em;
}
h1 { font-weight: 900; }
h3, h4, .mockh { letter-spacing: -0.018em; }
p { letter-spacing: -0.003em; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; }
:root {
--neutral-tx:#54544F;
--danger-tx:#A81717;
color-scheme: light;
--surface-0: #FAF9F5;
--surface-1: #F0EEE6;
--surface-2: #FFFFFF;
--surface-3: #F5F2EA;
--surface-card: rgba(255,255,255,0.72);
--fg-rgb: 0,0,0;
--accent-rgb: 192,78,38;
--fill-1: #FD8D68;
--fill-2: #FF5F6D;
--glow-rgb: 190,120,95;
--shadow-rgb: 60,40,30;
--bg-0: var(--surface-0);
--bg-1: var(--surface-1);
--bg-2: var(--surface-2);
--bg-3: var(--surface-3);
--bg-card: var(--surface-card);
--surface: var(--surface-2);
--purple: var(--ic-2);
--purple-light: var(--ic-2);
--text-1: #1F1714;
--text-2: #40403E;
--text-3: #6B6B69;
--on-accent: #2B1509;
--accent: #C04E26;
--accent-light: #C2410C;
--accent-dark: #A64B2A;
--accent-soft: #CC785C;
--accent-glow: rgba(192,78,38,0.12);
--accent-glow-md: rgba(192,78,38,0.18);
--accent-glow-strong: rgba(192,78,38,0.28);
--head-end: #D2542A;
--shim-1: #C04E26;
--li-bg: rgba(192,78,38,0.16);
--li-stroke: rgba(192,78,38,0.78);
--li-glyph: #C04E26;
--bt-green: #059669; --bt-green-rgb: 5,150,105;
--bt-blue: #3B82F6; --bt-blue-rgb: 59,130,246;
--bt-amber: #C2610C; --bt-amber-rgb: 194,97,12;
--bt-coral: #D2542A; --bt-coral-rgb: 210,84,42;
--bar-green: #10B981; --bar-green-rgb: 16,185,129;
--bar-blue: #3B82F6; --bar-blue-rgb: 59,130,246;
--bar-violet: #8B5CF6; --bar-violet-rgb: 139,92,246;
--bar-amber: #F59E0B; --bar-amber-rgb: 245,158,11;
--pc-slate: #475569; --pc-slate-rgb: 71,85,105;
--head-grad-end: #C2410C; --head-grad-end2: #D2542A; --h1-peak: #C2410C;
--st-teal:#0F766E; --st-teal-rgb:13,148,136;
--st-violet:#6D28D9; --st-violet-rgb:124,58,237;
--st-slate:#475569; --st-slate-rgb:71,85,105;
--st-amber:#B45309; --st-amber-rgb:217,119,6;
--st-green:#15803D; --st-green-rgb:22,163,74;
--st-blue:#1D4ED8; --st-blue-rgb:37,99,235;
--st-gold:#A16207; --st-gold-rgb:202,138,4;
--glass-tag-bg: rgba(255,255,255,0.40); --glass-tag-br: rgba(21,128,61,0.42); --on-glass-tag: #14532D;
--gg-warm: #4F9CF9; --gg-safe: #10B981; --gg-risk: #F59E0B;
--glass-sheen: rgba(255,255,255,0.55);
--glass-rim: rgba(255,255,255,0.75);
--border: rgba(var(--shadow-rgb),0.10);
--border-light: rgba(0,0,0,0.16);
--success: #047857;
--success-light: #03694F;
--success-glow: rgba(4,120,87,0.14);
--danger: #B91C1C;
--warning: #92400E;
--ic-1: #1D4ED8; --ic-2: #6D28D9; --ic-3: #A64B2A;
--ic-4: #92400E; --ic-5: #0F766E; --ic-6: #047857;
--surface0-rgb: 250,249,245; --surface2-rgb: 255,255,255;
--ic1-rgb: 29,78,216; --ic2-rgb: 109,40,217;
--warn-rgb: 146,64,14; --danger-rgb: 185,28,28; --success-rgb: 4,120,87;
}
[data-theme="dark"] {
--neutral-tx:#A99284;
--danger-tx:#F87171;
--st-violet-rgb:167,139,250; --st-amber-rgb:251,191,36;
--st-green-rgb:74,222,128; --st-blue-rgb:96,165,250;
--st-teal-rgb:45,212,191; --st-slate-rgb:148,163,184;
color-scheme: dark;
--surface-0: #16120F;
--surface-1: #1C1714;
--surface-2: #241D19;
--surface-3: #2E2621;
--surface-card: rgba(36,29,25,0.7);
--fg-rgb: 255,255,255;
--accent-rgb: 253,141,104;
--glow-rgb: 253,141,104;
--shadow-rgb: 0,0,0;
--fill-1: #FD8D68;
--fill-2: #FF5F6D;
--text-1: #F7F1EC;
--text-2: #DACCC2;
--text-3: #A99284;
--on-accent: #2B1509;
--accent: #FD8D68;
--accent-light: #FF5F6D;
--accent-dark: #CA7153;
--accent-soft: #FFB59B;
--accent-glow: rgba(253,141,104,0.14);
--accent-glow-md: rgba(253,141,104,0.22);
--accent-glow-strong: rgba(253,141,104,0.38);
--head-end: #FFD2C2;
--shim-1: #FFD9C9;
--li-bg: rgba(253,141,104,0.08);
--li-stroke: rgba(253,141,104,0.55);
--li-glyph: #FFFFFF;
--bt-green: #34D399; --bt-green-rgb: 52,211,153;
--bt-blue: #60A5FA; --bt-blue-rgb: 96,165,250;
--bt-amber: #FBBF24; --bt-amber-rgb: 251,191,36;
--bt-coral: #FD8D68; --bt-coral-rgb: 253,141,104;
--bar-green: #34D399; --bar-green-rgb: 52,211,153;
--bar-blue: #60A5FA; --bar-blue-rgb: 96,165,250;
--bar-violet: #A78BFA; --bar-violet-rgb: 167,139,250;
--bar-amber: #FBBF24; --bar-amber-rgb: 251,191,36;
--pc-slate: #94A3B8; --pc-slate-rgb: 148,163,184;
--head-grad-end: #FD8D68; --head-grad-end2: #FF5F6D; --h1-peak: #FF5F6D;
--st-teal:#2DD4BF; --st-teal-rgb:45,212,191;
--st-violet:#A78BFA; --st-violet-rgb:167,139,250;
--st-slate:#94A3B8; --st-slate-rgb:148,163,184;
--st-amber:#FBBF24; --st-amber-rgb:251,191,36;
--st-green:#4ADE80; --st-green-rgb:74,222,128;
--st-blue:#60A5FA; --st-blue-rgb:96,165,250;
--st-gold:#FCD34D; --st-gold-rgb:252,211,77;
--glass-tag-bg: rgba(74,222,128,0.13); --glass-tag-br: rgba(74,222,128,0.45); --on-glass-tag: #BBF7D0;
--gg-warm: #60A5FA; --gg-safe: #34D399; --gg-risk: #FBBF24;
--glass-sheen: rgba(255,255,255,0.10);
--glass-rim: rgba(255,255,255,0.22);
--border: rgba(var(--fg-rgb),0.08);
--border-light: rgba(255,255,255,0.12);
--success: #34D399;
--success-light: #6EE7B7;
--success-glow: rgba(var(--success-rgb),0.18);
--danger: #F87171;
--warning: #FBBF24;
--ic-1: #60A5FA; --ic-2: #A78BFA; --ic-3: #FD8D68;
--ic-4: #FBBF24; --ic-5: #2DD4BF; --ic-6: #34D399;
--surface0-rgb: 22,18,15;
--surface2-rgb: 36,29,25;
--ic1-rgb: 59,130,246;
--ic2-rgb: 139,92,246;
--warn-rgb: 251,191,36;
--danger-rgb: 239,68,68;
--success-rgb: 52,211,153;
}
html, body { background: var(--surface-0); color: var(--text-2); max-width: 100%; overflow-x: hidden; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.page-bg {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(ellipse 80% 60% at 50% -20%, rgba(var(--accent-rgb),0.07), transparent),
radial-gradient(ellipse 60% 40% at 80% 60%, rgba(var(--accent-rgb),0.04), transparent);
}
.grid-overlay {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(rgba(var(--fg-rgb),0.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--fg-rgb),0.015) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, black 20%, transparent 80%);
}
.badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 16px 6px 12px; border-radius: 100px;
background: rgba(var(--accent-rgb),0.08);
border: 1px solid rgba(var(--accent-rgb),0.15);
font-size: 0.757rem; font-weight:500; color: var(--accent-light);
letter-spacing: 0.02em;
}
.badge-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--success);
box-shadow: 0 0 8px var(--success);
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%,100% { box-shadow: 0 0 4px var(--accent); }
50% { box-shadow: 0 0 12px var(--accent), 0 0 24px rgba(var(--glow-rgb),0.3); }
}
.section-label {
display: inline-flex; align-items: center; gap: 10px;
font-size: 0.728rem; font-weight:500; letter-spacing: 0.15em;
text-transform: uppercase; color: var(--accent);
margin-bottom: 20px;
}
.section-label svg { opacity: 0.85; }
.section-title {
font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 700;
line-height: 1.1; letter-spacing: -0.03em;
margin-bottom: 16px;
color: var(--text-1);
background: none;
-webkit-text-fill-color: currentColor;
}
.section-title .em, .section-title em {
font-style: normal;
color: var(--head-grad-end);
-webkit-text-fill-color: var(--head-grad-end);
background: none;
}
h2.shimmer-text, .section-title.shimmer-text {
animation: none;
background: none;
-webkit-text-fill-color: currentColor;
color: var(--text-1);
filter: none;
}
.section-title em, .section-title .hl {
font-style: normal;
background: linear-gradient(120deg, var(--text-1) 0%, var(--text-1) 34%, var(--head-grad-end) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.section-desc {
font-size: 0.951rem; color: var(--text-3); max-width: 560px;
line-height: 1.7;
text-wrap: balance;}
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 10px; padding: 14px 30px; border-radius: 14px;
font-weight: 600; font-size: 0.892rem; border: none;
cursor: pointer; transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
position: relative; overflow: hidden;
}
.btn-primary {
background: linear-gradient(135deg, var(--fill-2), var(--fill-1));
color: var(--on-accent); font-weight: 600;
box-shadow: 0 0 20px rgba(var(--glow-rgb),0.3), 0 4px 16px rgba(var(--shadow-rgb),0.4);
}
.btn-primary::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, var(--fill-2), var(--fill-1));
opacity: 0; transition: opacity 0.35s;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 0 40px rgba(var(--glow-rgb),0.35), 0 8px 32px rgba(var(--shadow-rgb),0.5);
}
.btn-primary span, .btn-primary svg { position: relative; z-index: 1; }
.arrow-icon {
transition: transform 0.3s;
}
.btn:hover .arrow-icon { transform: translateX(3px); }
.navbar {
position: fixed; top: 0; width: 100%; z-index: 100;
padding: 18px 0; transition: all 0.4s;
}
.navbar.scrolled {
padding: 12px 0;
background: rgba(var(--surface0-rgb),0.85);
backdrop-filter: blur(20px) saturate(1.2);
border-bottom: 1px solid var(--border);
}
.navbar .container {
display: flex; justify-content: space-between; align-items: center;
}
.navbar > .container > .theme-toggle { order: 2; margin-left: 18px; z-index: 102; }
.navbar > .container > .nav-links { order: 1; }
.navbar > .container > .mobile-menu-btn { order: 3; }
@media (max-width: 768px){
.navbar > .container > .theme-toggle { margin-left: auto; margin-right: 16px; }
.navbar > .container > .mobile-menu-btn { margin-left: 0; }
}
@media (max-width: 768px){
.navbar > .container { padding-left:18px; padding-right:18px; flex-wrap:nowrap; }
.navbar > .container > .logo { min-width:0; flex:0 1 auto; }
.navbar > .container > .theme-toggle { margin-left:auto; margin-right:14px; flex:0 0 52px; }
.navbar > .container > .mobile-menu-btn { flex:0 0 28px; z-index:103; }
.nav-links.active { z-index:99; }
}
.logo {
display: inline-flex; align-items: center; gap: 10px;
font-size: 1.2rem; font-weight: 600; color: var(--text-1);
letter-spacing: -0.022em;
font-family: 'Inter', sans-serif;
}
.logo-mark {
width: 30px; height: 30px; border-radius: 9px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--fill-2) 0%, var(--fill-1) 55%, var(--accent-dark) 100%);
box-shadow: 0 0 0 1px rgba(var(--glow-rgb),0.4), 0 6px 18px rgba(var(--glow-rgb),0.28), inset 0 1px 0 rgba(var(--fg-rgb),0.5);
flex-shrink: 0;
}
.logo-mark svg { display: block; }
.logo-mark.logo-mark-img {
background: none; box-shadow: none; border-radius: 0;
width: 34px; height: 34px;
}
.logo-mark.logo-mark-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-word { display: inline-flex; align-items: center; gap: 3px; }
.logo-word img { height: 19px; width: auto; display: block; }
.logo-word .lw-dark { display: none; }
[data-theme="dark"] .logo-word .lw-light { display: none; }
[data-theme="dark"] .logo-word .lw-dark { display: block; }
@media (max-width: 540px){ .logo-word img { height: 16px; } .logo-mark.logo-mark-img { width: 28px; height: 28px; } }
.logo-text .accent-dot {
display: inline-block; width: 5px; height: 5px; border-radius: 50%;
background: var(--accent); margin-left: 3px; vertical-align: middle;
box-shadow: 0 0 8px var(--accent);
}
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-links a {
font-size: 0.854rem; font-weight: 500; color: var(--text-3);
transition: color 0.25s; position: relative;
}
.nav-links a:hover { color: var(--text-1); }
.nav-links a::after {
content: ''; position: absolute; bottom: -4px; left: 0;
width: 0; height: 1.5px; background: var(--accent);
transition: width 0.3s;
}
.nav-links a:hover::after { width: 100%; }
.nav-cta {
display: inline-flex; align-items: center; gap: 14px;
}
.nav-cta .btn {
padding: 10px 22px; font-size: 0.815rem; font-weight: 600;
background: linear-gradient(135deg, var(--fill-2), var(--fill-1));
color: var(--on-accent); border: none;
box-shadow: 0 0 16px rgba(var(--glow-rgb),0.25);
}
.nav-cta .btn:hover {
box-shadow: 0 0 28px rgba(var(--glow-rgb),0.4);
}
.mobile-menu-btn {
display: none; background: none; border: none;
width: 28px; height: 20px; position: relative; cursor: pointer;
}
.mobile-menu-btn::after{
content:''; position:absolute; left:50%; top:50%;
width:44px; height:44px; transform:translate(-50%,-50%);
}
.mobile-menu-btn span {
position: absolute; left: 0; width: 100%; height: 2px;
background: var(--text-2); border-radius: 2px;
transition: all 0.3s;
}
.mobile-menu-btn span:nth-child(1) { top: 0; }
.mobile-menu-btn span:nth-child(2) { top: 9px; }
.mobile-menu-btn span:nth-child(3) { top: 18px; }
.hero {
position: relative; z-index: 1;
padding: 130px 0 100px;
text-align: center;
}
.hero .badge { margin-bottom: 32px; }
.hero h1 {
font-size: clamp(3rem, 7vw, 5.2rem);
font-weight: 900; line-height: 1.05; letter-spacing: -0.045em;
color: var(--text-1); max-width: 900px; margin: 0 auto 24px;
}
.hero h1 .gradient-text {
background: linear-gradient(120deg, var(--text-1) 0%, var(--text-1) 34%, var(--head-grad-end) 100%);
background-size: 250% auto;
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text; color: transparent;
animation: hero-color-breathe 12s ease-in-out infinite;
filter: drop-shadow(0 0 28px rgba(var(--glow-rgb),0.25));
}
@keyframes hero-color-breathe {
0% { background-position: 0% center; }
50% { background-position: 100% center; }
100% { background-position: 0% center; }
}
@keyframes li-ring-pulse {
0%, 25% { transform: translate(-50%, -50%) scale(1); border-color: rgba(var(--accent-rgb),0); opacity: 0; }
30% { transform: translate(-50%, -50%) scale(1.05); border-color: rgba(var(--accent-rgb),0.6); opacity: 1; }
36% { transform: translate(-50%, -50%) scale(1.6); border-color: rgba(var(--accent-rgb),0); opacity: 0; }
69%, 73% { transform: translate(-50%, -50%) scale(1); border-color: rgba(var(--accent-rgb),0); opacity: 0; }
76% { transform: translate(-50%, -50%) scale(1.05); border-color: rgba(var(--accent-rgb),0.4); opacity: 0.8; }
82% { transform: translate(-50%, -50%) scale(1.45); border-color: rgba(var(--accent-rgb),0); opacity: 0; }
100% { transform: translate(-50%, -50%) scale(1); border-color: rgba(var(--accent-rgb),0); opacity: 0; }
}
.li-shimmer {
animation: li-glow 4s ease-in-out infinite;
filter: drop-shadow(0 0 12px rgba(var(--glow-rgb),0.5));
}
@keyframes li-glow {
0% { filter: drop-shadow(0 0 6px rgba(var(--glow-rgb),0.25)) drop-shadow(0 0 15px rgba(var(--glow-rgb),0.08)); transform: scale(1); opacity: 0.85; }
28% { filter: drop-shadow(0 0 6px rgba(var(--glow-rgb),0.25)); transform: scale(1); opacity: 0.85; }
32% { filter: drop-shadow(0 0 35px rgba(var(--glow-rgb),1)) drop-shadow(0 0 70px rgba(var(--glow-rgb),0.6)) drop-shadow(0 0 120px rgba(var(--glow-rgb),0.2)) brightness(1.8); transform: scale(1.12); opacity: 1; }
38% { filter: drop-shadow(0 0 18px rgba(var(--glow-rgb),0.6)) drop-shadow(0 0 40px rgba(var(--glow-rgb),0.2)); transform: scale(1.03); opacity: 0.95; }
50% { filter: drop-shadow(0 0 8px rgba(var(--glow-rgb),0.3)) drop-shadow(0 0 20px rgba(var(--glow-rgb),0.1)); transform: scale(1); opacity: 0.88; }
72% { filter: drop-shadow(0 0 6px rgba(var(--glow-rgb),0.2)); transform: scale(1); opacity: 0.85; }
76% { filter: drop-shadow(0 0 20px rgba(var(--glow-rgb),0.7)) drop-shadow(0 0 50px rgba(var(--glow-rgb),0.3)) brightness(1.4); transform: scale(1.06); opacity: 1; }
82% { filter: drop-shadow(0 0 10px rgba(var(--glow-rgb),0.4)); transform: scale(1.01); opacity: 0.9; }
100% { filter: drop-shadow(0 0 6px rgba(var(--glow-rgb),0.25)) drop-shadow(0 0 15px rgba(var(--glow-rgb),0.08)); transform: scale(1); opacity: 0.85; }
}
.linkedin-icon-hero,
h1 svg.li-shimmer:not(.li-shimmer-standalone) {
display: inline-block !important;
width: 0.78em !important;
height: 0.78em !important;
vertical-align: middle !important;
margin: 0 0.14em !important;
position: relative !important;
top: -0.05em !important;
}
h2 svg.li-shimmer:not(.li-shimmer-standalone),
.section-title svg.li-shimmer {
display: inline-block !important;
width: 0.88em !important;
height: 0.88em !important;
vertical-align: middle !important;
margin: 0 0.12em !important;
position: relative !important;
top: -0.04em !important;
}
h1 .li-shimmer-wrap,
h2 .li-shimmer-wrap,
.section-title .li-shimmer-wrap {
display: inline-block;
vertical-align: middle;
margin: 0 0.15em;
line-height: 0;
position: relative;
top: -0.06em;
}
.li-float {
position: absolute; z-index: 4; pointer-events: none;
}
.li-float svg {
filter: drop-shadow(0 0 18px rgba(var(--glow-rgb),0.5)) drop-shadow(0 0 40px rgba(var(--glow-rgb),0.15));
}
.li-float-a {
top: 12%; right: 8%;
animation: li-float-drift-a 6s ease-in-out infinite;
}
.li-float-a-left {
top: 18%; left: 8%;
animation: li-float-drift-a-left 7s ease-in-out infinite;
}
.li-float-c {
top: 30px; right: -42px;
animation: li-float-drift-c 5.5s ease-in-out infinite;
}
@keyframes li-float-drift-a {
0%, 100% { transform: translate(0, 0) rotate(-6deg); }
33% { transform: translate(-8px, 12px) rotate(2deg); }
66% { transform: translate(6px, -6px) rotate(-3deg); }
}
@keyframes li-float-drift-a-left {
0%, 100% { transform: translate(0, 0) rotate(5deg); }
40% { transform: translate(10px, 10px) rotate(-4deg); }
75% { transform: translate(-6px, -8px) rotate(3deg); }
}
@keyframes li-float-drift-b {
0%, 100% { transform: translate(0, 0) rotate(4deg); }
40% { transform: translate(10px, -8px) rotate(-5deg); }
70% { transform: translate(-4px, 10px) rotate(2deg); }
}
@keyframes li-float-drift-c {
0%, 100% { transform: translate(0, 0) rotate(-3deg); }
50% { transform: translate(-12px, 8px) rotate(6deg); }
}
@media (max-width: 768px) {
.li-float { display: none; }
}
.hero-desc {
font-size: 0.989rem; color: var(--text-3); max-width: 600px;
margin: 0 auto 44px; line-height: 1.75;
}
.hero-buttons {
display: flex; gap: 14px; justify-content: center; margin-bottom: 72px;
}
.hero-flow {
max-width: 960px; margin: 0 auto 80px;
position: relative; padding: 24px 0;
}
.hero-flow-track {
display: flex; align-items: center; justify-content: space-between;
position: relative;
}
.hero-flow-line {
position: absolute; top: 50%; left: 40px; right: 40px; height: 2px;
background: rgba(var(--fg-rgb),0.04);
transform: translateY(-50%);
}
.hero-flow-line-fill {
position: absolute; inset: 0; height: 100%;
background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb),0.3), var(--accent));
background-size: 200% 100%;
animation: flow-line-move 3s linear infinite;
border-radius: 2px;
}
@keyframes flow-line-move {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.flow-traveller {
position: absolute; top: 50%; left: 0;
width: 24px; height: 4px; border-radius: 4px;
background: linear-gradient(90deg, transparent, var(--accent-light), transparent);
transform: translateY(-50%);
animation: traveller 2.8s ease-in-out infinite;
box-shadow: 0 0 12px var(--accent);
}
@keyframes traveller {
0% { left: 0; opacity: 0; }
5% { opacity: 1; }
95% { opacity: 1; }
100% { left: calc(100% - 24px); opacity: 0; }
}
.flow-traveller:nth-child(2) { animation-delay: 1.4s; width: 16px; }
.hf-node {
display: flex; flex-direction: column; align-items: center;
position: relative; z-index: 2; width: 120px; flex-shrink: 0;
}
.hf-node-circle {
width: 72px; height: 72px; border-radius: 50%;
background: var(--bg-0);
border: 1.5px solid rgba(var(--fg-rgb),0.08);
display: flex; align-items: center; justify-content: center;
position: relative; transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
box-shadow: 0 4px 20px rgba(var(--shadow-rgb),0.4);
}
.hf-node-circle::before {
content: ''; position: absolute; inset: -4px;
border-radius: 50%; border: 1.5px solid transparent;
transition: border-color 0.4s;
}
.hf-node.active .hf-node-circle {
border-color: var(--accent);
box-shadow: 0 0 30px rgba(var(--glow-rgb),0.2), 0 4px 20px rgba(var(--shadow-rgb),0.4);
}
.hf-node.active .hf-node-circle::before {
border-color: rgba(var(--accent-rgb),0.15);
}
.hf-node-circle svg { color: var(--text-3); transition: color 0.4s; }
.hf-node.active .hf-node-circle svg { color: var(--accent); }
.hf-node-label {
margin-top: 14px; font-size: 0.698rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--text-2); transition: color 0.4s;
text-align: center; line-height: 1.3;
}
.hf-node.active .hf-node-label { color: var(--accent); }
.hf-arrow {
flex: 1; display: flex; align-items: center; justify-content: center;
position: relative; z-index: 1; min-width: 20px;
}
.hf-arrow svg {
color: rgba(var(--fg-rgb),0.12);
animation: arrow-pulse 2s ease-in-out infinite;
}
.hf-arrow:nth-child(2) svg { animation-delay: 0.3s; }
.hf-arrow:nth-child(4) svg { animation-delay: 0.6s; }
.hf-arrow:nth-child(6) svg { animation-delay: 0.9s; }
.hf-arrow:nth-child(8) svg { animation-delay: 1.2s; }
@keyframes arrow-pulse {
0%, 100% { color: rgba(var(--fg-rgb),0.08); }
50% { color: rgba(var(--accent-rgb),0.5); }
}
.hf-desc {
text-align: center; margin-top: 32px;
min-height: 48px;
}
.hf-desc p {
font-size: 0.892rem; color: var(--text-2);
max-width: 480px; margin: 0 auto; line-height: 1.6;
animation: descFade 0.4s ease-out;
}
@keyframes descFade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.hero-flow-track { flex-wrap: wrap; justify-content: center; gap: 8px; }
.hf-arrow { display: none; }
.hf-node { width: 80px; }
.hf-node-circle { width: 56px; height: 56px; }
.hero-flow-line { display: none; }
.hf-node-label { font-size: 0.601rem; }
.hero-flow-track { position: relative; padding-bottom: 18px; }
.hero-flow-track::after {
content: ''; position: absolute; bottom: 0; left: 10%; right: 10%;
height: 2px; background: rgba(var(--accent-rgb),0.1); border-radius: 2px;
}
.hero-flow-track::before {
content: ''; position: absolute; bottom: -1px; left: 10%;
width: 30px; height: 4px; border-radius: 4px; z-index: 3;
background: linear-gradient(90deg, transparent, var(--accent-light), transparent);
box-shadow: 0 0 10px var(--accent);
animation: mobile-flow-travel 2.5s ease-in-out infinite;
}
}
@keyframes mobile-flow-travel {
0% { left: 10%; opacity: 0; }
5% { opacity: 1; }
95% { opacity: 1; }
100% { left: calc(90% - 30px); opacity: 0; }
}
@keyframes flow-row-drip {
0% { top: 0; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { top: calc(100% - 8px); opacity: 0; }
}
@keyframes how-step-drip-down {
0% { bottom: -4px; opacity: 0; }
15% { opacity: 1; }
50% { bottom: -24px; opacity: 1; }
85% { opacity: 0.4; }
100% { bottom: -36px; opacity: 0; }
}
.hero-screen-wrapper {
position: relative; max-width: 1050px; margin: 0 auto;
}
.hero-screen {
position: relative;
z-index: 12;
background: linear-gradient(180deg, var(--surface-1), var(--surface-0));
border: 1px solid rgba(var(--fg-rgb),0.08);
border-radius: 16px;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(var(--fg-rgb),0.08),
0 20px 60px rgba(var(--shadow-rgb),0.6),
0 0 100px rgba(var(--glow-rgb),0.08);
}
.hero-screen, .hero-screen * {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.hero-screen-glow {
position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
width: 120%; height: 100%;
background: radial-gradient(ellipse, rgba(var(--accent-rgb),0.12), transparent 60%);
pointer-events: none; z-index: 1;
}
.browser-bar {
display: flex; align-items: center; gap: 8px;
padding: 12px 18px; background: rgba(var(--fg-rgb),0.05);
border-bottom: 1px solid rgba(var(--fg-rgb),0.05);
position: relative; z-index: 1;
}
.browser-dots { display: flex; gap: 6px; }
.browser-dots span {
width: 10px; height: 10px; border-radius: 50%;
}
.browser-dots span:nth-child(1) { background: #FF5F57; }
.browser-dots span:nth-child(2) { background: #FEBC2E; }
.browser-dots span:nth-child(3) { background: #28C840; }
.browser-url {
flex: 1; margin: 0 60px 0 16px; padding: 6px 14px;
background: rgba(var(--fg-rgb),0.04); border-radius: 8px;
font-size: 0.698rem; color: var(--text-3);
border: 1px solid rgba(var(--fg-rgb),0.08);
}
.dash {
padding: 24px; position: relative; z-index: 1;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.dash h1, .dash h2, .dash h3, .dash h4, .dash h5, .dash h6,
.dash span, .dash div, .dash p, .dash label, .dash input {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.dash-grid {
display: grid; grid-template-columns: 260px 1fr; gap: 20px;
min-height: 390px;
}
.dash-sidebar {
background: rgba(var(--fg-rgb),0.04); border-radius: 12px;
border: 1px solid rgba(var(--fg-rgb),0.08); padding: 20px 16px;
}
.dash-sidebar-logo {
display: flex; align-items: center; gap: 8px;
font-size: 0.873rem; font-weight: 600; color: var(--text-1);
margin-bottom: 14px; padding-bottom: 12px;
letter-spacing: -0.02em;
border-bottom: 1px solid rgba(var(--fg-rgb),0.05);
}
.dash-sidebar-logo .mini-mark {
width: 22px; height: 22px; border-radius: 7px;
background: linear-gradient(135deg, var(--fill-2), var(--fill-1) 55%, var(--accent-dark));
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 1px rgba(var(--glow-rgb),0.3), 0 4px 10px rgba(var(--glow-rgb),0.22);
flex-shrink: 0;
}
.dash-sidebar-logo .mini-mark svg { display: block; }
.dash-sidebar-logo .mini-mark.mini-mark-img {
background: none; box-shadow: none; border-radius: 0; width: 22px; height: 22px;
}
.dash-sidebar-logo .mini-mark.mini-mark-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dash-nav-item {
display: flex; align-items: center; gap: 9px;
padding: 7px 11px; border-radius: 8px; margin-bottom: 2px;
font-size: 0.728rem; color: var(--text-3); font-weight: 500;
white-space: nowrap;
}
.dash-nav-item.active {
background: rgba(var(--accent-rgb),0.16);
box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.28);
color: var(--dash-hi);
}
.dash-nav-item svg { width: 16px; height: 16px; opacity: 0.8; }
.dash-nav-item.active svg { opacity: 1; }
.dash-main { display: flex; flex-direction: column; gap: 16px; }
.dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dash-stat-card {
background: rgba(var(--fg-rgb),0.04);
border: 1px solid rgba(var(--fg-rgb),0.08);
border-radius: 10px; padding: 16px;
text-align: center;
display: flex; flex-direction: column; justify-content: flex-end;
}
.dash-stat-label { font-size: 0.679rem; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.dash-stat-value { font-size: 1.8rem; font-weight: 700; color: var(--text-1); }
.dash-stat-value .up { color: var(--dash-ok); font-size: 0.728rem; font-weight: 600; margin-left: 6px; }
.dash-feed {
flex: 1; background: rgba(var(--fg-rgb),0.04);
border: 1px solid rgba(var(--fg-rgb),0.08);
border-radius: 10px; padding: 18px; overflow: hidden;
}
.dash-feed-title .live-dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
animation: pulse-dot 1.5s infinite;
}
.convo-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 0; border-bottom: 1px solid rgba(var(--fg-rgb),0.06);
animation: slide-in 0.5s ease-out both;
}
.convo-row:nth-child(2) { animation-delay: 0.1s; }
.convo-row:nth-child(3) { animation-delay: 0.2s; }
.convo-row:nth-child(4) { animation-delay: 0.3s; }
.convo-row:nth-child(5) { animation-delay: 0.4s; }
@keyframes slide-in {
from { opacity: 0; transform: translateX(-12px); }
to { opacity: 1; transform: translateX(0); }
}
.convo-avatar {
width: 32px; height: 32px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.679rem; font-weight: 700; flex-shrink: 0;
background: linear-gradient(135deg, var(--surface-3), var(--border-light));
color: var(--text-2);
overflow: hidden;
}
.convo-avatar img {
width: 100%; height: 100%; object-fit: cover;
}
.convo-info { flex: 1; min-width: 0; text-align: left; }
.convo-name { font-size: 0.757rem; font-weight: 600; color: var(--text-2); text-align: left; }
.convo-msg { font-size: 0.679rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.convo-status {
font-size: 0.63rem; font-weight: 600; padding: 3px 10px;
border-radius: 100px; white-space: nowrap;
}
.convo-status.booked { background: rgba(var(--dash-ok-rgb),0.20); color: var(--dash-ok); }
.convo-status.replied { background: rgba(var(--ic1-rgb),0.18); color: var(--ic-1); }
.convo-status.engaged { background: rgba(var(--warn-rgb),0.18); color: var(--warning); }
.convo-status.sent { background: rgba(var(--fg-rgb),0.14); color: var(--text-2); }
.hero-notif {
position: absolute; bottom: 40px; right: -30px; z-index: 10;
background: var(--surface-1); backdrop-filter: blur(16px);
border: 1px solid rgba(var(--accent-rgb),0.2);
border-radius: 14px; padding: 14px 18px;
display: flex; align-items: center; gap: 12px;
box-shadow: 0 8px 32px rgba(var(--shadow-rgb),0.5), 0 0 20px rgba(var(--glow-rgb),0.1);
animation: float-in 0.8s 1.5s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes float-in {
from { opacity: 0; transform: translateY(20px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-notif-icon {
width: 36px; height: 36px; border-radius: 50%;
background: var(--accent-glow-md); display: flex;
align-items: center; justify-content: center;
}
.hero-notif-text .n-title {
font-size: 0.757rem; font-weight: 700; color: var(--text-1);
}
.hero-notif-text .n-desc {
font-size: 0.679rem; color: var(--text-3);
}
.hero-notif-left {
position: absolute; top: 120px; left: -35px; z-index: 10;
background: var(--surface-1); backdrop-filter: blur(16px);
border: 1px solid rgba(var(--ic1-rgb),0.2);
border-radius: 14px; padding: 14px 18px;
display: flex; align-items: center; gap: 12px;
box-shadow: 0 8px 32px rgba(var(--shadow-rgb),0.5);
animation: float-in 0.8s 2s cubic-bezier(0.16,1,0.3,1) both;
}
.hero-notif-left .hero-notif-icon {
background: rgba(var(--ic1-rgb),0.15);
}
.agent-select-main {
flex: 1; display: flex; flex-direction: column; padding: 4px 4px 0;
}
.ca-card-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 1;
}
.ca-card {
background: rgba(var(--fg-rgb),0.04);
border: 1px solid rgba(var(--fg-rgb),0.1);
border-radius: 14px; padding: 20px 18px 18px;
display: flex; flex-direction: column; align-items: center;
position: relative; overflow: hidden;
transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
}
.ca-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 2px; border-radius: 14px 14px 0 0;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: 0;
}
.ca-card.recommended {
border-color: rgba(var(--accent-rgb),0.32);
background: linear-gradient(180deg, rgba(var(--accent-rgb),0.06), rgba(var(--accent-rgb),0.01) 60%);
box-shadow: 0 0 0 1px rgba(var(--glow-rgb),0.12), 0 8px 24px rgba(var(--glow-rgb),0.08);
}
.ca-card.recommended::before { opacity: 1; }
.ca-reco-badge {
position: absolute; top: 10px; right: 10px;
font-size: 0.52rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.12em; color: var(--on-accent);
background: linear-gradient(135deg, var(--fill-2), var(--fill-1));
padding: 3px 8px; border-radius: 100px;
}
.ca-icon {
width: 62px; height: 62px; border-radius: 16px;
background: linear-gradient(135deg, rgba(var(--accent-rgb),0.16), rgba(var(--accent-rgb),0.04));
border: 1px solid rgba(var(--accent-rgb),0.18);
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px; position: relative;
}
.ca-card.recommended .ca-icon {
background: linear-gradient(135deg, rgba(var(--accent-rgb),0.22), rgba(var(--accent-rgb),0.08));
box-shadow: 0 0 24px rgba(var(--glow-rgb),0.18);
}
.ca-card.click-pulse {
animation: card-click 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes card-click {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--glow-rgb),0); }
20% { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(var(--glow-rgb),0.3); }
50% { transform: scale(1.02); box-shadow: 0 0 20px 4px rgba(var(--glow-rgb),0.25); }
100% { transform: scale(1); box-shadow: 0 0 30px 8px rgba(var(--glow-rgb),0.15); }
}
.ca-icon svg { width: 32px; height: 32px; }
.ca-card-title {
font-size: 0.854rem; font-weight: 600; color: var(--text-1);
text-align: center; margin-bottom: 6px; letter-spacing: -0.015em;
}
.ca-card-desc {
font-size: 0.66rem; color: var(--text-3);
line-height: 1.55; text-align: center; max-width: 200px; margin-bottom: 14px;
}
.ca-card-cta {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.679rem; font-weight: 700;
padding: 8px 16px; border-radius: 100px;
background: rgba(var(--fg-rgb),0.04);
border: 1px solid rgba(var(--fg-rgb),0.08); color: var(--text-2);
margin-top: auto;
}
.ca-card.recommended .ca-card-cta {
background: linear-gradient(135deg, var(--fill-2), var(--fill-1));
border-color: transparent; color: var(--on-accent);
box-shadow: 0 4px 14px rgba(var(--glow-rgb),0.25);
}
.ca-card-cta svg { width: 10px; height: 10px; }
.ca-features { display: flex; gap: 8px; margin-top: 10px; margin-bottom: 12px; flex-wrap: wrap; justify-content: center; }
.ca-feat {
font-size: 0.563rem; font-weight: 600; color: var(--text-3);
padding: 3px 8px; border-radius: 100px;
background: rgba(var(--fg-rgb),0.05); border: 1px solid rgba(var(--fg-rgb),0.05);
display: inline-flex; align-items: center; gap: 4px;
}
.ca-card.recommended .ca-feat { background: rgba(var(--accent-rgb),0.08); border-color: rgba(var(--accent-rgb),0.18); color: var(--accent); }
.ca-feat::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.6; }
@keyframes ca-icon-pulse {
0%, 100% { box-shadow: 0 0 24px rgba(var(--glow-rgb),0.18), 0 0 0 0 rgba(var(--glow-rgb),0.3); }
50% { box-shadow: 0 0 32px rgba(var(--glow-rgb),0.32), 0 0 0 8px rgba(var(--glow-rgb),0); }
}
.ca-card.recommended .ca-icon { animation: ca-icon-pulse 2.8s ease-in-out infinite; }
.ca-steps-bar {
display: flex; gap: 6px; margin-bottom: 12px;
}
.ca-step-card {
flex: 1; padding: 10px 8px; border-radius: 10px;
background: rgba(var(--fg-rgb),0.05);
border: 1px solid rgba(var(--fg-rgb),0.05);
text-align: center; transition: all 0.3s;
}
.ca-step-card.active-step {
border-color: rgba(var(--accent-rgb),0.35);
background: rgba(var(--accent-rgb),0.06);
}
.ca-step-card-icon {
width: 28px; height: 28px; border-radius: 8px; margin: 0 auto 5px;
display: flex; align-items: center; justify-content: center;
}
.ca-step-card-icon svg { width: 14px; height: 14px; }
.ca-step-card-icon.purple { background: rgba(var(--ic2-rgb),0.20); color: var(--ic-2); box-shadow: inset 0 0 0 1px rgba(var(--ic2-rgb),0.30); }
.ca-step-card-icon.blue { background: rgba(var(--ic1-rgb),0.20); color: var(--ic-1); box-shadow: inset 0 0 0 1px rgba(var(--ic1-rgb),0.30); }
.ca-step-card-icon.orange { background: rgba(var(--warn-rgb),0.20); color: var(--warning); box-shadow: inset 0 0 0 1px rgba(var(--warn-rgb),0.30); }
.ca-step-card-icon.green { background: rgba(var(--success-rgb),0.20); color: var(--success); box-shadow: inset 0 0 0 1px rgba(var(--success-rgb),0.30); }
.ca-step-card-name { font-size: 0.582rem; font-weight: 700; color: var(--text-2); }
.create-agent-main {
flex: 1; display: flex; flex-direction: column;
padding: 4px 4px 0; overflow: hidden;
}
.ca-phase { flex: 1; display: flex; flex-direction: column; }
.ca-header {
background: linear-gradient(135deg, rgba(var(--accent-rgb),0.08), rgba(var(--accent-rgb),0.02));
border: 1px solid rgba(var(--accent-rgb),0.18);
border-radius: 12px; padding: 16px 20px;
display: flex; align-items: center; gap: 12px;
margin-bottom: 14px;
}
.ca-back {
width: 26px; height: 26px; border-radius: 8px;
background: rgba(var(--fg-rgb),0.04);
border: 1px solid rgba(var(--fg-rgb),0.1);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ca-back svg { width: 12px; height: 12px; color: var(--text-2); }
.ca-header-text .ca-title {
font-size: 1.018rem; font-weight: 600; color: var(--text-1);
letter-spacing: -0.02em; line-height: 1.2;
}
.ca-header-text .ca-sub {
font-size: 0.66rem; color: var(--text-3);
margin-top: 3px; text-align: left;
}
.ca-form { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ca-field { opacity: 0; transform: translateY(8px); transition: all 0.4s ease; }
.ca-field.visible { opacity: 1; transform: translateY(0); }
.ca-label {
font-size: 0.63rem; font-weight: 700; color: var(--text-2);
margin-bottom: 5px; display: block;
}
.ca-input {
background: rgba(var(--fg-rgb),0.05);
border: 1px solid rgba(var(--fg-rgb),0.08);
border-radius: 8px; padding: 10px 14px;
font-size: 0.698rem; color: var(--text-1);
font-family: inherit; min-height: 18px;
transition: border-color 0.3s;
}
.ca-input.typing { border-color: rgba(var(--accent-rgb),0.4); }
.ca-input.filled { border-color: rgba(var(--accent-rgb),0.25); }
.ca-placeholder { color: var(--text-3); opacity: 0.5; font-size: 0.698rem; }
.ca-typed-text { color: var(--text-1); font-size: 0.698rem; }
.ca-typed-text .ca-cursor {
display: inline-block; width: 1px; height: 0.85em;
background: var(--accent-light); margin-left: 1px;
animation: blink-cursor 0.8s step-end infinite;
vertical-align: text-bottom;
}
.ca-cta-row { display: flex; gap: 8px; }
.ca-cta-opt {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 10px 6px; border-radius: 10px;
background: rgba(var(--fg-rgb),0.04);
border: 1px solid rgba(var(--fg-rgb),0.08);
font-size: 0.63rem; color: var(--text-3); font-weight: 600;
transition: all 0.3s;
}
.ca-cta-opt svg { width: 16px; height: 16px; opacity: 0.8; }
.ca-cta-opt.selected {
border-color: rgba(var(--accent-rgb),0.62);
background: rgba(var(--accent-rgb),0.14);
color: var(--dash-hi);
box-shadow: 0 0 12px rgba(var(--glow-rgb),0.18);
}
.ca-cta-opt.selected svg { opacity: 1; color: var(--dash-hi); }
.ca-form-actions {
display: flex; gap: 10px; justify-content: flex-end;
margin-top: auto; padding-top: 8px;
opacity: 0; transform: translateY(6px); transition: all 0.4s ease;
}
.ca-form-actions.visible { opacity: 1; transform: translateY(0); }
.ca-btn-cancel {
font-size: 0.679rem; font-weight: 600; color: var(--text-3);
padding: 8px 18px; border-radius: 8px;
border: 1px solid rgba(var(--fg-rgb),0.1);
background: rgba(var(--fg-rgb),0.05);
}
.ca-btn-create {
font-size: 0.679rem; font-weight: 700; color: var(--on-accent);
padding: 8px 20px; border-radius: 8px;
background: linear-gradient(135deg, var(--fill-2), var(--fill-1));
box-shadow: 0 4px 14px rgba(var(--glow-rgb),0.25);
transition: all 0.3s;
}
.ca-btn-create.pulse {
animation: ca-btn-pulse 0.6s ease;
}
@keyframes ca-btn-pulse {
0% { transform: scale(1); }
50% { transform: scale(0.96); box-shadow: 0 2px 8px rgba(var(--glow-rgb),0.4); }
100% { transform: scale(1); }
}
.ca-phase-success {
align-items: center; justify-content: center; text-align: center;
gap: 12px; animation: screenFade 0.5s ease-out;
}
.ca-success-check { margin-bottom: 4px; }
.ca-success-check svg { filter: drop-shadow(0 0 16px rgba(var(--glow-rgb),0.4)); }
.ca-success-title {
font-size: 1.2rem; font-weight: 800; color: var(--text-1);
letter-spacing: -0.02em;
}
.ca-success-desc {
font-size: 0.698rem; color: var(--text-3);
max-width: 280px; line-height: 1.6;
}
.ca-success-steps {
display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;
justify-content: center;
}
.ca-step-pill {
font-size: 0.601rem; font-weight: 600; color: var(--text-3);
padding: 6px 12px; border-radius: 100px;
background: rgba(var(--fg-rgb),0.05);
border: 1px solid rgba(var(--fg-rgb),0.1);
display: inline-flex; align-items: center; gap: 6px;
transition: all 0.4s;
}
.ca-step-pill.active {
border-color: rgba(var(--accent-rgb),0.4);
background: rgba(var(--accent-rgb),0.1);
color: var(--accent);
}
.ca-step-pill.st-strategy { color:#C4B5FD; background:rgba(167,139,250,0.16); border-color:rgba(167,139,250,0.36); }
.ca-step-pill.st-outreach { color:#3DDCF5; background:rgba(34,211,238,0.16); border-color:rgba(34,211,238,0.38); }
.ca-step-pill.st-nurturing { color:#FCD34D; background:rgba(251,191,36,0.16); border-color:rgba(251,191,36,0.38); }
.ca-step-pill.st-analytics { color:#6EE7B7; background:rgba(52,211,153,0.16); border-color:rgba(52,211,153,0.38); }
.ca-step-pill[class*="st-"] .ca-step-dot { opacity: 1; }
.ca-step-dot {
width: 6px; height: 6px; border-radius: 50%;
background: currentColor; opacity: 0.4;
}
.ca-step-pill.active .ca-step-dot {
opacity: 1;
animation: pulse-dot 1.5s infinite;
}
.dash { min-height: 468px; }
@media (max-width: 900px){ .dash { min-height: 0; } }
.demo-view { display: none; animation: screenFade 0.5s ease-out; }
.demo-view.active { display: block; }
@keyframes screenFade {
from { opacity: 0; transform: scale(0.98); }
to { opacity: 1; transform: scale(1); }
}
.screen-hint {
position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
font-size: 0.66rem; color: var(--text-3); z-index: 5;
display: flex; align-items: center; gap: 6px;
background: rgba(var(--shadow-rgb),0.5); backdrop-filter: blur(8px);
padding: 6px 14px; border-radius: 100px;
border: 1px solid rgba(var(--fg-rgb),0.1);
animation: hint-pulse 2.5s ease-in-out infinite;
}
@keyframes hint-pulse {
0%,100% { opacity: 0.6; } 50% { opacity: 1; }
}
.screen-dots {
display: flex; gap: 6px; justify-content: center;
margin-top: 16px;
padding-bottom: 6px;
margin-bottom: 30px;
}
.screen-dots span {
width: 8px; height: 8px; border-radius: 50%;
background: rgba(var(--fg-rgb),0.15); transition: all 0.3s;
cursor: pointer;
}
.screen-dots span.active {
background: var(--accent); box-shadow: 0 0 8px var(--accent-glow-strong);
width: 24px; border-radius: 4px;
}
.lead-search-main {
padding: 6px 16px 12px;
display: flex; flex-direction: column; gap: 8px;
}
.lead-search-title {
font-size: 1.1rem; font-weight: 600; color: var(--text-1);
letter-spacing: -0.02em; text-align: center;
background: linear-gradient(120deg, var(--text-1) 0%, var(--text-1) 34%, var(--head-grad-end) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
margin-top: 2px;
}
.lead-search-sub {
font-size: 0.698rem; color: var(--text-3);
text-align: center; margin-bottom: 2px;
}
.lead-search-tabs {
display: inline-flex; gap: 4px; justify-content: center; margin: 0 auto 6px;
padding: 4px; border-radius: 11px;
background: rgba(var(--fg-rgb),0.06);
border: 1px solid rgba(var(--fg-rgb),0.09);
}
.lead-tab {
display: flex; align-items: center; gap: 6px;
padding: 6px 14px; border-radius: 8px;
font-size: 0.698rem; font-weight: 600;
background: transparent; border: 1px solid transparent;
color: var(--text-3); cursor: pointer;
transition: background .25s, color .25s, box-shadow .25s;
white-space: nowrap;
}
.lead-tab:hover { color: var(--text-2); background: rgba(var(--fg-rgb),0.05); }
.lead-tab.active {
background: linear-gradient(135deg, var(--fill-1), var(--fill-2));
border-color: transparent;
color: var(--on-accent);
box-shadow: 0 2px 10px rgba(var(--glow-rgb),0.28);
}
.lead-tab.active .dot { background: var(--on-accent); box-shadow: none; }
.lead-tab svg { flex-shrink: 0; }
.lead-tab .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent-light);
box-shadow: 0 0 6px var(--accent);
}
.lead-search-box {
background: rgba(var(--fg-rgb),0.05);
border: 1.5px solid rgba(var(--accent-rgb),0.4);
border-radius: 12px; padding: 10px 14px;
box-shadow: 0 0 20px rgba(var(--glow-rgb),0.08), inset 0 0 20px rgba(var(--glow-rgb),0.02);
}
.lead-search-input {
font-size: 0.757rem; color: var(--text-2);
min-height: 28px; display: flex; align-items: center;
}
.lead-search-input .typed-text { color: var(--text-1); }
.lead-search-input .placeholder { color: var(--text-3); font-style: italic; }
.lead-search-input .placeholder.typed { color: var(--text-1); font-style: normal; font-weight: 500; }
.lead-search-input .cursor {
display: inline-block; width: 1.5px; height: 0.95rem;
background: var(--accent-light); margin-left: 2px;
animation: blink 1s steps(2, start) infinite; vertical-align: middle;
}
@keyframes blink { to { visibility: hidden; } }
.lead-search-controls {
display: flex; align-items: center; gap: 12px; justify-content: space-between;
}
.lead-search-dropdown {
flex: 1; padding: 9px 14px;
background: rgba(var(--fg-rgb),0.05);
border: 1px solid rgba(var(--fg-rgb),0.1);
border-radius: 10px;
font-size: 0.718rem; color: var(--text-2);
display: flex; align-items: center; justify-content: space-between;
}
.lead-search-dropdown .label { color: var(--text-3); font-size: 0.64rem; display: block; margin-bottom: 1px; }
.lead-search-submit {
width: 38px; height: 38px; border-radius: 50%;
background: linear-gradient(135deg, var(--fill-2), var(--fill-1));
border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 14px rgba(var(--glow-rgb),0.35);
color: var(--on-accent); flex-shrink: 0;
transition: transform 0.3s;
}
.lead-search-submit.searching {
animation: search-pulse 1.5s ease-in-out infinite;
}
@keyframes search-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 4px 14px rgba(var(--glow-rgb),0.35); }
50% { transform: scale(1.08); box-shadow: 0 4px 24px rgba(var(--glow-rgb),0.6); }
}
.lead-results {
background: rgba(var(--fg-rgb),0.04);
border: 1px solid rgba(var(--fg-rgb),0.08);
border-radius: 10px; padding: 8px 12px;
overflow: hidden;
position: relative;
}
.lead-results-header {
display: flex; align-items: center; justify-content: space-between;
font-size: 0.64rem; color: var(--text-3);
text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
margin-bottom: 8px; padding-bottom: 6px;
border-bottom: 1px solid rgba(var(--fg-rgb),0.04);
}
.lead-results-header .lr-count {
color: var(--dash-ok); font-size: 0.679rem; font-weight: 600;
}
.lead-results-header .lr-count .scanning {
display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: var(--dash-ok); margin-right: 5px;
animation: pulse-dot 1.2s infinite;
vertical-align: middle;
}
.lead-result-row {
display: flex; align-items: center; gap: 10px;
padding: 6px 0; opacity: 0;
transform: translateX(-12px);
transition: opacity 0.4s, transform 0.4s;
}
.lead-result-row.show {
opacity: 1; transform: translateX(0);
}
.lr-avatar {
width: 24px; height: 24px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.533rem; font-weight: 700; color: #fff;
flex-shrink: 0;
}
.lr-info { flex: 1; min-width: 0; }
.lr-name { font-size: 0.698rem; font-weight: 600; color: var(--text-1); }
.lr-role { font-size: 0.601rem; color: var(--text-3); }
.lr-badge {
display: flex; align-items: center; gap: 3px;
font-size: 0.563rem; font-weight: 700;
color: var(--dash-neutral);
background: rgba(var(--dash-neutral-rgb),0.14);
padding: 2px 7px; border-radius: 100px;
border: 1px solid rgba(var(--dash-neutral-rgb),0.30);
}
.lr-badge svg { width: 8px; height: 8px; }
.lead-search-credit {
margin-top: auto; padding: 7px 12px;
background: rgba(var(--fg-rgb),0.04);
border: 1px solid rgba(var(--fg-rgb),0.09);
border-radius: 10px;
display: flex; align-items: center; justify-content: space-between;
font-size: 0.66rem; color: var(--text-3);
}
.lead-search-credit strong { color: var(--text-1); font-weight: 700; }
.convo-detail {
display: grid; grid-template-columns: 180px 1fr;
gap: 0; height: 100%; min-height: 380px;
}
.cd-profile {
background: rgba(var(--fg-rgb),0.05);
border-right: 1px solid rgba(var(--fg-rgb),0.08);
padding: 24px 16px; display: flex; flex-direction: column;
align-items: center; text-align: center;
}
.cd-profile-avatar {
width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
border: 2px solid rgba(var(--accent-rgb),0.3);
margin-bottom: 12px;
}
.cd-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cd-profile .cd-name { font-size: 0.795rem; font-weight: 700; color: var(--text-1); margin-bottom: 2px; }
.cd-profile .cd-role { font-size: 0.66rem; color: var(--text-3); margin-bottom: 12px; line-height: 1.4; }
.cd-profile .cd-li-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 0.582rem; color: #0A66C2; font-weight: 600;
padding: 3px 10px; border-radius: 100px;
background: rgba(10,102,194,0.1); border: 1px solid rgba(10,102,194,0.15);
margin-bottom: 16px;
}
.cd-tags { width: 100%; }
.cd-tag {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 0; border-bottom: 1px solid rgba(var(--fg-rgb),0.07);
font-size: 0.601rem;
}
.cd-tag-label { color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.cd-tag-val { color: var(--text-2); font-weight: 500; }
.cd-evt { color: var(--dash-hi); font-weight: 600; }
.sc-link { color: var(--accent); text-decoration: underline; cursor: pointer; }
.cd-tag-val.green { color: var(--dash-ok); }
.cd-chat { padding: 16px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; text-align: left; align-items: flex-start; }
.cd-chat-title {
font-size: 0.66rem; color: var(--text-3); font-weight: 600;
text-transform: uppercase; letter-spacing: 0.08em;
margin-bottom: 4px; display: flex; align-items: center; gap: 6px;
}
.cd-chat-title svg { color: var(--accent); }
.cd-bubble-row { display: flex; gap: 8px; align-items: flex-start; width: 100%; }
.cd-bubble-row.out { }
.cd-ava { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; overflow: hidden; }
.cd-ava img { width: 100%; height: 100%; object-fit: cover; }
.cd-ava.bot { background: var(--accent); display: flex; align-items: center; justify-content: center; }
.cd-ava.bot svg { width: 12px; height: 12px; }
.cd-bubble {
padding: 8px 12px; border-radius: 10px; font-size: 0.698rem;
line-height: 1.5; max-width: 78%; position: relative; text-align: left;
}
.cd-bubble-row.out .cd-bubble {
background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.18);
color: var(--text-1); border-bottom-left-radius: 3px;
}
.cd-bubble-row.in .cd-bubble {
background: rgba(var(--fg-rgb),0.06); border: 1px solid rgba(var(--fg-rgb),0.12);
color: var(--text-1); border-bottom-left-radius: 3px;
}
.cd-bubble .ai-tag {
display: inline-block; font-size: 0.533rem; font-weight: 700;
color: var(--accent); background: rgba(var(--accent-rgb),0.1);
padding: 1px 6px; border-radius: 4px; margin-left: 6px;
vertical-align: middle;
}
.cd-time { font-size: 0.533rem; color: var(--text-3); margin-top: 2px; padding: 0 30px; text-align: left; width: 100%; }
.cd-time.right { text-align: left; }
@media (max-width: 768px) {
.convo-detail { grid-template-columns: 1fr; }
.cd-profile { display: none; }
}
.meeting-view { padding: 32px 20px; text-align: center; }
.meeting-check {
width: 72px; height: 72px; border-radius: 50%;
background: rgba(var(--success-rgb),0.16); border: 2px solid var(--success);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 20px;
animation: check-pop 0.6s cubic-bezier(0.16,1,0.3,1);
}
@keyframes check-pop {
0% { transform: scale(0); } 50% { transform: scale(1.15); } 100% { transform: scale(1); }
}
.meeting-view h3, .meeting-view .mockh-a { font-size: 1.3rem; font-weight: 800; color: var(--text-1); margin-bottom: 6px; }
.meeting-view .mv-sub { font-size: 0.854rem; color: var(--text-3); margin-bottom: 28px; }
.mv-card {
background: rgba(var(--fg-rgb),0.05); border: 1px solid rgba(var(--fg-rgb),0.1);
border-radius: 12px; padding: 20px; max-width: 400px; margin: 0 auto;
text-align: left;
}
.mv-card-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.mv-card-row:last-child { margin-bottom: 0; }
.mv-card-row .mv-label { font-size: 0.698rem; color: var(--text-3); min-width: 70px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.06em; }
.mv-card-row .mv-val { font-size: 0.825rem; color: var(--text-1); font-weight: 500; }
.mv-card-row .mv-val img { width: 28px; height: 28px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 8px; }
.stats-bar {
position: relative; z-index: 1;
padding: 60px 0;
}
.stats-bar-inner {
display: flex; justify-content: center; gap: 80px;
flex-wrap: wrap;
}
.stat-item { text-align: center; }
.stat-num {
font-family: 'Outfit', 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 2.8rem; font-weight: 900; letter-spacing: -0.03em;
background: linear-gradient(120deg, var(--text-1) 0%, var(--text-1) 34%, var(--head-grad-end) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-label { font-size: 0.795rem; color: var(--text-3); margin-top: 4px; font-weight: 500; }
.features { position: relative; z-index: 1; padding: 100px 0; background: var(--bg-1); }
.features-header { text-align: center; margin-bottom: 60px; }
.features-header .section-desc { margin: 0 auto; }
.flow-thread {
position: absolute; left: 50%; top: 0; bottom: 0;
width: 2px; transform: translateX(-50%);
background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb),0.15) 5%, rgba(var(--accent-rgb),0.15) 95%, transparent);
}
@keyframes thread-pulse {
0% { top: 0; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { top: calc(100% - 60px); opacity: 0; }
}
.flow-thread .dash-h {
position: absolute; left: 50%; height: 1px; width: 0;
border-top: 1.5px dashed rgba(var(--accent-rgb),0.2);
}
.flow-row {
display: grid; grid-template-columns: 1fr 180px 1fr;
gap: 0; align-items: center;
min-height: 200px; position: relative;
}
.flow-text {
padding: 0 32px;
}
.flow-text.right { text-align: left; grid-column: 3; }
.flow-text.right p { margin-right: auto; }
.flow-module-wrap {
grid-column: 2; display: flex; align-items: center;
justify-content: center; position: relative; z-index: 2;
}
.flow-module-top {
position: absolute; left: 8px; right: 8px; top: -18px; height: 20px;
background: linear-gradient(135deg, rgba(var(--fg-rgb),0.08), rgba(var(--fg-rgb),0.04));
border: 1px solid rgba(var(--fg-rgb),0.1);
border-radius: 10px 10px 0 0;
transform: perspective(400px) rotateX(40deg);
transform-origin: bottom center;
}
.flow-module-sheen {
position: absolute; inset: 0; border-radius: 18px; overflow: hidden;
pointer-events: none;
}
@keyframes sheen-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.flow-node {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 12px; height: 12px; border-radius: 50%;
background: var(--bg-0); border: 2px solid rgba(var(--accent-rgb),0.4);
z-index: 3;
box-shadow: 0 0 12px rgba(var(--glow-rgb),0.2);
transition: all 0.4s;
}
@media (max-width: 768px) {
.flow-text.left, .flow-text.right {
text-align: center; grid-column: 1;
}
.flow-text.left p, .flow-text.right p { margin: 0 auto; }
.flow-row { position: relative; overflow: visible; padding-bottom: 20px; }
.flow-row::before {
content: ''; position: absolute; bottom: 0;
left: 50%; transform: translateX(-50%);
width: 5px; height: 5px; border-radius: 50%;
background: var(--accent-light);
box-shadow: 0 0 10px var(--accent), 0 0 4px var(--accent);
z-index: 5; pointer-events: none;
}
.flow-row::before {
bottom: auto; top: auto;
animation: flow-row-drip 2s ease-in-out infinite;
bottom: 8px;
left: 50%; margin-left: -2.5px; transform: none;
}
}
.how { position: relative; z-index: 1; padding: 140px 0; background: var(--bg-1); }
.how-header { text-align: center; margin-bottom: 80px; }
.how-header .section-desc { margin: 0 auto; }
.how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.how-steps::before { display: none; }
.how-step {
text-align: center; padding: 0 20px; position: relative;
}
.step-circle {
width: 72px; height: 72px; border-radius: 50%;
background: var(--bg-0);
border: 2px solid rgba(var(--accent-rgb),0.3);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 24px; position: relative; z-index: 1;
box-shadow: 0 0 30px rgba(var(--glow-rgb),0.1);
transition: all 0.4s;
}
.how-step:hover .step-circle {
border-color: var(--accent);
box-shadow: 0 0 40px rgba(var(--glow-rgb),0.25);
transform: scale(1.08);
}
.step-circle svg { color: var(--accent); }
.step-num {
position: absolute; top: -10px; right: -6px;
width: 26px; height: 26px; border-radius: 50%;
background: linear-gradient(135deg, var(--fill-2), var(--fill-1));
color: var(--on-accent); font-size: 0.698rem; font-weight: 900;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 12px rgba(var(--glow-rgb),0.5), 0 2px 8px rgba(var(--shadow-rgb),0.4);
border: 2px solid rgba(var(--fg-rgb),0.15);
z-index: 3;
}
.how-step h3 {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 0.921rem; font-weight: 600; color: var(--text-1); margin-bottom: 8px;
letter-spacing: -0.01em;
}
.how-step p {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 0.825rem; color: var(--text-3); line-height: 1.6;
}
.showcase { position: relative; z-index: 1; padding: 140px 0; background: var(--bg-1); }
.showcase-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 72px; align-items: center;
}
.showcase-content .section-desc { margin-bottom: 36px; }
.sc-list { display: flex; flex-direction: column; gap: 18px; }
.sc-item { display: flex; gap: 14px; align-items: flex-start; }
.sc-check {
width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
background: var(--accent-glow-md); border: 1px solid rgba(var(--accent-rgb),0.2);
display: flex; align-items: center; justify-content: center;
margin-top: 2px;
}
.sc-item p {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 0.815rem; color: var(--text-3); line-height: 1.6;
}
.sc-item strong {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--text-1); font-weight: 600; font-size: 0.815rem;
}
.sc-chat {
background: var(--bg-2);
border: 1px solid var(--border-light);
border-radius: 20px; padding: 0; overflow: hidden;
box-shadow: 0 20px 60px rgba(var(--shadow-rgb),0.4), 0 0 40px rgba(var(--glow-rgb),0.05);
}
.sc-chat-header {
padding: 16px 20px; display: flex; align-items: center; gap: 12px;
border-bottom: 1px solid var(--border);
background: rgba(var(--fg-rgb),0.04);
}
.sc-chat-avatar {
width: 32px; height: 32px; border-radius: 50%;
background: linear-gradient(135deg, var(--fill-2), var(--fill-1));
display: flex; align-items: center; justify-content: center;
font-size: 0.679rem; font-weight: 800; color: var(--on-accent);
}
.sc-chat-name { font-size: 0.825rem; font-weight: 600; color: var(--text-1); }
.sc-chat-status { font-size: 0.679rem; color: var(--success-light); }
.sc-chat-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.sc-auto-event {
display: flex; align-items: center; gap: 8px;
margin: 2px 0;
}
.sc-auto-line {
flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.2), transparent);
}
.sc-auto-pill {
display: flex; align-items: center; gap: 5px;
font-size: 0.563rem; font-weight: 600;
color: var(--accent);
background: rgba(var(--accent-rgb),0.07);
border: 1px solid rgba(var(--accent-rgb),0.18);
border-radius: 20px; padding: 3px 10px;
white-space: nowrap;
}
.chat-row { display: flex; gap: 10px; max-width: 88%; }
.chat-row.ai { align-self: flex-start; }
.chat-row.human { align-self: flex-end; flex-direction: row-reverse; }
.chat-ava {
width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 0.582rem; font-weight: 700;
}
.chat-ava.ai { background: var(--accent); color: #fff; }
.chat-ava.human { background: var(--ic-1); color: #fff; }
.chat-text {
padding: 10px 14px; border-radius: 14px;
font-size: 0.795rem; line-height: 1.55;
}
.ai .chat-text {
background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.18);
color: var(--text-1); border-bottom-left-radius: 4px;
}
.human .chat-text {
background: rgba(var(--ic1-rgb),0.12); border: 1px solid rgba(var(--ic1-rgb),0.18);
color: var(--text-1); border-bottom-right-radius: 4px;
}
.typing-indicator { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing-indicator span {
width: 5px; height: 5px; border-radius: 50%;
background: var(--accent); opacity: 0.4;
animation: typeBounce 1.4s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typeBounce {
0%,60%,100% { opacity: 0.3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-5px); }
}
.testimonials { position: relative; z-index: 1; padding: 140px 0; background: var(--bg-1); }
.testimonials-header { text-align: center; margin-bottom: 64px; }
.testimonials-header .section-desc { margin: 0 auto; }
.t-card {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: 16px; padding: 32px; backdrop-filter: blur(8px);
transition: all 0.35s;
}
.t-card:hover {
border-color: rgba(var(--accent-rgb),0.15);
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(var(--shadow-rgb),0.3);
}
.t-card blockquote {
font-size: 0.795rem; color: rgba(var(--fg-rgb),0.7); line-height: 1.7;
margin-bottom: 24px; font-style: normal;
}
.pricing { position: relative; z-index: 1; padding: 140px 0; background: var(--bg-1); }
.pricing-header .section-desc { margin: 0 auto; }
.p-card {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: 20px; padding: 40px 32px;
backdrop-filter: blur(8px); transition: all 0.35s;
position: relative;
}
.p-card.featured {
border-color: rgba(var(--accent-rgb),0.3);
box-shadow: 0 0 60px rgba(var(--glow-rgb),0.08), 0 20px 60px rgba(var(--shadow-rgb),0.3);
}
.p-card:hover { transform: translateY(-4px); }
.p-card .btn { width: 100%; }
.faq { position: relative; z-index: 1; padding: 140px 0; background: var(--bg-1); }
.faq-header { text-align: center; margin-bottom: 64px; }
.faq-header .section-desc { margin: 0 auto; }
.faq-list { max-width: 740px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
width: 100%; background: none; border: none; padding: 24px 0;
display: flex; justify-content: space-between; align-items: center;
cursor: pointer; text-align: left;
font-size: 0.989rem; font-weight: 600; color: var(--text-1);
transition: color 0.2s;
}
.faq-q:hover { color: var(--accent-light); }
.faq-q svg { flex-shrink: 0; margin-left: 16px; transition: transform 0.35s, color 0.2s; color: var(--text-3); }
.faq-item.open .faq-q svg { transform: rotate(45deg); color: var(--accent); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s; }
.faq-item.open .faq-a { max-height: 1400px; padding-bottom: 24px; }
.faq-group { display:flex; align-items:center; gap:12px; margin:44px 0 2px;
font-size:0.70rem; font-weight:800; letter-spacing:0.14em;
text-transform:uppercase; color:var(--accent); }
.faq-group:first-child { margin-top:0; }
.faq-group::after { content:''; flex:1 1 auto; height:1px;
background:linear-gradient(90deg, rgba(var(--accent-rgb),0.30), transparent); }
.faq-a p { font-size: 0.912rem; color: var(--text-3); line-height: 1.75; }
.cta-section {
position: relative; z-index: 1; padding: 140px 0; text-align: center;
overflow: hidden;
}
.cta-glow {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
width: min(700px, 92vw); height: 700px; border-radius: 50%;
background: radial-gradient(circle, rgba(var(--accent-rgb),0.1), transparent 60%);
pointer-events: none;
}
.cta-section .container { position: relative; z-index: 1; }
.cta-section .section-title { max-width: 700px; margin: 0 auto 16px; }
.cta-section .section-desc { margin: 0 auto 44px; text-align: center; }
.cta-buttons { display: flex; gap: 14px; justify-content: center; }
.footer { position: relative; z-index: 1; padding: 60px 0 28px; border-top: 1px solid var(--border); }
.footer-grid {
display: grid; grid-template-columns: 2fr 1fr 1fr;
gap: 48px; margin-bottom: 48px;
}
.footer-brand p { font-size: 0.854rem; color: var(--text-3); line-height: 1.6; max-width: 280px; margin-top: 14px; }
.footer-col h4, .footer-col h3 {
font-size: 0.757rem; font-weight: 700; color: var(--text-2);
text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px;
}
.footer-col a {
display: block; font-size: 0.854rem; color: var(--text-3);
padding: 3px 0; transition: color 0.2s;
}
.footer-col a:hover { color: var(--accent-light); }
.footer-bottom {
display: flex; justify-content: space-between; align-items: center;
padding-top: 24px; border-top: 1px solid var(--border);
}
.footer-bottom p { font-size: 0.757rem; color: var(--text-3); }
.border-travel {
position: relative; z-index: 0; isolation: isolate;
border: none !important;
}
.border-travel::before {
content: ''; position: absolute; inset: -1px;
border-radius: inherit;
background: conic-gradient(from var(--border-angle, 0deg), transparent 65%, rgba(var(--accent-rgb),0.5) 78%, var(--accent-light) 88%, rgba(var(--accent-rgb),0.5) 92%, transparent 100%);
animation: border-rotate 3s linear infinite;
z-index: -2;
}
.border-travel::after {
content: ''; position: absolute;
inset: 1px; border-radius: inherit;
background: rgba(var(--surface0-rgb),0.97);
z-index: -1;
}
@property --border-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
@keyframes border-rotate {
to { --border-angle: 360deg; }
}
@supports not (background: conic-gradient(from 0deg, red, blue)) {
.border-travel::before {
background: linear-gradient(90deg, transparent, var(--accent), transparent);
animation: border-slide 2s linear infinite;
}
}
@keyframes border-slide {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.screen-border-travel {
position: relative; isolation: isolate;
}
.screen-border-travel::before {
content: ''; position: absolute; inset: -2px;
border-radius: 18px; z-index: -2;
background: conic-gradient(from var(--border-angle, 0deg), transparent 45%, rgba(var(--accent-rgb),0.5) 65%, var(--accent-light) 78%, rgba(var(--accent-rgb),0.5) 90%, transparent 100%);
animation: border-rotate 4s linear infinite;
filter: blur(0.5px);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 85%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 85%, transparent 100%);
}
.screen-border-travel::after {
content: ''; position: absolute; inset: 1px;
border-radius: 15px;
background: linear-gradient(180deg, var(--surface-1), var(--surface-0));
z-index: -1;
}
.comparison {
position: relative; z-index: 1; padding: 140px 0;
background: linear-gradient(180deg, var(--bg-1) 0%, rgba(var(--accent-rgb),0.02) 50%, var(--bg-1) 100%);
}
.comparison-header { text-align: center; margin-bottom: 64px; }
.comparison-header h2 {
font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
color: var(--text-1); letter-spacing: -0.03em; margin-bottom: 12px;
}
.comparison-header p { color: var(--text-3); font-size: 1.018rem; max-width: 580px; margin: 0 auto; line-height: 1.7; }
.comparison-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
max-width: 960px; margin: 0 auto;
}
.comp-card {
background: rgba(var(--fg-rgb),0.05); border-radius: 20px;
border: 1px solid rgba(var(--fg-rgb),0.08); padding: 36px 28px;
position: relative; overflow: hidden; isolation: isolate;
}
.comp-card.old {
border-color: rgba(var(--danger-rgb),0.15);
}
.comp-card.old::before {
content: ''; position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
width: 70%; height: 80px; z-index: -1;
background: radial-gradient(ellipse at top, rgba(var(--danger-rgb),0.18) 0%, rgba(var(--danger-rgb),0.06) 40%, transparent 70%);
animation: red-drip-pulse 4s ease-in-out infinite;
pointer-events: none;
}
.comp-card.old::after {
content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
background: linear-gradient(90deg, transparent, rgba(var(--danger-rgb),0.5), rgba(var(--danger-rgb),0.7), rgba(var(--danger-rgb),0.5), transparent);
border-radius: 0 0 4px 4px; z-index: 1;
animation: red-line-flicker 3s ease-in-out infinite;
}
@keyframes red-drip-pulse {
0%, 100% { opacity: 0.6; height: 80px; }
50% { opacity: 1; height: 110px; }
}
@keyframes red-line-flicker {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
.comp-card.agent {
border-color: rgba(var(--accent-rgb),0.2);
box-shadow: 0 8px 40px rgba(var(--glow-rgb),0.06);
}
.comp-card.agent .comp-glow-line {
position: absolute; bottom: 0; left: 10%; right: 10%; height: 2px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.4), var(--accent-light), rgba(var(--accent-rgb),0.4), transparent);
border-radius: 4px 4px 0 0; z-index: 1; pointer-events: none;
animation: green-line-pulse 3s ease-in-out infinite;
}
@keyframes green-line-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
.comp-card.agent::before {
content: ''; position: absolute; inset: -1px;
border-radius: 21px; z-index: -2;
background: conic-gradient(from var(--border-angle, 0deg), transparent 55%, rgba(var(--accent-rgb),0.3) 75%, var(--accent) 85%, rgba(var(--accent-rgb),0.3) 95%, transparent 100%);
animation: border-rotate 4s linear infinite;
}
.comp-card.agent::after {
content: ''; position: absolute; inset: 1px;
border-radius: 19px; background: #FFFFFF; z-index: -1;
}
[data-theme="dark"] .comp-card.agent::after { background: rgba(var(--surface0-rgb),0.97); }
.comp-card-title {
display: flex; align-items: center; gap: 10px;
font-size: 1.018rem; font-weight: 700; color: var(--text-1);
margin-bottom: 24px; padding-bottom: 16px;
border-bottom: 1px solid rgba(var(--fg-rgb),0.06);
}
.comp-card.agent .comp-card-title { border-bottom-color: rgba(var(--accent-rgb),0.15); }
.comp-card-title .comp-icon {
width: 32px; height: 32px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
}
.comp-card.old .comp-icon { background: rgba(var(--danger-rgb),0.12); color: var(--danger); }
.comp-card.agent .comp-icon { background: rgba(var(--accent-rgb),0.12); color: var(--accent); }
.comp-step {
display: flex; align-items: center; gap: 12px;
padding: 14px 46px 14px 16px; border-radius: 12px; margin-bottom: 8px;
position: relative; overflow: hidden;
min-height: 86px;
}
.comp-card.old .comp-step {
background: rgba(var(--danger-rgb),0.05); color: var(--danger); border: 1px solid rgba(var(--danger-rgb),0.1);
opacity: 1;
}
.comp-card.old .comp-step:last-child { background: rgba(var(--danger-rgb),0.08); border-color: rgba(var(--danger-rgb),0.18); }
.comp-card.agent .comp-step {
background: rgba(var(--accent-rgb),0.04); border: 1px solid rgba(var(--accent-rgb),0.08);
opacity: 0; transform: translateY(8px);
transition: opacity 0.4s, transform 0.4s;
}
.comp-card.agent .comp-step.step-show { opacity: 1; transform: translateY(0); }
.comp-card.agent .comp-step:last-child { border-color: rgba(var(--success-rgb),0.5); }
.comp-card.agent .comp-step.sig-handled { border-color: rgba(var(--success-rgb),0.34) !important; background: rgba(var(--success-rgb),0.08) !important; }
.comp-card.agent .comp-step.sig-won { border-color: rgba(var(--success-rgb),0.60) !important; background: rgba(var(--success-rgb),0.16) !important; }
.comp-step.pastel-layer {
position: relative;
}
.comp-step.pastel-layer::before {
content: ''; position: absolute; inset: 3px; border-radius: 9px;
pointer-events: none; z-index: 0;
}
.comp-step.pastel-layer.pastel-green-light::before {
background: linear-gradient(135deg, rgba(var(--success-rgb),0.10), rgba(var(--success-rgb),0.05));
border: 1px solid rgba(var(--success-rgb),0.16);
}
.comp-step.pastel-layer.pastel-green-strong::before {
background: linear-gradient(135deg, rgba(var(--success-rgb),0.16), rgba(var(--success-rgb),0.08));
border: 1px solid rgba(var(--success-rgb),0.30);
}
.comp-step-tick {
position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
width: 20px; height: 20px; border-radius: 50%;
background: rgba(var(--accent-rgb),0.15); display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity 0.3s;
}
.comp-step-tick.tick-show { opacity: 1; }
.comp-step-tick svg { width: 12px; height: 12px; color: var(--accent-light); }
.comp-card.agent .comp-step.sig-handled .comp-step-tick svg { color: var(--success-light); }
.comp-card.agent .comp-step.sig-won .comp-step-tick svg { color: var(--success); }
.comp-card.agent .comp-step.sig-handled .comp-step-flash,
.comp-card.agent .comp-step.sig-won .comp-step-flash { background: rgba(var(--success-rgb),0.10); }
.comp-step-flash {
position: absolute; inset: 0; background: rgba(var(--accent-rgb),0.08);
opacity: 0; border-radius: inherit;
pointer-events: none;
}
.comp-step-flash.flash-show {
animation: step-flash 0.6s ease-out;
}
@keyframes step-flash {
0% { opacity: 0.6; } 100% { opacity: 0; }
}
.comp-step-icon {
width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.comp-card.old .comp-step-icon { background: rgba(var(--danger-rgb),0.1); color: var(--danger); }
.comp-card.agent .comp-step-icon { background: rgba(var(--accent-rgb),0.12); color: var(--accent); }
.comp-card.old .comp-step.sig-neutral .comp-step-icon { background: rgba(var(--fg-rgb),0.07); color: var(--text-3); }
.comp-card.old .comp-step.sig-attention .comp-step-icon { background: rgba(var(--warn-rgb),0.16); color: var(--warning); }
.comp-card.old .comp-step.sig-bad .comp-step-icon { background: rgba(var(--danger-rgb),0.16); color: var(--danger); }
.comp-card.old .comp-step.sig-worst .comp-step-icon { background: rgba(var(--danger-rgb),0.26); color: var(--danger); box-shadow: inset 0 0 0 1px rgba(var(--danger-rgb),0.42); }
.comp-card.old .comp-step.sig-neutral .comp-step-title { color: var(--text-2); }
.comp-card.old .comp-step.sig-attention .comp-step-title { color: var(--warning); }
.comp-card.old .comp-step.sig-bad .comp-step-title,
.comp-card.old .comp-step.sig-worst .comp-step-title { color: var(--danger-tx); }
.comp-card.old .comp-step.sig-neutral .comp-step-desc { color: var(--neutral-tx); }
.comp-card.agent .comp-step.sig-discovery .comp-step-icon { background: rgba(var(--st-slate-rgb),0.18); color: var(--st-slate); }
.comp-card.agent .comp-step.sig-discovery .comp-step-tick { background: rgba(var(--st-slate-rgb),0.15); }
.comp-card.agent .comp-step.sig-discovery .comp-step-tick svg { color: var(--st-slate); }
.comp-card.agent .comp-step.sig-action .comp-step-tick { background: rgba(var(--accent-rgb),0.15); }
.comp-card.agent .comp-step.sig-action .comp-step-tick svg { color: var(--accent); }
.comp-card.agent .comp-step.sig-incoming .comp-step-tick { background: rgba(var(--ic1-rgb),0.15); }
.comp-card.agent .comp-step.sig-incoming .comp-step-tick svg { color: var(--ic-1); }
.comp-card.agent .comp-step.sig-handled .comp-step-tick { background: rgba(var(--success-rgb),0.15); }
.comp-card.agent .comp-step.sig-won .comp-step-tick { background: rgba(var(--success-rgb),0.20); }
.comp-card.agent .comp-step.sig-action .comp-step-icon { background: rgba(var(--accent-rgb),0.18); color: var(--accent); }
.comp-card.agent .comp-step.sig-incoming .comp-step-icon { background: rgba(var(--ic2-rgb),0.18); color: var(--ic-2); }
.comp-card.agent .comp-step.sig-handled .comp-step-icon { background: rgba(var(--success-rgb),0.16); color: var(--success-light); box-shadow: inset 0 0 0 1px rgba(var(--success-rgb),0.28); }
.comp-card.agent .comp-step.sig-won .comp-step-icon { background: rgba(var(--success-rgb),0.30); color: var(--success); box-shadow: inset 0 0 0 1px rgba(var(--success-rgb),0.5); }
.comp-card.agent .comp-step.sig-handled .comp-step-title { color: var(--success-light); }
.comp-card.agent .comp-step.sig-won .comp-step-title { color: var(--success); }
.comp-step-content { flex: 1; min-width: 0; }
.comp-step-title { font-family: 'Inter', sans-serif; font-size: 0.825rem; font-weight: 600; color: var(--text-1); margin-bottom: 2px; }
.comp-card.old .comp-step-title { color: var(--danger-tx); }
.comp-step-desc { font-size: 0.718rem; color: var(--text-3); line-height: 1.45; }
.comp-card.agent .comp-step-desc { color: var(--neutral-tx); }
.comp-card.old .comp-step-desc { color: var(--danger-tx); }
.comp-cta { text-align: center; margin-top: 48px; }
@media (max-width: 768px) {
.comparison-grid { grid-template-columns: 1fr; }
.comparison { padding: 80px 0; }
}
.btn-glass {
background: rgba(var(--accent-rgb),0.08);
border: 1px solid rgba(var(--accent-rgb),0.25);
backdrop-filter: blur(16px) saturate(1.4);
color: var(--accent-light);
position: relative; overflow: hidden;
}
.btn-glass::before {
content: ''; position: absolute;
top: -50%; left: -50%; width: 200%; height: 200%;
background: linear-gradient(135deg, transparent 40%, rgba(var(--fg-rgb),0.06) 50%, transparent 60%);
animation: glass-shine 4s ease-in-out infinite;
}
@keyframes glass-shine {
0% { transform: translateX(-100%) translateY(-100%) rotate(35deg); }
50% { transform: translateX(100%) translateY(100%) rotate(35deg); }
100% { transform: translateX(100%) translateY(100%) rotate(35deg); }
}
.btn-glass:hover {
background: rgba(var(--accent-rgb),0.15);
border-color: rgba(var(--accent-rgb),0.4);
box-shadow: 0 0 30px rgba(var(--glow-rgb),0.15), inset 0 1px 0 rgba(var(--fg-rgb),0.06);
transform: translateY(-2px);
}
.btn-primary {
position: relative; overflow: hidden;
}
.btn-primary::after {
content: ''; position: absolute;
top: 0; left: -100%; width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(var(--fg-rgb),0.12), transparent);
animation: btn-shine 3s ease-in-out infinite;
}
@keyframes btn-shine {
0% { left: -100%; }
50% { left: 150%; }
100% { left: 150%; }
}
.shimmer-text {
background: linear-gradient(120deg, var(--text-1) 0%, var(--text-1) 18%, var(--head-grad-end) 38%, var(--head-grad-end) 50%, var(--head-grad-end) 62%, var(--text-1) 82%, var(--text-1) 100%);
background-size: 200% auto;
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text; color: transparent;
animation: brand-flow 7s linear infinite;
filter: drop-shadow(0 2px 20px rgba(var(--glow-rgb),0.30));
}
@keyframes brand-flow {
from { background-position: 0% center; }
to { background-position: 200% center; }
}
h1.shimmer-text {
animation-duration: 9s;
filter: drop-shadow(0 3px 28px rgba(var(--glow-rgb),0.34));
}
@media (prefers-reduced-motion: reduce) {
}
.flow-text h3 {
color: var(--text-1);
}
@keyframes blink-cursor {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.pastel-tag {
display: inline-block; padding: 2px 8px; border-radius: 6px;
font-size: 0.63rem; font-weight:500; letter-spacing: 0.03em;
}
.pastel-tag.ai-gen { background: rgba(var(--accent-rgb),0.18); color: var(--accent); border: 1px solid rgba(var(--accent-rgb),0.32); font-weight:700; }
.pastel-tag.research { background: rgba(var(--ic2-rgb),0.12); color: var(--ic-2); border: 1px solid rgba(var(--ic2-rgb),0.15); }
.pastel-tag.personalized { background: rgba(var(--warn-rgb),0.12); color: var(--warning); border: 1px solid rgba(var(--warn-rgb),0.15); }
.pastel-tag.intent { background: rgba(var(--ic1-rgb),0.12); color: var(--ic-1); border: 1px solid rgba(var(--ic1-rgb),0.15); }
.pastel-tag.booked { background: rgba(var(--success-rgb),0.15); color: var(--success); border: 1px solid rgba(var(--success-rgb),0.28); }
.glass-card {
background: rgba(var(--surface2-rgb),0.6);
border: 1px solid rgba(var(--fg-rgb),0.08);
backdrop-filter: blur(20px) saturate(1.3);
box-shadow: 0 20px 60px rgba(var(--shadow-rgb),0.4), 0 0 40px rgba(var(--glow-rgb),0.04),
inset 0 1px 0 rgba(var(--fg-rgb),0.04);
}
.hero-video-wrap {
max-width: 900px; margin: 48px auto 60px;
border-radius: 16px; overflow: hidden;
border: 1px solid rgba(var(--fg-rgb),0.08);
box-shadow: 0 20px 60px rgba(var(--shadow-rgb),0.5), 0 0 80px rgba(var(--glow-rgb),0.06);
position: relative;
background: var(--bg-2);
aspect-ratio: 16/9;
}
.hero-video-wrap video,
.hero-video-wrap iframe {
width: 100%; height: 100%; display: block;
position: absolute; inset: 0;
object-fit: cover; border: none;
}
.hero-video-wrap .video-overlay {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.30) 16%, transparent 38%),
linear-gradient(180deg, transparent 62%, rgba(0,0,0,0.30) 84%, rgba(0,0,0,0.78) 100%);
pointer-events: none; z-index: 2;
}
.video-placeholder {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
background:
radial-gradient(ellipse 70% 60% at 50% 42%, rgba(253,141,104,0.16), transparent 70%),
linear-gradient(135deg, rgba(253,141,104,0.10), rgba(253,141,104,0.03)),
#211713;
z-index: 1; cursor: pointer;
transition: all 0.3s;
}
.video-placeholder::before { background-image:
linear-gradient(rgba(247,241,236,0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(247,241,236,0.055) 1px, transparent 1px); }
.video-placeholder:hover { background:
radial-gradient(ellipse 70% 60% at 50% 42%, rgba(253,141,104,0.22), transparent 70%),
linear-gradient(135deg, rgba(253,141,104,0.14), rgba(253,141,104,0.05)),
#241A15; }
.video-placeholder::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(247,241,236,0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(247,241,236,0.055) 1px, transparent 1px);
background-size: 72px 72px;
-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 35%, transparent 78%);
mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 35%, transparent 78%);
}
.video-placeholder > * { position: relative; z-index: 1; }
.video-placeholder .vp-poster {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%; object-fit: cover; display: block;
filter: brightness(0.82) saturate(0.95);
}
.video-placeholder:has(.vp-poster)::before { opacity: 0; }
.video-placeholder:has(.vp-poster) p { text-shadow: 0 1px 6px rgba(0,0,0,0.55); color: #fff; }
.video-placeholder:hover .play-btn { transform: scale(1.1); box-shadow: 0 0 40px rgba(var(--glow-rgb),0.3); }
.play-btn {
position: relative;
width: 84px; height: 84px; border-radius: 50%;
background: rgba(var(--accent-rgb),0.92);
border: 2px solid rgba(255,255,255,0.28);
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px; transition: all 0.3s;
box-shadow: 0 10px 30px rgba(var(--shadow-rgb),0.20), 0 0 44px rgba(var(--glow-rgb),0.22);
}
.play-btn svg path { fill: var(--on-accent); }
.play-btn svg { margin-left: 3px; }
@media (max-width: 768px) {
.play-btn { width: 60px; height: 60px; margin-bottom: 12px; border-width: 1.5px; }
.play-btn svg { width: 21px; height: 21px; margin-left: 2px; }
}
@media (max-width: 480px) {
.play-btn { width: 50px; height: 50px; margin-bottom: 9px; }
.play-btn svg { width: 18px; height: 18px; }
}
.video-placeholder p {
font-size: 0.95rem; color: #F7F1EC; font-weight: 700;
letter-spacing: -0.01em; margin: 0;
}
@media (max-width: 768px) { .video-placeholder p { font-size: 0.84rem; } }
@media (max-width: 480px) { .video-placeholder p { font-size: 0.78rem; } }
.play-btn::after {
content: ''; position: absolute; inset: -2px;
border-radius: 50%;
border: 1px solid rgba(var(--accent-rgb),0.45);
animation: play-ring 2.5s ease-out infinite;
}
@keyframes play-ring {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(1.6); opacity: 0; }
}
.how-steps-flow {
position: absolute; top: 36px; left: 12.5%; right: 12.5%;
height: 2px; overflow: hidden;
}
.how-steps-flow .flow-line-bg {
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.2) 20%, rgba(var(--accent-rgb),0.2) 80%, transparent);
}
.how-steps-flow .flow-particle {
position: absolute; top: -2px; left: 0;
width: 30px; height: 6px; border-radius: 3px;
background: linear-gradient(90deg, transparent, var(--accent-light), transparent);
box-shadow: 0 0 12px var(--accent);
animation: how-flow-move 3s ease-in-out infinite;
}
.how-steps-flow .flow-particle:nth-child(2) { animation-delay: 1.5s; }
@keyframes how-flow-move {
0% { left: -30px; opacity: 0; }
5% { opacity: 1; }
95% { opacity: 1; }
100% { left: calc(100% + 30px); opacity: 0; }
}
@keyframes float-y {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.hero-notif { animation: float-in 0.8s 1.5s cubic-bezier(0.16,1,0.3,1) both, float-y 4s 2.3s ease-in-out infinite; }
.hero-notif-left { animation: float-in 0.8s 2s cubic-bezier(0.16,1,0.3,1) both, float-y 4.5s 2.8s ease-in-out infinite; }
@keyframes cta-glow-pulse {
0%, 100% { box-shadow: 0 0 20px rgba(var(--glow-rgb),0.25), 0 4px 16px rgba(var(--shadow-rgb),0.4); }
50% { box-shadow: 0 0 40px rgba(var(--glow-rgb),0.4), 0 4px 24px rgba(var(--shadow-rgb),0.5), 0 0 60px rgba(var(--glow-rgb),0.15); }
}
.hero-buttons .btn-primary, .cta-buttons .btn-primary {
animation: cta-glow-pulse 3s ease-in-out infinite;
}
.hero-buttons .btn-primary:hover, .cta-buttons .btn-primary:hover {
animation: none;
}
.p-card::after {
content: ''; position: absolute; inset: -1px; border-radius: 20px;
background: linear-gradient(135deg, rgba(var(--accent-rgb),0), rgba(var(--accent-rgb),0.1), rgba(var(--accent-rgb),0));
background-size: 300% 300%; opacity: 0;
transition: opacity 0.4s; z-index: -1;
animation: gradient-shift 4s ease infinite;
}
@keyframes gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.p-card:hover::after { opacity: 1; }
.p-card.featured {
overflow: visible; isolation: isolate;
border: none !important;
}
.p-card.featured::before {
content: 'Most Popular'; position: absolute; top: -13px;
left: 50%; transform: translateX(-50%);
background: linear-gradient(135deg, var(--fill-2), var(--fill-1));
color: var(--on-accent); padding: 5px 22px; border-radius: 100px;
font-size: 0.679rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.06em; z-index: 5;
}
.p-card.featured::after {
content: ''; position: absolute; inset: -1px;
border-radius: 21px; z-index: -2;
background: conic-gradient(from var(--border-angle, 0deg), transparent 60%, rgba(var(--accent-rgb),0.35) 75%, var(--accent-light) 85%, rgba(var(--accent-rgb),0.35) 95%, transparent 100%);
animation: border-rotate 4s linear infinite;
}
.p-card.featured .p-card-bg-fill {
position: absolute; inset: 1px; border-radius: 19px;
background: var(--bg-card); z-index: -1;
backdrop-filter: blur(8px);
}
.t-card::before {
content: ''; position: absolute; inset: 0; border-radius: 16px;
background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb),0.06), transparent 60%);
opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.t-card { position: relative; overflow: hidden; }
.t-card:hover::before { opacity: 1; }
.cta-section .section-title {
background: linear-gradient(120deg, var(--text-1) 0%, var(--text-1) 18%, var(--head-grad-end) 38%, var(--head-grad-end) 50%, var(--head-grad-end) 62%, var(--text-1) 82%, var(--text-1) 100%);
background-size: 200% auto;
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text; color: transparent;
animation: brand-flow 8s linear infinite;
}
.flow-module-wrap {
transition: transform 0.4s ease;
}
.step-circle::after {
content: ''; position: absolute; inset: -8px; border-radius: 50%;
border: 1px solid rgba(var(--accent-rgb),0.1);
animation: ring-pulse 3s ease-in-out infinite;
}
.how-step:nth-child(2) .step-circle::after { animation-delay: 0.4s; }
.how-step:nth-child(3) .step-circle::after { animation-delay: 0.8s; }
.how-step:nth-child(4) .step-circle::after { animation-delay: 1.2s; }
@keyframes ring-pulse {
0%, 100% { transform: scale(1); opacity: 0.3; }
50% { transform: scale(1.15); opacity: 0.8; border-color: rgba(var(--accent-rgb),0.25); }
}
.stat-num {
color: var(--text-1);
}
.reveal {
transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.js-on .reveal { opacity: 0; transform: translateY(40px); }
.js-on .reveal.vis { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }
@media (max-width: 1024px) {
.how-steps { grid-template-columns: repeat(2, 1fr); gap: 40px; }
.how-steps::before { display: none; }
.how-steps-flow { display: none; }
.how-step { position: relative; }
.footer-grid { grid-template-columns: 1fr 1fr !important; }
.dash-grid { grid-template-columns: 1fr; }
.dash-sidebar { display: none; }
.hero-notif, .hero-notif-left { display: none; }
.showcase-grid { gap: 48px; }
.sc-chat-header > div:last-child { display: none; }
}
@media (max-width: 768px) {
.nav-links { display: none; }
.mobile-menu-btn { display: block; }
.nav-links.active {
display: flex; flex-direction: column; gap: 0;
position: absolute; top: 100%; left: 0; width: 100%;
background: rgba(var(--surface0-rgb),0.96); backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border); padding: 16px 24px;
}
.nav-links.active a { padding: 12px 0; font-size: 0.97rem; }
.nav-links.active .nav-cta { padding-top: 12px; }
.nav-links.active .nav-cta .btn { width: 100%; text-align: center; }
.hero { padding: 104px 0 60px; }
.hero h1 { font-size: 2.4rem; }
.hero-desc { font-size: 0.912rem; }
.hero-buttons { flex-direction: column; align-items: center; }
.hero-buttons .btn { width: 100%; max-width: 340px; }
.hero-video-wrap { margin: 32px auto 40px; border-radius: 12px; }
.hero-flow { margin-bottom: 40px; }
.hf-desc p { font-size: 0.795rem; }
.hero-screen { border-radius: 12px; }
.hero-screen-wrapper { margin: 0 -8px; }
.dash { padding: 16px; }
.dash-grid { min-height: 320px; }
.dash-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dash-stat-card { padding: 10px 8px; }
.dash-stat-label { font-size: 0.563rem; }
.dash-stat-value { font-size: 1.2rem; }
.dash-stat-value .up { font-size: 0.582rem; margin-left: 3px; }
.convo-row { padding: 7px 0; gap: 8px; }
.convo-name { font-size: 0.66rem; }
.convo-msg { font-size: 0.582rem; }
.convo-status { font-size: 0.533rem; padding: 2px 7px; }
.convo-avatar { width: 26px; height: 26px; font-size: 0.582rem; }
.browser-url { margin: 0 12px 0 10px; font-size: 0.582rem; padding: 5px 10px; }
.browser-bar { padding: 8px 12px; }
.browser-dots span { width: 8px; height: 8px; }
.lead-search-main { padding: 6px 10px 10px; }
.lead-search-title { font-size: 0.873rem; }
.lead-search-sub { font-size: 0.601rem; }
.lead-tab { padding: 5px 10px; font-size: 0.621rem; }
.lead-search-box { padding: 8px 10px; }
.lead-search-input { font-size: 0.679rem; min-height: 24px; }
.lead-search-dropdown { padding: 7px 10px; font-size: 0.64rem; }
.lead-search-dropdown .label { font-size: 0.563rem; }
.lead-search-submit { width: 34px; height: 34px; }
.lead-results { padding: 6px 10px; max-height: 120px; }
.lead-result-row { gap: 8px; padding: 5px 0; }
.lr-avatar { width: 22px; height: 22px; font-size: 0.5rem; }
.lr-name { font-size: 0.63rem; }
.lr-role { font-size: 0.533rem; }
.lr-badge { font-size: 0.5rem; padding: 2px 5px; }
.convo-detail { grid-template-columns: 1fr; min-height: auto; }
.cd-profile { display: none; }
.cd-chat { padding: 10px; gap: 6px; }
.cd-bubble { font-size: 0.63rem; max-width: 90%; padding: 7px 10px; }
.cd-bubble-row { gap: 6px; }
.cd-ava { width: 20px; height: 20px; }
.cd-chat-title { font-size: 0.582rem; }
.cd-time { font-size: 0.48rem; padding: 0 26px; }
.pastel-tag { font-size: 0.5rem !important; padding: 1px 5px; }
.agent-select-main { padding: 2px 2px 0; }
.ca-card-grid { gap: 8px; }
.ca-card { padding: 14px 10px 12px; border-radius: 10px; }
.ca-icon { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 8px; }
.ca-icon svg { width: 24px; height: 24px; }
.ca-reco-badge { font-size: 0.44rem; padding: 2px 6px; top: 6px; right: 6px; }
.ca-card-title { font-size: 0.698rem; margin-bottom: 4px; }
.ca-card-desc { font-size: 0.543rem; max-width: none; margin-bottom: 8px; }
.ca-feat { font-size: 0.48rem; padding: 2px 5px; }
.ca-card-cta { font-size: 0.563rem; padding: 6px 12px; }
.ca-steps-bar { gap: 4px; flex-wrap: wrap; }
.ca-step-card { padding: 6px 4px; border-radius: 7px; min-width: 0; }
.ca-step-card-icon { width: 22px; height: 22px; border-radius: 6px; margin-bottom: 3px; }
.ca-step-card-icon svg { width: 11px; height: 11px; }
.ca-step-card-name { font-size: 0.48rem; }
.ca-header { padding: 10px 12px; margin-bottom: 10px; }
.ca-header-text .ca-title { font-size: 0.825rem; }
.ca-header-text .ca-sub { font-size: 0.582rem; }
.ca-back { width: 22px; height: 22px; }
.ca-form { gap: 8px; }
.ca-label { font-size: 0.563rem; margin-bottom: 3px; }
.ca-input { padding: 8px 10px; font-size: 0.63rem; }
.ca-placeholder { font-size: 0.63rem; }
.ca-typed-text { font-size: 0.63rem; }
.ca-cta-row { gap: 4px; }
.ca-cta-opt { padding: 7px 3px; font-size: 0.533rem; border-radius: 8px; }
.ca-cta-opt svg { width: 13px; height: 13px; }
.ca-btn-cancel { font-size: 0.601rem; padding: 6px 14px; }
.ca-btn-create { font-size: 0.601rem; padding: 6px 16px; }
.meeting-view { padding: 16px 10px; }
.meeting-view h3, .meeting-view .mockh-a { font-size: 0.921rem; }
.meeting-view .mv-sub { font-size: 0.737rem; margin-bottom: 18px; }
.meeting-check { width: 56px; height: 56px; }
.meeting-check svg { width: 22px; height: 22px; }
.mv-card { padding: 12px; }
.mv-card-row { gap: 8px; margin-bottom: 8px; }
.mv-card-row .mv-label { font-size: 0.582rem; min-width: 50px; }
.mv-card-row .mv-val { font-size: 0.698rem; }
.mv-card-row .mv-val img { width: 22px; height: 22px; }
.ca-success-title { font-size: 0.97rem; }
.ca-success-desc { font-size: 0.63rem; }
.ca-step-pill { font-size: 0.563rem; padding: 5px 10px; }
.screen-hint { font-size: 0.582rem; padding: 5px 10px; bottom: 8px; }
.screen-dots { margin-top: 24px; gap: 4px; margin-bottom: 22px; }
.screen-dots span { width: 7px; height: 7px; }
.screen-dots span.active { width: 20px; }
.stats-bar { padding: 40px 0; }
.stats-bar-inner { gap: 32px; }
.stat-num { font-size: 2.2rem; }
.stat-label { font-size: 0.728rem; }
.features { padding: 80px 0; }
.features-header { margin-bottom: 60px; }
.section-title { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.section-desc { font-size: 0.873rem; }
.showcase { padding: 80px 0; }
.showcase-grid { grid-template-columns: 1fr; gap: 40px; }
.sc-chat-body { padding: 14px; }
.chat-text { font-size: 0.757rem; padding: 8px 12px; }
.chat-row { max-width: 95%; }
.sc-chat-header { flex-wrap: wrap; gap: 6px; }
.sc-chat-header > div:last-child { display: none; }
.testimonials { padding: 80px 0; }
.t-card { padding: 24px; }
.t-card blockquote { font-size: 0.757rem; }
.how { padding: 80px 0; }
.how-steps { grid-template-columns: 1fr; gap: 48px; }
.how-steps-flow { display: none; }
.step-circle { width: 60px; height: 60px; }
.step-circle svg { width: 24px; height: 24px; }
.how-step { position: relative; padding-bottom: 0; }
.how-step::after {
content: '';
display: block; width: 2px; height: 32px;
margin: 16px auto 0;
background: linear-gradient(180deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.03));
border-radius: 2px; position: relative;
}
.how-step:last-child::after { display: none; }
.how-step::before {
content: '';
position: absolute; bottom: -16px;
left: 50%; margin-left: -3px;
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent-light);
box-shadow: 0 0 10px var(--accent), 0 0 4px var(--accent);
z-index: 5;
animation: how-step-drip-down 1.8s ease-in-out infinite;
}
.how-step:last-child::before { display: none; }
.how-step:nth-child(2)::before { animation-delay: 0.5s; }
.how-step:nth-child(3)::before { animation-delay: 1.0s; }
.pricing { padding: 80px 0; }
.p-card { padding: 28px 24px; }
.faq { padding: 80px 0; }
.faq-q { font-size: 0.892rem; padding: 20px 0; }
.faq-a p { font-size: 0.854rem; }
.cta-section { padding: 80px 0; }
.cta-buttons { flex-direction: column; align-items: center; }
.cta-buttons .btn { width: 100%; max-width: 340px; }
.footer-grid { grid-template-columns: 1fr !important; gap: 32px; }
.footer-brand p { max-width: 100%; }
.footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
.btn { padding: 16px 28px; font-size: 0.921rem; min-height: 48px; }
.btn-glass { padding: 14px 24px; }
.nav-cta .btn { min-height: auto; padding: 10px 22px; font-size: 0.815rem; }
}
@media (max-width: 480px) {
.container { padding: 0 16px; }
.hero { padding: 88px 0 48px; }
.hero h1 { font-size: 1.9rem; letter-spacing: -0.03em; }
.hero-desc { font-size: 0.873rem; line-height: 1.65; }
.badge { font-size: 0.72rem; padding: 5px 12px; }
.hero-flow { padding: 16px 0; }
.hf-node { width: 60px; }
.hf-node-circle { width: 48px; height: 48px; }
.hf-node-circle svg { width: 20px; height: 20px; }
.hf-node-label { font-size: 0.533rem; margin-top: 8px; }
.hf-desc p { font-size: 0.728rem; }
.browser-bar { padding: 6px 8px; gap: 6px; }
.browser-url { font-size: 0.52rem; margin: 0 4px; padding: 4px 8px; }
.browser-dots span { width: 7px; height: 7px; }
.dash { padding: 8px; }
.dash-grid { min-height: 260px; }
.dash-stats { grid-template-columns: repeat(3, 1fr); gap: 4px; }
.dash-stat-card { padding: 6px; }
.dash-stat-label { font-size: 0.5rem; }
.dash-stat-value { font-size: 0.97rem; }
.dash-stat-value .up { font-size: 0.5rem; }
.convo-row { gap: 6px; padding: 5px 0; }
.convo-avatar { width: 20px; height: 20px; font-size: 0.5rem; }
.convo-name { font-size: 0.563rem; }
.convo-msg { font-size: 0.5rem; }
.convo-status { font-size: 0.48rem; padding: 1px 5px; }
.lead-search-credit { padding: 4px 6px; font-size: 0.533rem; border-radius: 6px; }
.lead-search-main { padding: 4px 6px 6px; gap: 5px; }
.lead-search-title { font-size: 0.757rem; }
.lead-search-sub { font-size: 0.543rem; }
.lead-tab { padding: 4px 7px; font-size: 0.543rem; gap: 4px; }
.lead-search-box { padding: 6px 8px; border-radius: 8px; }
.lead-search-input { font-size: 0.601rem; }
.lead-search-controls { gap: 6px; }
.lead-search-dropdown { padding: 5px 8px; font-size: 0.563rem; border-radius: 7px; }
.lead-search-submit { width: 30px; height: 30px; }
.lead-results { padding: 4px 6px; max-height: 100px; border-radius: 7px; }
.lr-avatar { width: 18px; height: 18px; font-size: 0.42rem; }
.lr-name { font-size: 0.563rem; }
.lr-role { font-size: 0.48rem; }
.lr-badge { font-size: 0.44rem; padding: 1px 4px; }
.lead-results-header { font-size: 0.543rem; margin-bottom: 4px; padding-bottom: 4px; }
.cd-chat { padding: 6px; gap: 4px; }
.cd-bubble { font-size: 0.543rem; padding: 5px 8px; border-radius: 7px; }
.cd-ava { width: 16px; height: 16px; }
.cd-chat-title { font-size: 0.52rem; }
.cd-time { font-size: 0.42rem; padding: 0 20px; }
.cd-bubble .ai-tag { font-size: 0.44rem; padding: 0 4px; }
.ca-card-grid { gap: 6px; }
.ca-card { padding: 10px 6px 8px; border-radius: 8px; }
.ca-icon { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 6px; }
.ca-icon svg { width: 20px; height: 20px; }
.ca-reco-badge { font-size: 0.4rem; padding: 1px 4px; top: 4px; right: 4px; }
.ca-card-title { font-size: 0.601rem; }
.ca-card-desc { font-size: 0.48rem; max-width: none; margin-bottom: 5px; line-height: 1.4; }
.ca-feat { font-size: 0.42rem; padding: 1px 4px; gap: 2px; }
.ca-feat::before { width: 3px; height: 3px; }
.ca-card-cta { font-size: 0.5rem; padding: 4px 10px; }
.ca-card-cta svg { width: 8px; height: 8px; }
.ca-features { gap: 4px; margin-top: 6px; margin-bottom: 6px; }
.ca-steps-bar { gap: 3px; }
.ca-step-card { padding: 4px 2px; }
.ca-step-card-icon { width: 18px; height: 18px; border-radius: 5px; margin-bottom: 2px; }
.ca-step-card-icon svg { width: 9px; height: 9px; }
.ca-step-card-name { font-size: 0.42rem; }
.ca-header { padding: 8px 10px; margin-bottom: 6px; gap: 8px; border-radius: 8px; }
.ca-header-text .ca-title { font-size: 0.698rem; }
.ca-header-text .ca-sub { font-size: 0.52rem; }
.ca-back { width: 20px; height: 20px; border-radius: 6px; }
.ca-back svg { width: 10px; height: 10px; }
.ca-form { gap: 6px; }
.ca-label { font-size: 0.52rem; }
.ca-input { padding: 6px 8px; font-size: 0.563rem; border-radius: 6px; }
.ca-placeholder { font-size: 0.563rem; }
.ca-typed-text { font-size: 0.563rem; }
.ca-cta-opt { padding: 5px 2px; font-size: 0.48rem; gap: 2px; border-radius: 6px; }
.ca-cta-opt svg { width: 11px; height: 11px; }
.ca-btn-cancel { font-size: 0.533rem; padding: 5px 10px; border-radius: 6px; }
.ca-btn-create { font-size: 0.533rem; padding: 5px 12px; border-radius: 6px; }
.ca-form-actions { gap: 6px; }
.meeting-view { padding: 12px 8px; }
.meeting-view h3, .meeting-view .mockh-a { font-size: 0.825rem; }
.meeting-view .mv-sub { font-size: 0.66rem; margin-bottom: 14px; }
.meeting-check { width: 48px; height: 48px; }
.meeting-check svg { width: 20px; height: 20px; }
.mv-card { padding: 10px; border-radius: 8px; }
.mv-card-row { gap: 6px; margin-bottom: 6px; }
.mv-card-row .mv-label { font-size: 0.52rem; min-width: 44px; }
.mv-card-row .mv-val { font-size: 0.63rem; }
.mv-card-row .mv-val img { width: 18px; height: 18px; }
.ca-success-check svg { width: 32px; height: 32px; }
.ca-success-title { font-size: 0.854rem; }
.ca-success-desc { font-size: 0.563rem; max-width: 240px; }
.ca-step-pill { font-size: 0.5rem; padding: 4px 8px; }
.ca-success-steps { gap: 5px; margin-top: 6px; }
.screen-hint { font-size: 0.52rem; padding: 4px 8px; bottom: 6px; }
.screen-dots { margin-top: 20px; gap: 3px; margin-bottom: 18px; }
.screen-dots span { width: 6px; height: 6px; }
.screen-dots span.active { width: 16px; border-radius: 3px; }
.section-title { font-size: 1.6rem; }
.section-label { font-size: 0.66rem; }
.section-desc { font-size: 0.854rem; }
.stat-num { font-size: 1.8rem; }
.stat-label { font-size: 0.72rem; }
.stats-bar-inner { gap: 24px; }
.how-step h3 { font-size: 0.892rem; }
.how-step p { font-size: 0.795rem; }
.step-circle { width: 54px; height: 54px; margin-bottom: 18px; }
.sc-item p { font-size: 0.776rem; }
.chat-ava { width: 24px; height: 24px; }
.chat-text { font-size: 0.698rem; }
.t-card { padding: 20px; }
.t-card blockquote { font-size: 0.737rem; }
.faq-q { font-size: 0.854rem; }
.faq-a p { font-size: 0.795rem; }
.footer-col h4, .footer-col h3 { font-size: 0.698rem; }
.footer-col a { font-size: 0.795rem; }
.footer-bottom p { font-size: 0.72rem; }
}
.vd3-header {
display: flex; align-items: center; gap: 6px;
padding: 5px 8px;
background: rgba(107,92,231,0.1);
border: 1px solid rgba(107,92,231,0.2);
border-radius: 7px; flex-shrink: 0;
}
.vd3-flow-wrap { flex-shrink:0; }
.vd3-chip {
width: 32px; height: 32px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: 0.601rem; font-weight: 900; color: #fff;
box-shadow: 0 2px 10px rgba(var(--shadow-rgb),0.35);
}
.vd3-connector {
flex: 1; height: 2px; position: relative;
margin: 0 3px;
background: repeating-linear-gradient(90deg, rgba(var(--accent-rgb),0.4) 0px, rgba(var(--accent-rgb),0.4) 4px, transparent 4px, transparent 8px);
overflow: visible;
}
@keyframes dot-travel {
from { left: 0; opacity: 1; }
80% { opacity: 1; }
to { left: calc(100% - 6px); opacity: 0; }
}
.vd3-labels {
display: flex; justify-content: space-between;
padding: 3px 4px 0;
}
.vd3-divider {
height: 1px; background: var(--border); flex-shrink: 0; margin: 0 -2px;
}
.vd3-output-row {
display: flex; align-items: center; justify-content: space-between;
flex-shrink: 0;
}
.demo-view#viewVideo { display: none; }
.demo-view#viewVideo.active { display: flex; flex-direction: column; align-items: stretch; }
.vd2-wrap {
width: 100%;
min-height: 390px;
display: flex; flex-direction: row;
align-items: center;
padding: 24px 16px; gap: 0;
overflow: hidden;
background: var(--surface-1);
}
.vd-flow-row {
display: flex; align-items: center;
flex: 1;
min-width: 0;
}
.vd-logo-pill {
display: flex; align-items: center; justify-content: center;
background: #fff; border-radius: 12px;
padding: 8px 14px;
box-shadow: 0 4px 24px rgba(var(--shadow-rgb),0.35);
flex-shrink: 0;
opacity: 0; transform: scale(0.85);
}
.vd-connector {
flex: 1 1 30px; height: 2px; position: relative;
margin: 0 3px; min-width: 12px;
opacity: 0;
}
.vd-connector::before {
content: '';
position: absolute; inset: 0;
border-top: 2px dashed rgba(var(--accent-rgb),0.4);
}
.vd-connector::after {
content: '';
position: absolute; top: -3px; left: -4px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px rgba(var(--glow-rgb),0.7);
opacity: 0;
}
.vd-connector.animate-dot::after {
animation: vd-dot-run 0.6s ease forwards;
}
@keyframes vd-dot-run {
0% { left: -4px; opacity: 1; }
90% { opacity: 1; }
100% { left: calc(100% - 4px); opacity: 0; }
}
.vd-tool-icon {
width: 42px; height: 42px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
opacity: 0; transform: scale(0.7);
border-radius: 10px;
background: rgba(var(--fg-rgb),0.10);
border: 1.5px solid rgba(var(--fg-rgb),0.18);
box-shadow: 0 0 12px rgba(var(--fg-rgb),0.06), inset 0 0 8px rgba(var(--fg-rgb),0.05);
}
.vd-tool-icon.show {
animation: vd-icon-pop 0.35s ease forwards;
}
@keyframes vd-icon-pop {
0% { opacity: 0; transform: scale(0.7); }
60% { transform: scale(1.12); }
100% { opacity: 1; transform: scale(1); }
}
.vd-thumbs-stack {
flex: 0 0 210px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
margin-left: 0;
}
.vd-thumb-small {
width: 85%;
max-width: 200px;
aspect-ratio: 16/9;
border-radius: 12px;
overflow: visible;
position: relative;
border: 1px solid rgba(var(--fg-rgb),0.12);
box-shadow: 0 4px 20px rgba(var(--shadow-rgb),0.4);
opacity: 0;
transform: scale(0.8);
}
.vd-thumb-small img, .vd-thumb-small video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
border-radius: 12px;
}
.vd-thumb-small .vd-sm-overlay {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 18px 10px 7px;
background: linear-gradient(to top, rgba(var(--shadow-rgb),0.9) 0%, rgba(var(--shadow-rgb),0.45) 65%, transparent 100%);
border-radius: 0 0 12px 12px;
z-index: 2;
}
.vd-thumb-small .vd-sm-greeting {
font-size: 0.698rem; font-weight: 800; color: #fff;
text-shadow: 0 1px 4px rgba(var(--shadow-rgb),0.9);
}
.vd-thumb-small .vd-sm-meta {
font-size: 0.54rem; color: rgba(var(--fg-rgb),0.6);
font-weight: 600; margin-top: 2px;
}
@keyframes vd-card-pop-in {
0% { opacity: 0; transform: scale(0.7) translateY(8px); }
60% { opacity: 1; transform: scale(1.04) translateY(-2px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
.vd-thumb-small.delivered {
animation: vd-glow-pulse 2s ease-in-out infinite !important;
}
@keyframes vd-glow-pulse {
0%, 100% { opacity: 1; box-shadow: 0 4px 20px rgba(var(--shadow-rgb),0.4), 0 0 0 0 rgba(var(--glow-rgb),0); }
50% { opacity: 1; box-shadow: 0 4px 20px rgba(var(--shadow-rgb),0.4), 0 0 14px 2px rgba(var(--glow-rgb),0.3); }
}
.vd-thumb-small.breathing {
animation: vd-breathe 3s ease-in-out infinite !important;
opacity: 1 !important;
}
@keyframes vd-breathe {
0%, 100% { opacity: 1; transform: translateY(0) scale(1); }
50% { opacity: 1; transform: translateY(-3px) scale(1); }
}
.vd-delivered-badge {
position: absolute; top: -7px; right: -9px;
display: flex; align-items: center; gap: 3px;
background: var(--dash-ok-solid);
color: var(--dash-ok-ink); font-size: 0.5rem; font-weight: 800;
padding: 3px 8px; border-radius: 20px;
z-index: 5;
opacity: 0; transform: scale(0.7);
letter-spacing: 0.02em;
box-shadow: 0 2px 8px rgba(var(--dash-ok-rgb),0.38);
}
.vd-delivered-badge.show {
animation: vd-badge-in 0.35s ease forwards;
}
@keyframes vd-badge-in {
0% { opacity: 0; transform: scale(0.7); }
70% { transform: scale(1.1); }
100% { opacity: 1; transform: scale(1); }
}
.vd-connector.flowing::after {
animation: vd-dot-flow 1.8s linear infinite !important;
opacity: 1 !important;
}
@keyframes vd-dot-flow {
0% { left: -4px; opacity: 0.3; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { left: calc(100% - 4px); opacity: 0.3; }
}
.vd-connector.flowing::before {
border-top: 2px dashed rgba(var(--accent-rgb),0.4);
}
.vd-logo-pill.show {
animation: vd-pill-pop 0.4s ease forwards;
}
@keyframes vd-pill-pop {
0% { opacity: 0; transform: scale(0.85); }
60% { transform: scale(1.05); }
100% { opacity: 1; transform: scale(1); }
}
.vd-connector.show {
animation: vd-conn-in 0.3s ease forwards;
}
@keyframes vd-conn-in { to { opacity: 1; } }
.vd2-context-bar {
display: flex; align-items: center; gap: 7px;
padding: 5px 8px;
background: rgba(var(--ic2-rgb),0.1);
border: 1px solid rgba(var(--ic2-rgb),0.22);
border-radius: 7px;
flex-shrink: 0;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
}
.vd2-output-row {
display: flex; align-items: center; justify-content: space-between;
flex-shrink: 0;
}
.vd2-web-bg {
position: absolute; inset: 0; border-radius: inherit;
}
.vd2-web-nav {
position: absolute; top: 0; left: 0; right: 0;
height: 9px; background: rgba(var(--fg-rgb),0.55);
display: flex; align-items: center; padding: 0 4px; gap: 2px;
}
.vd2-web-hero { position: absolute; top: 13px; left: 5px; }
.vd2-wh-line.s { width: 30px; }
.vd2-person {
position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
width: 30px; height: 30px; border-radius: 50%;
border: 2px solid rgba(var(--fg-rgb),0.8);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 12px rgba(var(--shadow-rgb),0.4), 0 0 16px var(--vd-glow, rgba(var(--ic2-rgb),0.5));
z-index: 3; overflow: visible;
}
.vd-wrap {
padding: 10px 12px;
height: 100%;
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
}
.vd-trigger-notif {
display: flex; align-items: center; gap: 8px;
padding: 7px 10px;
background: rgba(var(--accent-rgb),0.07);
border: 1px solid rgba(var(--accent-rgb),0.18);
border-radius: 8px;
flex-shrink: 0;
}
.vd-pipeline {
display: flex; align-items: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 10px;
gap: 0;
flex-shrink: 0;
}
.demo-view#viewVideo.active .vd-pipe-node { animation: vd-node-in 0.4s ease forwards; }
.demo-view#viewVideo.active .vd-pipe-node:nth-child(1) { animation-delay: 0.1s; }
.demo-view#viewVideo.active .vd-pipe-node:nth-child(3) { animation-delay: 0.4s; }
.demo-view#viewVideo.active .vd-pipe-node:nth-child(5) { animation-delay: 0.7s; }
.demo-view#viewVideo.active .vd-pipe-node:nth-child(7) { animation-delay: 1.0s; }
@keyframes vd-node-in {
to { opacity: 1; transform: translateY(0); }
}
.demo-view#viewVideo.active .vd-pipe-line { animation: vd-line-in 0.3s ease forwards; }
.demo-view#viewVideo.active .vd-pipe-line:nth-child(2) { animation-delay: 0.25s; }
.demo-view#viewVideo.active .vd-pipe-line:nth-child(4) { animation-delay: 0.55s; }
.demo-view#viewVideo.active .vd-pipe-line:nth-child(6) { animation-delay: 0.85s; }
@keyframes vd-line-in { to { opacity: 1; } }
.vd-section-label {
font-size: 0.54rem; font-weight: 700;
color: var(--text-2);
letter-spacing: 0.04em;
flex-shrink: 0;
}
.vd-thumbs {
display: flex; gap: 7px;
flex: 1;
}
.demo-view#viewVideo.active .vd-thumb { animation: vd-thumb-in 0.4s ease forwards; }
.demo-view#viewVideo.active .vd-thumb:nth-child(1) { animation-delay: 0.5s; }
.demo-view#viewVideo.active .vd-thumb:nth-child(2) { animation-delay: 0.7s; }
.demo-view#viewVideo.active .vd-thumb:nth-child(3) { animation-delay: 0.9s; }
@keyframes vd-thumb-in {
to { opacity: 1; transform: scale(1); }
}
.vd-thumb-lines {
position: absolute; top: 6px; left: 6px; right: 6px;
opacity: 0.28;
}
.vd-person {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 32px; height: 32px;
border-radius: 50%;
border: 2px solid rgba(var(--fg-rgb),0.7);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 10px rgba(var(--shadow-rgb),0.5), 0 0 18px rgba(var(--fg-rgb),0.1);
z-index: 3;
overflow: hidden;
}
.vd-person::after {
content: '';
position: absolute; inset: -3px;
border-radius: 50%;
background: transparent;
box-shadow: 0 0 8px 2px var(--vd-glow, rgba(var(--ic2-rgb),0.5));
pointer-events: none;
}
.vd-play {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
z-index: 4;
}
.vd-greeting {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 14px 6px 6px;
text-align: center;
font-size: 0.698rem; font-weight: 800; color: #fff;
background: linear-gradient(to top, rgba(var(--shadow-rgb),0.85) 0%, rgba(var(--shadow-rgb),0.4) 70%, transparent 100%);
z-index: 5;
text-shadow: 0 1px 4px rgba(var(--shadow-rgb),0.9);
border-radius: 0 0 14px 14px;
}
.sf-video-output {
margin-top: 40px;
}
.sf-vo-label {
text-align: center;
font-size: 0.776rem;
font-weight:500;
color: var(--text-3);
margin-bottom: 24px;
letter-spacing: 0.02em;
}
.sf-vo-label span { color: var(--success-light); font-weight: 700; }
.sf-vo-thumbs {
display: flex; gap: 20px; justify-content: center;
flex-wrap: wrap;
}
.sf-vo-thumb {
width: 220px;
border-radius: 14px;
overflow: hidden;
position: relative;
border: 1px solid rgba(var(--fg-rgb),0.1);
box-shadow: 0 8px 32px rgba(var(--shadow-rgb),0.35);
aspect-ratio: 16/9;
flex-shrink: 0;
}
.sf-vo-site-lines {
position: absolute;
top: 10px; left: 10px; right: 10px;
opacity: 0.22;
}
.svsl.s { width: 45%; }
.sf-vo-person {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 52px; height: 52px;
border-radius: 50%;
border: 2.5px solid rgba(var(--fg-rgb),0.8);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 20px rgba(var(--shadow-rgb),0.5);
z-index: 3; overflow: hidden;
}
.sf-vo-play {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center; z-index: 4;
}
.sf-vo-bottom {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 8px 10px 7px;
background: linear-gradient(to top, rgba(var(--shadow-rgb),0.7) 0%, rgba(var(--shadow-rgb),0.3) 60%, transparent 100%);
text-align: center;
z-index: 5;
}
.sf-vo-greeting {
font-size: 0.679rem; font-weight:600;
color: #fff;
}
@media (max-width: 768px) {
.sf-vo-thumbs { gap: 12px; }
.sf-vo-thumb { width: 160px; }
}
.hf-node-video .hf-node-circle {
background: var(--bg-0);
border-color: rgba(var(--fg-rgb),0.08);
}
.hf-node-video.active .hf-node-circle {
border-color: var(--accent);
box-shadow: 0 0 30px rgba(var(--glow-rgb),0.2), 0 4px 20px rgba(var(--shadow-rgb),0.4);
}
.hf-node-video.active .hf-node-circle::before {
border-color: rgba(var(--accent-rgb),0.15);
}
.hf-node-video .hf-node-circle svg { color: var(--text-3); }
.hf-node-video.active .hf-node-circle svg { color: var(--accent); }
.hf-node-video .hf-node-label { color: var(--text-2); transition: color 0.4s; }
.hf-node-video.active .hf-node-label { color: var(--accent); }
.system-flow {
padding: 120px 0;
position: relative;
overflow: hidden;
}
.system-flow::before {
content: '';
position: absolute;
top: -160px; left: 50%;
transform: translateX(-50%);
width: min(900px, 96vw); height: 600px;
background: radial-gradient(ellipse at center, rgba(var(--accent-rgb),0.04) 0%, transparent 68%);
pointer-events: none;
}
.sf-header { text-align: center; margin-bottom: 72px; }
.sf-header .section-desc { margin: 0 auto; }
.sf-grid {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 0 10px;
row-gap: 20px;
align-items: start;
margin-bottom: 32px;
}
.sf-step:not(.sf-step--video) { min-height: 246px; }
.sf-step--video {
position: relative;
background:
linear-gradient(145deg, rgba(var(--success-rgb),0.16) 0%, rgba(var(--success-rgb),0.04) 55%, rgba(var(--success-rgb),0.10) 100%),
rgba(var(--surface2-rgb),0.20);
backdrop-filter: blur(3px) saturate(1.35);
-webkit-backdrop-filter: blur(3px) saturate(1.35);
border-color: rgba(var(--success-rgb),0.55);
box-shadow:
0 12px 40px rgba(var(--success-rgb),0.22),
0 2px 10px rgba(var(--shadow-rgb),0.10),
inset 0 1px 0 var(--glass-rim);
}
.sf-step--video::after {
content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
background: linear-gradient(160deg, var(--glass-sheen) 0%, rgba(255,255,255,0.04) 34%, transparent 64%);
}
.sf-outcome { margin-top: 8px; }
.sf-outcome-inner {
display: flex; align-items: center; justify-content: center; gap: 10px;
background: rgba(var(--success-rgb),0.06);
border: 1px solid rgba(var(--success-rgb),0.18);
border-radius: 12px;
padding: 16px 28px;
text-align: center;
}
.sf-outcome-inner span { font-size: 0.854rem; color: var(--text-2); line-height: 1.5; }
.sf-outcome-inner strong { color: var(--success-light); }
@media (max-width: 900px) {
}
@media (max-width: 540px) {
.system-flow { padding: 80px 0; }
}
.vd-core {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 7px;
background: var(--surface-2);
border: 1px solid rgba(var(--accent-rgb),0.34);
border-radius: 14px;
padding: 15px 10px;
width: 106px; flex-shrink: 0;
opacity: 0; transform: scale(0.85);
}
.vd-core.show { animation: vd-pill-pop 0.5s cubic-bezier(.2,.9,.3,1.3) forwards; }
.vd-core-nm { font-size: 0.64rem; color: var(--text-1); letter-spacing: 0.01em; }
.vd-core-ring {
position: relative; width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
}
.vd-core-ring img { width: 27px; height: 27px; object-fit: contain; display: block; }
.vd-core-ring::after {
content: ''; position: absolute; inset: -6px; border-radius: 50%;
border: 1px solid rgba(var(--accent-rgb),0.22);
border-top-color: rgba(var(--accent-rgb),0.9);
opacity: 0; transition: opacity .3s ease;
}
.vd-core.act .vd-core-ring::after { opacity: 1; animation: vd-core-spin 1.5s linear infinite; }
@keyframes vd-core-spin { to { transform: rotate(360deg); } }
.vd-stage, .vd-core { transition: border-color .3s ease, box-shadow .3s ease, background .3s ease; }
.vd-stage.act { border-color: rgba(var(--accent-rgb),0.45); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.09); }
.vd-core.act { border-color: rgba(var(--accent-rgb),0.85); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.13); }
.vd-tick { stroke-dasharray: 14; stroke-dashoffset: 14; }
.vd-stage-book.act .vd-tick { animation: vd-tick-draw .55s cubic-bezier(.3,1,.4,1) forwards; }
@keyframes vd-tick-draw { to { stroke-dashoffset: 0; } }
.vd-proc { position: relative; width: 30px; height: 30px; display: block; }
.vd-proc i { position: absolute; display: block; }
.vd-proc-orb {
left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
border-radius: 50%; background: var(--bar-amber);
}
.vd-stage-proc.act .vd-proc-orb { animation: vd-orb 1.5s ease-in-out infinite; }
@keyframes vd-orb { 0%,100%{ transform: scale(1); opacity: 1 } 50%{ transform: scale(.6); opacity: .6 } }
.vd-proc-ring {
left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
border-radius: 50%; border: 1px solid rgba(var(--bar-amber-rgb),0.6); opacity: 0;
}
.vd-stage-proc.act .vd-proc-ring.r1 { animation: vd-ripple 1.9s ease-out infinite; }
.vd-stage-proc.act .vd-proc-ring.r2 { animation: vd-ripple 1.9s ease-out infinite .95s; }
@keyframes vd-ripple { 0%{ transform: scale(.5); opacity: .85 } 100%{ transform: scale(1.6); opacity: 0 } }
.vd-proc-chips { display: flex; gap: 3px; justify-content: center; flex-wrap: nowrap; }
.vd-proc-chips b {
font-size: 0.543rem; font-weight: 700; letter-spacing: 0.02em;
padding: 2px 5px; border-radius: 5px; white-space: nowrap; line-height: 1.2;
background: rgba(var(--bar-amber-rgb),0.20);
color: var(--bar-amber);
border: 1px solid rgba(var(--bar-amber-rgb),0.45);
opacity: .28; transition: opacity .25s ease;
}
.vd-stage-proc.act .vd-proc-chips b { animation: vd-chip 2.1s ease-in-out infinite; }
.vd-stage-proc.act .vd-proc-chips b.c2 { animation-delay: .7s; }
.vd-stage-proc.act .vd-proc-chips b.c3 { animation-delay: 1.4s; }
@keyframes vd-chip { 0%,100%{ opacity: .28 } 22%,48%{ opacity: 1 } }
.vd-proc-bar {
display: block; width: 52px; height: 3px; border-radius: 100px;
background: rgba(var(--fg-rgb),0.16); overflow: hidden;
}
.vd-proc-bar > i {
position: static; display: block; height: 100%; width: 42%; border-radius: 100px;
background: var(--bar-amber); transform: translateX(-110%);
}
.vd-stage-proc.act .vd-proc-bar > i { animation: vd-procbar 1.6s ease-in-out infinite; }
@keyframes vd-procbar { 0%{ transform: translateX(-110%) } 100%{ transform: translateX(270%) } }
@media (prefers-reduced-motion: reduce){
.vd-core-ring::after, .vd-proc-orb, .vd-proc-ring,
.vd-proc-chips b, .vd-proc-bar > i, .vd-tick { animation: none !important; }
.vd-proc-chips b { opacity: 1; }
.vd-tick { stroke-dashoffset: 0; }
}
.vd-stage {
display: flex; flex-direction: column; align-items: center; gap: 7px;
background: var(--surface-2);
border: 1px solid rgba(var(--fg-rgb),0.10);
border-radius: 14px;
padding: 13px 8px;
flex: 1; min-width: 0;
text-align: center;
opacity: 0; transform: scale(0.7);
}
.vd-stage.show { animation: vd-icon-pop 0.45s cubic-bezier(.2,.9,.3,1.3) forwards; }
.vd-stage svg { display: block; }
.vd-stage-lb { font-size: 0.611rem; color: var(--text-1); line-height: 1.25; }
.vd-stage-sb { font-size: 0.533rem; color: var(--text-3); line-height: 1.2; }
.vd-stage-proc { gap: 5px; padding: 11px 6px; }
@media (max-width: 768px) {
.vd-flow-row.vd-flow-row-b {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 8px; width: 100%;
}
.vd-flow-row-b > .vd-connector { display: none; }
.vd-core { width: 100%; padding: 10px 8px; flex-direction: row; gap: 8px; }
.vd-flow-row-b > .vd-stage { flex: 1 1 28%; padding: 9px 6px; }
.vd-stage-sb { display: none; }
.vd-proc-chips b { font-size: 0.5rem; padding: 1px 4px; }
}
@media (max-width: 768px) {
.vd2-wrap {
flex-direction: column;
padding: 14px 10px;
min-height: auto;
gap: 14px;
}
.vd-flow-row {
display: grid;
grid-template-columns: auto 1fr auto 1fr auto;
grid-template-rows: auto auto;
align-items: center;
justify-items: center;
gap: 10px 4px;
width: 100%;
}
.vd-flow-row > .vd-logo-pill#vdPillCal { grid-row: 1; grid-column: 1; }
.vd-flow-row > #vdConn0 { grid-row: 1; grid-column: 2; width: 100%; }
.vd-flow-row > #vdConn1 { grid-row: 1; grid-column: 4; width: 100%; }
.vd-flow-row > #vdIconApi { grid-row: 1; grid-column: 5; }
.vd-flow-row > #vdConn2 { display: none; }
.vd-flow-row > .vd-logo-pill#vdPillMake { grid-row: 2; grid-column: 1; }
.vd-flow-row > #vdConn3 { grid-row: 2; grid-column: 2; width: 100%; }
.vd-flow-row > #vdIconWebhook { grid-row: 2; grid-column: 3; }
.vd-flow-row > #vdConn4 { grid-row: 2; grid-column: 4; width: 100%; }
.vd-flow-row > #vdConn5 { display: none; }
.vd-logo-pill#vdPillMake img { height: 12px; }
.vd-tool-icon#vdIconApi { font-size: 0.5rem !important; }
.vd-connector { min-width: 0; margin: 0; }
.vd-thumbs-stack {
flex: none;
width: 100%;
flex-direction: row;
justify-content: center;
gap: 8px;
}
.vd-thumb-small {
width: 30%;
max-width: 120px;
aspect-ratio: 16/9;
border-radius: 8px;
}
.vd-thumb-small img, .vd-thumb-small video { border-radius: 8px; }
.vd-thumb-small .vd-sm-overlay { display: none; }
.vd-delivered-badge {
font-size: 0.38rem !important;
padding: 1px 5px !important;
top: -5px !important;
right: -6px !important;
border-radius: 4px !important;
}
.vd2-title span { font-size: 0.543rem !important; }
}
@media (max-width: 480px) {
.vd2-wrap { padding: 10px 6px; gap: 10px; }
.vd-logo-pill#vdPillMake img { height: 10px; }
.vd-tool-icon#vdIconApi { font-size: 0.4rem !important; }
.vd-connector::after { width: 4px; height: 4px; top: -1.5px; }
.vd-thumbs-stack { gap: 5px; }
.vd-thumb-small {
width: 28%;
max-width: 100px;
border-radius: 6px;
}
.vd-thumb-small img, .vd-thumb-small video { border-radius: 6px; }
.vd-delivered-badge {
font-size: 0.32rem !important;
padding: 1px 3px !important;
top: -4px !important;
right: -5px !important;
}
.vd2-title span { font-size: 0.48rem !important; }
}
@media (max-width: 768px) {
.sf-vo-thumbs { flex-wrap: wrap; justify-content: center; gap: 10px; }
.sf-vo-thumb { width: 140px; border-radius: 10px; }
.sf-vo-thumb img, .sf-vo-thumb video { border-radius: 0; }
.sf-vo-bottom { padding: 4px 8px; }
.sf-vo-greeting { font-size: 0.533rem; }
}
@media (max-width: 480px) {
.sf-vo-thumbs { gap: 8px; }
.sf-vo-thumb { width: 120px; border-radius: 8px; }
.sf-vo-bottom { padding: 3px 6px; }
.sf-vo-greeting { font-size: 0.48rem; }
}
@media (max-width: 768px) {
.sc-auto-event { font-size: 0.582rem; }
}
@media (max-width: 768px) {
.comparison { padding: 80px 0; }
.comparison-header h2 { font-size: 1.6rem; }
.comparison-header p { font-size: 0.854rem; }
.comp-card { padding: 24px 18px; border-radius: 14px; }
.comp-card-title { font-size: 0.854rem; padding-bottom: 14px; margin-bottom: 14px; }
.comp-step { padding: 10px 40px 10px 10px; gap: 10px; min-height: 78px; }
.comp-step-title { font-size: 0.757rem; }
.comp-step-desc { font-size: 0.72rem; }
.comp-step-icon { width: 28px; height: 28px; min-width: 28px; }
.comp-step-icon svg { width: 12px; height: 12px; }
}
@media (max-width: 768px) {
.hero-flow { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.hf-node { width: 80px; }
.hf-node-circle { width: 56px; height: 56px; }
.hf-node-circle svg { width: 22px; height: 22px; }
.hf-node-label { font-size: 0.563rem; margin-top: 10px; }
.hf-arrow svg { width: 12px; height: 12px; }
.hf-desc { padding: 0 12px; }
.hf-desc p { font-size: 0.776rem; }
}
@media (max-width: 480px) {
.hero-flow { gap: 0; }
.hf-node { width: 58px; }
.hf-node-circle { width: 44px; height: 44px; }
.hf-node-circle svg { width: 18px; height: 18px; }
.hf-node-label { font-size: 0.5rem; margin-top: 6px; letter-spacing: 0.06em; }
.hf-arrow { min-width: 12px; }
.hf-arrow svg { width: 10px; height: 10px; }
.hf-desc p { font-size: 0.698rem; }
}
@media (max-width: 480px) {
}
@media (max-width: 768px) {
.section-title { line-height: 1.2; }
.showcase-content .section-desc { font-size: 0.854rem; }
}
.hero-screen, .sc-chat {
--dash-ok: #7FE3C2;
--dash-ok-rgb: 94,211,168;
--dash-ok-solid: #84DEC2;
--dash-ok-ink: #06382B;
--dash-neutral: #C3CEDA;
--dash-neutral-rgb: 148,163,184;
--dash-hi: #FD8D68;
--surface-0: #16120F;
--surface-1: #1C1714;
--surface-2: #241D19;
--surface-3: #2E2621;
--surface-card: rgba(36,29,25,0.7);
--surface: #241D19;
--bg-0: #16120F; --bg-1: #1C1714; --bg-2: #241D19; --bg-3: #2E2621;
--bg-card: rgba(36,29,25,0.7);
--surface0-rgb: 22,18,15;
--surface2-rgb: 36,29,25;
--fg-rgb: 255,255,255;
--shadow-rgb: 0,0,0;
--accent-rgb: 253,141,104;
--glow-rgb: 253,141,104;
--fill-1: #FD8D68;
--fill-2: #FF5F6D;
--text-1: #F7F1EC;
--text-2: #DACCC2;
--text-3: #A99284;
--on-accent: #2B1509;
--accent: #FD8D68;
--accent-light: #FF5F6D;
--accent-dark: #CA7153;
--border: rgba(255,255,255,0.08);
--border-light: rgba(255,255,255,0.12);
--accent-soft: #FFB59B;
--accent-glow: rgba(253,141,104,0.14);
--accent-glow-md: rgba(253,141,104,0.22);
--accent-glow-strong: rgba(253,141,104,0.38);
--success-glow: rgba(52,211,153,0.18);
--head-end: #FFD2C2; --shim-1: #FFD9C9;
--li-bg: rgba(253,141,104,0.08);
--li-stroke: rgba(253,141,104,0.55);
--li-glyph: #FFFFFF;
--bt-green: #34D399; --bt-green-rgb: 52,211,153;
--bt-blue: #60A5FA; --bt-blue-rgb: 96,165,250;
--bt-amber: #FBBF24; --bt-amber-rgb: 251,191,36;
--bt-coral: #FD8D68; --bt-coral-rgb: 253,141,104;
--bar-green: #34D399; --bar-green-rgb: 52,211,153;
--bar-blue: #60A5FA; --bar-blue-rgb: 96,165,250;
--bar-violet: #A78BFA; --bar-violet-rgb: 167,139,250;
--bar-amber: #FBBF24; --bar-amber-rgb: 251,191,36;
--pc-slate: #94A3B8; --pc-slate-rgb: 148,163,184;
--head-grad-end: #FD8D68; --head-grad-end2: #FF5F6D; --h1-peak: #FF5F6D;
--st-teal:#2DD4BF; --st-teal-rgb:45,212,191;
--st-violet:#A78BFA; --st-violet-rgb:167,139,250;
--st-slate:#94A3B8; --st-slate-rgb:148,163,184;
--st-amber:#FBBF24; --st-amber-rgb:251,191,36;
--st-green:#4ADE80; --st-green-rgb:74,222,128;
--st-blue:#60A5FA; --st-blue-rgb:96,165,250;
--st-gold:#FCD34D; --st-gold-rgb:252,211,77;
--glass-tag-bg: rgba(74,222,128,0.13); --glass-tag-br: rgba(74,222,128,0.45); --on-glass-tag: #BBF7D0;
--gg-warm: #60A5FA; --gg-safe: #34D399; --gg-risk: #FBBF24;
--ic-3: #FD8D68; --ic-4: #FBBF24; --ic-5: #2DD4BF; --ic-6: #34D399;
--purple: #A78BFA; --purple-light: #C4B5FD;
--success: #34D399; --success-light: #6EE7B7; --success-rgb: 52,211,153;
--danger: #F87171; --danger-rgb: 239,68,68;
--warning: #FBBF24; --warn-rgb: 251,191,36;
--ic-1: #60A5FA; --ic1-rgb: 59,130,246;
--ic-2: #A78BFA; --ic2-rgb: 139,92,246;
color: var(--text-2);
}
.sc-chat.glass-card,
.sc-chat {
background: #241D19 !important;
backdrop-filter: none !important;
}
.sc-chat-header {
background: rgba(253,141,104,0.10) !important;
border-bottom: 1px solid rgba(253,141,104,0.18) !important;
backdrop-filter: none !important;
}
.sc-chat {
border: 1px solid rgba(255,255,255,0.07) !important;
box-shadow: 0 24px 70px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.2);
}
.sc-chat a, .chat-text a,
.chat-text span[style*="underline"] {
color: #FFB59B !important;
}
.sc-chat .chat-text { color: #E9DCD3; }
.sc-chat .chat-time, .sc-chat .chat-meta { color: #A99284; }
.apimcp { position: relative; z-index: 1; padding: 100px 0; background: var(--surface-1); overflow: hidden; }
.apimcp::before {
content:''; position:absolute; inset:0; pointer-events:none;
background: radial-gradient(ellipse 60% 45% at 50% 0%, rgba(var(--accent-rgb),0.07), transparent 70%);
}
.apimcp .container { position: relative; z-index: 1; }
.apimcp-header { text-align: center; margin-bottom: 52px; }
.apimcp-header .section-desc { margin-left:auto; margin-right:auto; }
.am-flow {
display: grid;
grid-template-columns: 1fr 86px auto 86px 1fr;
gap: 0; align-items: stretch; margin-bottom: 56px;
max-width: 1080px; margin-left: auto; margin-right: auto;
}
.am-col.right .am-node { flex-direction: row; }
.am-hub {
position: relative; width: 196px; flex-shrink: 0; align-self: center;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 22px 16px; border-radius: 18px;
background: linear-gradient(160deg, rgba(var(--accent-rgb),0.14), rgba(var(--accent-rgb),0.04));
border: 1px solid rgba(var(--accent-rgb),0.4);
box-shadow: 0 12px 40px rgba(var(--glow-rgb),0.22), inset 0 1px 0 var(--glass-rim);
backdrop-filter: blur(14px) saturate(1.4);
}
.am-hub-mark {
width: 44px; height: 44px; border-radius: 13px; margin-bottom: 10px;
background: linear-gradient(135deg, var(--fill-1), var(--fill-2));
display: flex; align-items: center; justify-content: center;
box-shadow: 0 6px 18px rgba(var(--glow-rgb),0.4);
}
.am-hub-mark.am-hub-mark-img {
background: rgba(var(--accent-rgb),0.10);
border: 1px solid rgba(var(--accent-rgb),0.28);
box-shadow: 0 6px 18px rgba(var(--glow-rgb),0.22);
}
.am-hub-mark.am-hub-mark-img img { width: 30px; height: 30px; object-fit: contain; display: block; }
.am-hub-name { font-size: 0.834rem; font-weight: 800; color: var(--text-1); letter-spacing: -0.02em; }
.am-hub-role { font-size: 0.621rem; font-weight:500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-top: 3px; }
.am-hub-status {
margin-top: 9px; font-size: 0.582rem; color: var(--success);
display: inline-flex; align-items: center; gap: 5px;
background: rgba(var(--success-rgb),0.14); border: 1px solid rgba(var(--success-rgb),0.3);
padding: 3px 9px; border-radius: 100px;
}
.am-hub-status .d { width:5px;height:5px;border-radius:50%;background:var(--success); animation: pulse-dot 1.8s infinite; }
.am-hub-ring {
content:''; position:absolute; inset:-9px; border-radius:24px;
border:1px solid rgba(var(--accent-rgb),0.22); pointer-events:none;
animation: am-ring 3.2s ease-in-out infinite;
}
@keyframes am-ring { 0%,100% { opacity:.25; transform:scale(1); } 50% { opacity:.7; transform:scale(1.03); } }
.am-rail { position: relative; height: 2px; border-radius: 2px; background: rgba(var(--accent-rgb),0.16); overflow: visible; }
.am-rail::after {
content:''; position:absolute; top:50%; left:0; width:26px; height:4px; border-radius:4px;
transform: translateY(-50%);
background: linear-gradient(90deg, transparent, var(--accent), transparent);
box-shadow: 0 0 10px rgba(var(--glow-rgb),0.7);
animation: am-travel 2.6s linear infinite;
}
.am-rail.r2::after { animation-delay: .9s; }
.am-rail.r3::after { animation-delay: 1.7s; }
.am-rail.rev::after { animation-name: am-travel-rev; }
@keyframes am-travel { 0% { left:-8%; opacity:0; } 12% { opacity:1; } 88% { opacity:1; } 100% { left:100%; opacity:0; } }
@keyframes am-travel-rev { 0% { left:100%; opacity:0; } 12% { opacity:1; } 88% { opacity:1; } 100% { left:-8%; opacity:0; } }
.am-rails { display: flex; flex-direction: column; gap: 30px; width: 100%; }
.am-conn { display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 0 6px; align-self: center; }
.am-panel {
background: var(--surface-2); border: 1px solid var(--border);
border-radius: 14px; padding: 15px 16px;
box-shadow: 0 8px 26px rgba(var(--shadow-rgb),0.12);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
min-width: 0;
display: flex; flex-direction: column;
}
.am-panel-hd {
display: flex; align-items: center; justify-content: space-between;
font-size: 0.621rem; font-weight:500; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--text-3);
padding-bottom: 9px; margin-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.am-panel-hd .cnt { color: var(--accent); letter-spacing: 0; text-transform: none; font-size: 0.601rem; }
.am-rows { display: flex; flex-direction: column; gap: 9px; flex: 1; justify-content: space-around; }
.am-cli { display: flex; align-items: center; gap: 10px; }
.am-cli-tx { min-width: 0; }
.am-cli-live {
margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
font-size: 0.543rem; font-weight:500; letter-spacing: 0.09em;
padding: 3px 8px; border-radius: 100px; white-space: nowrap;
background: rgba(var(--success-rgb),0.15); color: var(--success);
border: 1px solid rgba(var(--success-rgb),0.32);
}
.am-cli-live i {
width: 5px; height: 5px; border-radius: 50%; font-style: normal;
background: var(--success); box-shadow: 0 0 6px rgba(var(--success-rgb),0.9);
animation: am-blink 1.8s ease-in-out infinite;
}
.am-led.on { background: var(--success); box-shadow: 0 0 7px rgba(var(--success-rgb),0.8); animation: am-blink 1.9s ease-in-out infinite; }
@keyframes am-blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.am-cli-nm { font-size: 0.834rem; font-weight: 700; color: var(--text-1); letter-spacing: -0.01em; }
.am-cli-md { font-size: 0.66rem; color: var(--text-3); white-space: nowrap; }
.am-log { display: flex; align-items: center; gap: 9px; animation: am-logline .55s cubic-bezier(.16,1,.3,1) both; }
.am-log:nth-child(2){animation-delay:.12s} .am-log:nth-child(3){animation-delay:.24s}
.am-log:nth-child(4){animation-delay:.36s} .am-log:nth-child(5){animation-delay:.48s}
@keyframes am-logline { from { opacity:0; transform: translateY(7px); } to { opacity:1; transform:none; } }
.am-code-b {
font-size: 0.582rem; font-weight:600; padding: 2px 6px; border-radius: 5px; flex-shrink: 0;
background: rgba(var(--success-rgb),0.16); color: var(--success);
border: 1px solid rgba(var(--success-rgb),0.3);
}
.am-code-b.warn { background: rgba(var(--warn-rgb),0.16); color: var(--warning); border-color: rgba(var(--warn-rgb),0.32); }
.am-log-p { font-size: 0.718rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-log-t { font-size: 0.63rem; color: var(--text-3); margin-left: auto; white-space: nowrap; }
.am-log.muted .am-log-p { color: var(--text-3); }
.am-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.am-card {
background: var(--surface-2); border: 1px solid var(--border);
border-radius: 16px; padding: 22px; display: flex; flex-direction: column;
box-shadow: 0 6px 22px rgba(var(--shadow-rgb),0.10);
transition: transform .3s, border-color .3s, box-shadow .3s;
}
.am-card:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb),0.34); box-shadow: 0 12px 34px rgba(var(--glow-rgb),0.14); }
.am-card-ic {
width: 38px; height: 38px; border-radius: 11px; margin-bottom: 14px;
display: flex; align-items: center; justify-content: center;
}
.am-card-ic.c1 { background: rgba(var(--ic1-rgb),0.18); color: var(--ic-1); box-shadow: inset 0 0 0 1px rgba(var(--ic1-rgb),0.3); }
.am-card-ic.c2 { background: rgba(var(--ic2-rgb),0.18); color: var(--ic-2); box-shadow: inset 0 0 0 1px rgba(var(--ic2-rgb),0.3); }
.am-card-ic.c3 { background: rgba(var(--success-rgb),0.18); color: var(--success); box-shadow: inset 0 0 0 1px rgba(var(--success-rgb),0.3); }
.am-card h3 { font-size: 0.97rem; font-weight: 700; color: var(--text-1); margin-bottom: 6px; letter-spacing: -0.02em; }
.am-card p { font-size: 0.795rem; color: var(--text-3); line-height: 1.6; margin-bottom: 14px; }
.am-chip {
display: inline-flex; align-items: center; gap: 6px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.66rem; font-weight:500;
background: rgba(var(--accent-rgb),0.10); border: 1px solid rgba(var(--accent-rgb),0.22);
color: var(--accent); padding: 4px 9px; border-radius: 7px;
margin: 0 5px 5px 0; white-space: nowrap;
}
.am-chip.ev { background: rgba(var(--success-rgb),0.12); border-color: rgba(var(--success-rgb),0.28); color: var(--success); }
.am-chip.mut { background: rgba(var(--fg-rgb),0.05); border-color: var(--border); color: var(--text-3); }
.am-chips { margin-top: auto; }
.am-code {
margin-top: auto;
background: rgba(var(--fg-rgb),0.05); border: 1px solid var(--border);
border-radius: 10px; padding: 12px 13px; overflow-x: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.621rem; line-height: 1.65; color: var(--text-2);
}
.am-code .k { color: var(--accent); }
.am-code .s { color: var(--success); }
.am-foot {
margin-top: 26px; text-align: center;
font-size: 0.757rem; color: var(--text-3);
}
.am-foot strong { color: var(--text-2); font-weight: 600; }
.am-foot .am-foot-lead { font-size: 0.95rem; font-weight: 700; color: var(--text-1); }
@media (max-width: 1080px) {
.am-flow { grid-template-columns: 1fr 54px auto 54px 1fr; }
.am-hub { width: 168px; }
}
@media (max-width: 980px) {
.am-cards { grid-template-columns: 1fr; }
.am-flow { grid-template-columns: 1fr; gap: 16px; justify-items: stretch; }
.am-conn { display: none; }
.am-hub { width: 100%; max-width: 340px; margin: 0 auto; }
.am-panel { width: 100%; }
}
@media (max-width: 560px) {
.apimcp { padding: 72px 0; }
}
.safety { position:relative; z-index:1; padding:100px 0; background:var(--surface-1); overflow:hidden; }
.safety::before { content:''; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse 56% 42% at 50% 0%, rgba(var(--success-rgb),0.055), transparent 72%); }
.safety .container { position:relative; z-index:1; }
.pg-head { text-align:center; margin-bottom:44px; }
.pg-head .section-desc { margin-left:auto; margin-right:auto; }
.sfy-desc { max-width:920px; font-size:1.02rem; line-height:1.75; }
@media (max-width:1000px){ .sfy-desc { max-width:640px; font-size:0.96rem; } }
.pg-foot { margin-top:30px; text-align:center; font-size:0.737rem;
color:var(--text-3); line-height:1.6; max-width:660px; margin-left:auto; margin-right:auto; }
.bn { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.bn-c {
position:relative; padding:22px 20px; border-radius:16px; overflow:hidden;
background:var(--surface-2); border:1px solid var(--border);
box-shadow:0 4px 18px rgba(var(--shadow-rgb),0.08);
transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .3s;
--tint:var(--bt-green-rgb); --tone:var(--bt-green);
}
.bn-c::after { content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
background:linear-gradient(160deg, rgba(var(--tint),0.10), transparent 46%); }
.bn-c > * { position:relative; z-index:1; }
.bn-c:hover { transform:translateY(-3px); border-color:rgba(var(--tint),0.45);
box-shadow:0 14px 32px rgba(var(--tint),0.16); }
.bn-c.t-blue { --tint:var(--bt-blue-rgb); --tone:var(--bt-blue); }
.bn-c.t-amber { --tint:var(--bt-amber-rgb); --tone:var(--bt-amber); }
.bn-c.t-coral { --tint:var(--bt-coral-rgb); --tone:var(--bt-coral); }
.bn-ic { width:34px; height:34px; border-radius:10px; margin-bottom:14px;
display:flex; align-items:center; justify-content:center;
background:rgba(var(--tint),0.16); color:var(--tone);
box-shadow:inset 0 0 0 1px rgba(var(--tint),0.3); }
.bn-t { font-size:0.873rem; font-weight:700; color:var(--text-1); letter-spacing:-0.018em; margin-bottom:6px; line-height:1.28; }
.bn-p { font-size:0.786rem; color:var(--text-3); line-height:1.58; }
.bn-c.wide { grid-column:span 2; }
.bn-c.tall { grid-column:span 2; grid-row:span 2; display:flex; flex-direction:column; }
.bn-gauge { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4px 0 2px; }
.gg-wrap { position:relative; width:100%; max-width:280px; }
.gg-needle { position:absolute; left:50%; bottom:20%; width:3px; height:44%;
background:var(--text-1); border-radius:3px; transform-origin:bottom center;
animation:gg-sweep 6.5s cubic-bezier(.45,0,.55,1) infinite; }
.gg-hub { position:absolute; left:50%; bottom:17.5%; transform:translateX(-50%);
width:15px; height:15px; border-radius:50%; background:var(--text-1);
box-shadow:0 0 0 4px var(--surface-2); }
@keyframes gg-sweep {
0%,100% { transform:translateX(-50%) rotate(-34deg); }
50% { transform:translateX(-50%) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce){ .gg-needle{ animation:none; transform:translateX(-50%) rotate(-20deg);} }
.gg-legend { display:flex; justify-content:center; gap:16px; margin-top:12px; flex-wrap:wrap; }
.gg-legend span { display:inline-flex; align-items:center; gap:6px;
font-size:0.718rem; font-weight:500; color:var(--text-2); }
.gg-legend i { width:9px; height:9px; border-radius:3px; font-style:normal; }
.gg-read { text-align:center; margin-top:10px; }
.gg-band { display:inline-flex; align-items:center; gap:6px; font-size:0.698rem; font-weight:500;
letter-spacing:0.1em; padding:4px 12px; border-radius:100px;
background:rgba(var(--success-rgb),0.15); color:var(--success);
border:1px solid rgba(var(--success-rgb),0.34); }
.gg-band i { width:5px;height:5px;border-radius:50%;background:var(--success);font-style:normal;
box-shadow:0 0 6px rgba(var(--success-rgb),0.9); animation:am-blink 1.9s ease-in-out infinite; }
@media (max-width:1080px){ .bn { grid-template-columns:repeat(3,1fr); } .bn-c.tall{ grid-column:span 3; grid-row:auto; } }
@media (max-width:820px){ .bn { grid-template-columns:repeat(2,1fr); } .bn-c.tall,.bn-c.wide{ grid-column:span 2; } }
@media (max-width:480px){ .bn { grid-template-columns:1fr; } .bn-c.tall,.bn-c.wide{ grid-column:span 1; } }
.pc { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; max-width:1180px; margin:0 auto; }
.pc-c {
position:relative; display:flex; flex-direction:column; overflow:hidden;
border-radius:18px; padding:18px 18px 20px;
background:var(--surface-2); border:1px solid var(--border);
box-shadow:0 4px 18px rgba(var(--shadow-rgb),0.08);
transition:border-color .34s, box-shadow .34s;
--ft:var(--accent-rgb); --fc:var(--accent);
}
.pc-c::after { content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
background:linear-gradient(162deg, rgba(var(--ft),0.11), transparent 46%); }
.pc-c > * { position:relative; z-index:1; }
.pc-c:hover { border-color:rgba(var(--ft),0.42); box-shadow:0 16px 38px rgba(var(--ft),0.16); }
.pc-c.s2{grid-column:span 2} .pc-c.s3{grid-column:span 3}
.pc-ui { flex:1; border-radius:12px; padding:14px; margin-bottom:16px;
background:rgba(var(--fg-rgb),0.04); border:1px solid var(--border);
display:flex; flex-direction:column; gap:8px; min-height:150px; overflow:hidden; }
.pc-t { font-size:0.921rem; font-weight:550; color:var(--text-1); letter-spacing:-0.015em; margin-bottom:5px; }
.pc-p { font-size:0.776rem; font-weight:400; color:var(--text-3); line-height:1.6; }
.pc-lbl { font-family:ui-monospace,Menlo,monospace; font-size:0.601rem; font-weight:500;
letter-spacing:0.1em; text-transform:uppercase; color:var(--text-3); }
.pc-bar { display:flex; align-items:center; gap:8px; }
.pc-row { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:9px;
background:var(--surface-2); border:1px solid var(--border); }
.pc-nm { font-size:0.757rem; font-weight:500; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-sub { font-size:0.718rem; color:var(--text-2); }
.pc-mono { font-family:ui-monospace,Menlo,monospace; font-size:0.64rem; color:var(--text-2); }
.pc-anim .pc-scan .typing { display:inline-block; overflow:hidden;
white-space:pre; vertical-align:bottom; width:0; }
.pc-anim .pc-scan .t1 { animation:pcT1 4s infinite; }
.pc-anim .pc-scan .t2 { animation:pcT2 4s infinite; }
.pc-anim .pc-scan .t3 { animation:pcT3 4s infinite; }
@keyframes pcT1 { 0%{ width:0; animation-timing-function:steps(15,end) }
22%{ width:15ch } 100%{ width:15ch } }
@keyframes pcT2 { 0%{ width:0 }
22%{ width:0; animation-timing-function:steps(12,end) }
40%{ width:12ch } 100%{ width:12ch } }
@keyframes pcT3 { 0%{ width:0 }
40%{ width:0; animation-timing-function:steps(14,end) }
60%{ width:14ch } 100%{ width:14ch } }
@media (max-width: 899px) {
.pc-row.pc-scan { align-items: flex-start; }
.pc-row.pc-scan .pc-mono { min-width:0; }
}
.pc-tag { font-size:0.582rem; font-weight:500; letter-spacing:0.05em; padding:2px 8px;
border-radius:100px; white-space:nowrap; flex-shrink:0; line-height:1.5; }
.pc-tag.g{color:var(--st-green);background:rgba(var(--st-green-rgb),.16);border:0.5px solid rgba(var(--st-green-rgb),.34)}
.pc-tag.b{color:var(--st-blue);background:rgba(var(--st-blue-rgb),.16);border:0.5px solid rgba(var(--st-blue-rgb),.34)}
.pc-tag.a{color:var(--st-amber);background:rgba(var(--st-amber-rgb),.16);border:0.5px solid rgba(var(--st-amber-rgb),.34)}
.pc-tag.v{color:var(--st-violet);background:rgba(var(--st-violet-rgb),.16);border:0.5px solid rgba(var(--st-violet-rgb),.34)}
.pc-tag.c{color:var(--bt-coral);background:rgba(var(--bt-coral-rgb),.18);border:0.5px solid rgba(var(--bt-coral-rgb),.34)}
.pc-tag.s{color:var(--st-slate);background:rgba(var(--st-slate-rgb),.16);border:0.5px solid rgba(var(--st-slate-rgb),.34)}
.pc-tag.gold{color:var(--st-gold);background:rgba(var(--st-gold-rgb),.18);border:0.5px solid rgba(var(--st-gold-rgb),.36)}
.pc-chipset { display:flex; gap:6px; flex-wrap:wrap; }
.pc-rule { display:flex; align-items:flex-start; gap:7px; font-size:0.708rem; line-height:1.45;
color:var(--text-2); padding:5px 8px; border-radius:8px;
background:var(--surface-2); border:1px solid var(--border); }
.pc-rule-d { width:5px; height:5px; border-radius:50%; background:var(--fc);
flex-shrink:0; margin-top:6px; }
.pc-prog { height:6px; border-radius:100px; background:rgba(var(--fg-rgb),0.10); overflow:hidden; }
.pc-prog i { display:block; height:100%; border-radius:100px; font-style:normal;
background:linear-gradient(90deg,var(--fc),rgba(var(--ft),0.5)); }
.pc-bub { font-size:0.737rem; line-height:1.5; padding:9px 11px; border-radius:11px; max-width:90%; }
.pc-bub.me { background:rgba(var(--ft),0.14); border:1px solid rgba(var(--ft),0.26); color:var(--text-1); }
.pc-bub.them { background:var(--surface-2); border:1px solid var(--border); color:var(--text-2); margin-left:auto; }
.pc-hi { background:rgba(var(--bt-amber-rgb),0.28); border-radius:3px; padding:0 3px; color:var(--text-1); }
.pc-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.pc-cal i { font-style:normal; font-size:0.718rem; text-align:center; padding:4px 0; border-radius:6px;
color:var(--text-3); background:var(--surface-2); border:1px solid var(--border); }
.pc-cal i.sel { color:var(--fc); background:rgba(var(--ft),0.2); border-color:rgba(var(--ft),0.4); font-weight:800;
animation:pcSel 7s ease-in-out infinite; }
@keyframes pcIn { 0%,8%{opacity:0;transform:translateY(7px)} 16%,92%{opacity:1;transform:none} 100%{opacity:1} }
@keyframes pcCycle{ 0%,20%{opacity:1} 32%,100%{opacity:.32} }
@keyframes pcFill { 0%{width:0} 55%,100%{width:var(--w,70%)} }
@keyframes pcCaret{ 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes pcType { 0%{width:0} 60%,100%{width:100%} }
@keyframes pcSel { 0%,30%{opacity:1} 40%{opacity:.55} 55%,100%{opacity:1} }
@keyframes pcSwap { 0%,45%{opacity:1} 55%,100%{opacity:0} }
@keyframes pcSwapB{ 0%,45%{opacity:0} 55%,100%{opacity:1} }
@keyframes pcScan { 0%{transform:translateX(-100%)} 100%{transform:translateX(320%)} }
@keyframes pcPop { 0%,10%{opacity:0;transform:translateY(4px)} 20%,90%{opacity:1;transform:none} 100%{opacity:1} }
.pc-anim .a1{animation:pcIn 4s ease-in-out infinite}
.pc-anim .a2{animation:pcIn 4s ease-in-out infinite .45s}
.pc-anim .a3{animation:pcIn 4s ease-in-out infinite .9s}
.pc-anim .a4{animation:pcIn 4s ease-in-out infinite 1.35s}
.pc-anim .p1{animation:pcPop 4s ease-in-out infinite .25s}
.pc-anim .p2{animation:pcPop 4s ease-in-out infinite .7s}
.pc-anim .p3{animation:pcPop 4s ease-in-out infinite 1.15s}
.pc-anim .p4{animation:pcPop 4s ease-in-out infinite 1.6s}
.pc-anim .cy1{animation:pcCycle 5s ease-in-out infinite}
.pc-anim .cy2{animation:pcCycle 5s ease-in-out infinite 1s}
.pc-anim .cy3{animation:pcCycle 5s ease-in-out infinite 2s}
.pc-anim .cy4{animation:pcCycle 5s ease-in-out infinite 3s}
.pc-anim .cy5{animation:pcCycle 5s ease-in-out infinite 4s}
.pc-anim .fill{animation:pcFill 4s cubic-bezier(.3,1,.4,1) infinite}
.pc-anim .typing{display:inline-block;overflow:hidden;white-space:nowrap;
animation:pcType 4s steps(41,end) infinite;vertical-align:bottom}
.pc-anim .swapA{animation:pcSwap 4s ease-in-out infinite}
.pc-anim .swapB{animation:pcSwapB 4s ease-in-out infinite}
.pc-scan { position:relative; overflow:hidden; }
.pc-scan::before { content:''; position:absolute; inset:0; pointer-events:none; width:34%;
background:linear-gradient(90deg,transparent,rgba(var(--ft),0.22),transparent);
animation:pcScan 2.4s linear infinite; }
@media (prefers-reduced-motion: reduce){
.pc-anim *,.pc-scan::before,.pc-cal i.sel{animation:none!important}
.pc-anim .typing{width:100%!important}
.pc-anim .pc-scan .typing{width:auto!important}
}
@media (max-width:1020px){ .pc-c.s2,.pc-c.s3{grid-column:span 3} .pc-c:last-child{grid-column:span 6} }
@media (max-width:680px){ .pc-c.s2,.pc-c.s3,.pc-c:last-child{grid-column:span 6} }
.pc-face { width:26px; height:26px; border-radius:50%; flex-shrink:0; display:block;
box-shadow:0 0 0 1px rgba(var(--fg-rgb),0.08); }
.pc-src { font-size:0.66rem; font-weight:500; padding:3px 9px; border-radius:7px; white-space:nowrap;
border:0.5px solid; letter-spacing:0.015em; line-height:1.5; }
.pc-src.s-blue { color:var(--st-blue); background:rgba(var(--st-blue-rgb),.14); border-color:rgba(var(--st-blue-rgb),.32) }
.pc-src.s-teal { color:var(--st-teal); background:rgba(var(--st-teal-rgb),.14); border-color:rgba(var(--st-teal-rgb),.32) }
.pc-src.s-violet{ color:var(--st-violet); background:rgba(var(--st-violet-rgb),.14); border-color:rgba(var(--st-violet-rgb),.32) }
.pc-src.s-amber { color:var(--st-amber); background:rgba(var(--st-amber-rgb),.16); border-color:rgba(var(--st-amber-rgb),.34) }
.pc-src.s-green { color:var(--st-green); background:rgba(var(--st-green-rgb),.14); border-color:rgba(var(--st-green-rgb),.32) }
.pc-src.s-coral { color:var(--bt-coral); background:rgba(var(--bt-coral-rgb),.16); border-color:rgba(var(--bt-coral-rgb),.32) }
.pc-src.s-slate { color:var(--st-slate); background:rgba(var(--st-slate-rgb),.13); border-color:rgba(var(--st-slate-rgb),.30) }
.pc-scanbox { position:relative; border-radius:11px; overflow:hidden;
background:var(--surface-2); border:1px solid var(--border); padding:0; }
.pc-scanline { position:absolute; left:0; right:0; height:34%; z-index:2; pointer-events:none;
background:linear-gradient(180deg, transparent, rgba(var(--ft),0.22) 45%, rgba(var(--ft),0.34) 50%, rgba(var(--ft),0.22) 55%, transparent);
border-top:1px solid rgba(var(--ft),0.5); border-bottom:1px solid rgba(var(--ft),0.5);
animation:pcScanY 2.6s ease-in-out infinite; }
@keyframes pcScanY { 0%,100%{ top:-34% } 50%{ top:100% } }
.pc-prof { position:relative; }
.pc-prof-cover { height:30px; background:linear-gradient(120deg, rgba(var(--ft),0.30), rgba(var(--ft),0.12)); }
.pc-prof-av { position:absolute; left:14px; top:16px; width:34px!important; height:34px!important;
box-shadow:0 0 0 2px var(--surface-2); }
.pc-prof-body { padding:20px 14px 13px; display:flex; flex-direction:column; gap:2px; }
.pc-lines { display:flex; flex-direction:column; gap:5px; margin-top:9px; }
.pc-lines i { display:block; height:6px; border-radius:100px; background:rgba(var(--fg-rgb),0.10); }
.pc-badge { width:26px; height:26px; border-radius:7px; flex-shrink:0;
display:flex; align-items:center; justify-content:center; border:1px solid; }
.pc-badge .pc-fi { width:14px; height:14px; }
.pc-type { font-family:ui-monospace,Menlo,monospace; font-size:0.582rem; font-weight:500;
letter-spacing:0.06em; padding:2px 6px; border-radius:5px; flex-shrink:0; border:0.5px solid; }
.pc-type.t-web { color:var(--bt-blue); background:rgba(var(--bt-blue-rgb),.12); border-color:rgba(var(--bt-blue-rgb),.28) }
.pc-type.t-doc { color:var(--ic-2); background:rgba(var(--ic2-rgb),.12); border-color:rgba(var(--ic2-rgb),.28) }
.pc-type.t-vid { color:var(--bt-coral); background:rgba(var(--bt-coral-rgb),.14); border-color:rgba(var(--bt-coral-rgb),.30) }
.pc-badge.b-web { color:var(--bt-blue); background:rgba(var(--bt-blue-rgb),.14); border-color:rgba(var(--bt-blue-rgb),.30) }
.pc-badge.b-doc { color:var(--ic-2); background:rgba(var(--ic2-rgb),.14); border-color:rgba(var(--ic2-rgb),.30) }
.pc-badge.b-vid { color:var(--bt-coral); background:rgba(var(--bt-coral-rgb),.16); border-color:rgba(var(--bt-coral-rgb),.32) }
.pc-qr { display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:9px;
background:var(--surface-2); border:1px solid var(--border); }
.pc-quote { font-size:0.737rem; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-qr .pc-src { margin-left:auto; }
.pc-cal i.hd { background:transparent; border-color:transparent; color:var(--text-3); font-weight:700; }
.pc-cal i.sel { animation:pcDay 4s ease-in-out infinite; position:relative; }
.pc-cal i.sel.tagged { z-index:5; }
.pc-cal i.sel.tagged::after {
content:'Booked';
position:absolute; left:64%; bottom:74%; z-index:6;
transform-origin:bottom left;
font-size:0.54rem; font-weight:500; letter-spacing:0.05em;
padding:2px 8px; border-radius:100px; white-space:nowrap; line-height:1.5;
color:var(--on-glass-tag);
background:var(--glass-tag-bg);
border:0.5px solid var(--glass-tag-br);
box-shadow:0 6px 18px rgba(var(--shadow-rgb),0.30);
backdrop-filter:blur(8px) saturate(140%); -webkit-backdrop-filter:blur(8px) saturate(140%);
animation:pcTagPop 4s ease-in-out infinite;
}
@keyframes pcTagPop {
0%,6% { opacity:0; transform:translateY(5px) scale(.82) }
16%,80% { opacity:1; transform:none }
92%,100%{ opacity:0; transform:translateY(-4px) scale(.92) }
}
.pc-cal i.d1{animation-delay:.1s} .pc-cal i.d2{animation-delay:.7s} .pc-cal i.d3{animation-delay:1.3s}
.pc-cal i.d4{animation-delay:1.9s} .pc-cal i.d5{animation-delay:2.5s}
@keyframes pcDay { 0%,6%{opacity:.25} 14%,88%{opacity:1} 100%{opacity:1} }
.pc-prog i.bar-a { background:linear-gradient(90deg,var(--bar-green),rgba(var(--bar-green-rgb),.55)) }
.pc-prog i.bar-b { background:linear-gradient(90deg,var(--bar-green),rgba(var(--bar-green-rgb),.55)) }
.pc-prog i.bar-c { background:linear-gradient(90deg,var(--bar-amber),rgba(var(--bar-amber-rgb),.55)) }
.pc-c::before { content:''; position:absolute; left:-30px; top:-40px; width:200px; height:150px;
pointer-events:none; border-radius:50%; z-index:0;
background:radial-gradient(circle at 30% 30%, rgba(var(--ft),0.20), transparent 68%);
filter:blur(6px); opacity:.85; }
.pc-c.t-blue{--ft:var(--bt-blue-rgb);--fc:var(--bt-blue)}
.pc-c.t-violet{--ft:var(--ic2-rgb);--fc:var(--ic-2)}
.pc-c.t-amber{--ft:var(--bt-amber-rgb);--fc:var(--bt-amber)}
.pc-c.t-green{--ft:var(--bt-green-rgb);--fc:var(--bt-green)}
.pc-c.t-coral{--ft:var(--bt-coral-rgb);--fc:var(--bt-coral)}
.theme-toggle{
position:relative; width:52px; height:28px; flex:0 0 auto;
vertical-align:middle; align-self:center; margin:0;
border-radius:100px; cursor:pointer; padding:0;
background:var(--surface-3); border:1px solid var(--border-light);
transition:background .3s ease, border-color .3s ease;
display:inline-flex; align-items:center;
}
.theme-toggle:hover{ border-color:var(--accent); }
.theme-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.theme-toggle .tt-knob{
position:absolute; top:2px; left:2px; width:22px; height:22px;
border-radius:50%; background:var(--fill-1);
display:flex; align-items:center; justify-content:center;
transition:transform .32s cubic-bezier(.16,1,.3,1), background .3s ease;
}
[data-theme="dark"] .theme-toggle .tt-knob{ transform:translateX(24px); }
.theme-toggle svg{ width:13px; height:13px; color:var(--on-accent); display:block; }
.theme-toggle .tt-moon{ display:none; }
[data-theme="dark"] .theme-toggle .tt-sun{ display:none; }
[data-theme="dark"] .theme-toggle .tt-moon{ display:block; }
@media (prefers-reduced-motion: reduce){
.theme-toggle .tt-knob{ transition:none; }
}
@media (max-width: 768px){
.footer-grid{ grid-template-columns: 1fr 1fr !important; gap: 26px 18px !important; }
.footer-brand{ grid-column: 1 / -1; }
.footer-col a{ padding: 9px 0; }
.am-conn{ display: flex !important; width: 100% !important; padding: 4px 0 !important;
justify-content: center !important; align-items: center !important;
flex-direction: row !important; min-height: 54px !important; }
.am-rails{ display: flex !important; flex-direction: row !important;
justify-content: center !important; align-items: stretch !important;
gap: 26px !important; height: 54px !important; width: auto !important; }
.am-rail{ width: 2px !important; height: 54px !important; flex: 0 0 2px !important;
background: rgba(var(--accent-rgb),0.22) !important; overflow: visible !important; }
.am-conn .am-rail::after{
width: 4px; height: 22px;
left: 50%; margin-left: -2px; top: -22px;
transform: none;
background: linear-gradient(180deg, transparent, var(--accent), transparent);
animation-name: am-travel-v; animation-duration: 2.6s;
}
.am-conn .am-rail.rev::after{ animation-name: am-travel-v-rev; }
}
@keyframes am-travel-v{ 0%{ top: -22px; opacity: 0 } 12%{ opacity: 1 } 88%{ opacity: 1 } 100%{ top: 100%; opacity: 0 } }
@keyframes am-travel-v-rev{ 0%{ top: 100%; opacity: 0 } 12%{ opacity: 1 } 88%{ opacity: 1 } 100%{ top: -22px; opacity: 0 } }
.nav-cta .btn{ line-height:1.2; white-space:nowrap; }
@media (max-width: 768px){
.nav-links.active{ padding-bottom: 20px; }
.nav-links.active .nav-cta{
display:block; width:100%; margin-top:8px; padding-top:14px;
border-top:1px solid var(--border);
}
.nav-links.active .nav-cta .btn{
display:flex; box-sizing:border-box; width:100%;
min-height:46px; height:auto; padding:12px 20px;
line-height:1.2; font-size:0.9rem; border-radius:12px;
align-items:center; justify-content:center; text-align:center;
}
}
.am-mk{ width:26px; height:26px; border-radius:8px; flex-shrink:0;
display:inline-flex; align-items:center; justify-content:center;
background:rgba(var(--fg-rgb),0.05); border:1px solid var(--border); color:var(--text-2); }
.am-mk svg{ width:15px; height:15px; display:block; }
.am-mk.mk-claude{ color:#C2410C; background:rgba(194,65,12,0.09); border-color:rgba(194,65,12,0.22); }
.am-mk.mk-openai{ color:#0F766E; background:rgba(15,118,110,0.09); border-color:rgba(15,118,110,0.22); }
.am-mk.mk-cursor{ color:#475569; background:rgba(71,85,105,0.10); border-color:rgba(71,85,105,0.22); }
.am-mk.mk-n8n{ color:#BE185D; background:rgba(190,24,93,0.09); border-color:rgba(190,24,93,0.22); }
.am-mk.mk-make{ color:#6D28D9; background:rgba(109,40,217,0.09); border-color:rgba(109,40,217,0.22); }
.am-mk.mk-zapier{ color:#B45309; background:rgba(180,83,9,0.10); border-color:rgba(180,83,9,0.24); }
[data-theme="dark"] .am-mk.mk-claude{ color:#FDBA9C; background:rgba(253,141,104,0.13); border-color:rgba(253,141,104,0.30); }
[data-theme="dark"] .am-mk.mk-openai{ color:#5EEAD4; background:rgba(94,234,212,0.11); border-color:rgba(94,234,212,0.28); }
[data-theme="dark"] .am-mk.mk-cursor{ color:#CBD5E1; background:rgba(203,213,225,0.10); border-color:rgba(203,213,225,0.24); }
[data-theme="dark"] .am-mk.mk-n8n{ color:#F9A8D4; background:rgba(249,168,212,0.11); border-color:rgba(249,168,212,0.28); }
[data-theme="dark"] .am-mk.mk-make{ color:#C4B5FD; background:rgba(196,181,253,0.11); border-color:rgba(196,181,253,0.28); }
[data-theme="dark"] .am-mk.mk-zapier{ color:#FCD34D; background:rgba(252,211,77,0.11); border-color:rgba(252,211,77,0.28); }
@keyframes am-hub-float{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-7px) } }
.am-hub{ animation: am-hub-float 5.4s ease-in-out infinite; will-change: transform; }
@media (max-width: 768px){
}
@media (prefers-reduced-motion: reduce){
.am-hub{ animation: none; }
}
.am-mk .mk-img{ width:16px; height:16px; object-fit:contain; display:block; }
.am-mk .mk-img + .mk-fb{ display:none; }
.am-mk:has(.mk-img){ background:rgba(var(--fg-rgb),0.05); border-color:var(--border); }
@media (max-width: 768px){
.dash-grid{ grid-template-columns: 44px minmax(0,1fr); gap: 10px; }
.dash-sidebar{
display: flex; flex-direction: column; align-items: center;
width: 44px; padding: 10px 0; gap: 2px; border-radius: 10px;
}
.dash-sidebar-logo{
font-size: 0; gap: 0; justify-content: center; margin-bottom: 6px;
}
.dash-sidebar-logo .mini-mark{ margin: 0; }
.dash-nav-item{
font-size: 0; gap: 0; justify-content: center;
width: 32px; padding: 7px 0; border-radius: 8px;
}
.dash-nav-item svg{ width: 15px; height: 15px; flex: 0 0 15px; }
}
@media (max-width: 768px){
.lead-results{ max-height: none; overflow: visible; }
#view0 .lead-result-row[data-i="3"]{ display: none; }
}
@media (max-width: 768px){
.vd-flow-row.vd-flow-row-b{ align-items: stretch; }
.vd-flow-row-b > .vd-stage{ align-self: stretch; justify-content: center; }
}
.section-title em,
.section-title .em{
font-style: normal; background: none;
color: var(--head-grad-end);
-webkit-text-fill-color: var(--head-grad-end);
}
@keyframes emDrift{ from{ background-position: 0% center } to{ background-position: 100% center } }
.section-title em.em-grad{
background: linear-gradient(115deg,
var(--text-1) 0%, var(--text-1) 22%, var(--head-grad-end) 62%, var(--text-1) 100%);
background-size: 150% 100%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
animation: emDrift 12s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce){ .section-title em.em-grad{ animation: none } }
:root{ --ip-a:#CE3346; --ip-b:#D9662F; }
[data-theme="dark"]{ --ip-a:#FF5F6D; --ip-b:#FD8D68; }
@keyframes emShine{ from{ background-position: 0% center } to{ background-position: 100% center } }
.section-title .em-anim{
background: linear-gradient(100deg,
var(--ip-a) 0%, var(--ip-b) 30%, var(--ip-a) 55%, var(--ip-b) 80%, var(--ip-a) 100%);
background-size: 220% 100%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
animation: emShine 7s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce){ .section-title .em-anim{ animation: none } }
.agentlog{ padding: 4px 0 30px; position: relative; }
.al-link{ display:flex; justify-content:center; margin:0 0 18px; }
.al-link-line{ width:2px; height:52px; border-radius:2px;
background:linear-gradient(180deg, transparent, rgba(var(--accent-rgb),0.42), transparent); }
.al-header{ text-align:center; max-width:660px; margin:0 auto 18px; }
.al-intro{ font-size:1.02rem; line-height:1.6; color:var(--text-2); margin:0 0 16px; text-wrap:balance; }
.li-legend{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.li-panel{ max-width:760px; margin:0 auto; border:1px solid var(--border); border-radius:16px;
background:var(--surface-2); overflow:hidden; box-shadow:0 4px 22px rgba(var(--shadow-rgb),0.06); }
.li-bar{ display:flex; align-items:center; gap:9px; padding:12px 18px; border-bottom:1px solid var(--border);
background:rgba(var(--fg-rgb),0.02); }
.li-live{ width:7px; height:7px; border-radius:50%; background:var(--st-green);
box-shadow:0 0 8px rgba(var(--st-green-rgb),0.7); animation: liPulse 2s ease-in-out infinite; }
@keyframes liPulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.35; transform:scale(.82) } }
.li-title{ font-size:0.7rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-2); }
.li-count{ margin-left:auto; font-size:0.66rem; color:var(--text-3); }
.li-row{ display:grid; grid-template-columns:52px 12px 1fr; align-items:start; gap:10px;
padding:14px 18px; border-bottom:1px solid var(--border); position:relative; overflow:hidden;
transition: background .45s ease; }
.li-row:last-child{ border-bottom:0; }
.li-row::before{ content:''; position:absolute; inset:0; pointer-events:none; }
.li-fwd::before{ background:linear-gradient(90deg, rgba(var(--st-green-rgb),0.13), transparent 46%); }
.li-need::before{ background:linear-gradient(90deg, rgba(var(--warn-rgb),0.14), transparent 46%); }
.li-row::after{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
background:var(--st-green); opacity:0; transform:scaleY(.2); transform-origin:top;
transition: opacity .3s ease, transform .45s cubic-bezier(.3,1,.4,1); }
.li-need::after{ background:var(--warning); }
.li-row.reveal{ transition-delay: calc(var(--li-i,0) * 90ms); }
.li-time{ font:500 0.66rem/1.7 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--text-3); position:relative; z-index:1; }
.li-dot{ width:8px; height:8px; border-radius:50%; margin-top:5px; position:relative; z-index:1;
transition: box-shadow .4s ease; }
.li-fwd .li-dot{ background:var(--dot-fwd); box-shadow:0 0 0 3px rgba(var(--dot-fwd-rgb),0.22); }
.li-need .li-dot{ background:var(--dot-need); box-shadow:0 0 0 3px rgba(var(--dot-need-rgb),0.22); }
.li-body{ min-width:0; position:relative; z-index:1; }
.li-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:3px; }
.li-ev{ font-size:0.9rem; font-weight:600; color:var(--text-1); letter-spacing:-0.012em; }
.li-tag{ font-size:0.58rem; font-weight:600; letter-spacing:0.05em; padding:3px 10px; border-radius:100px; white-space:nowrap; }
.li-tag-fwd{ color:var(--st-green); background:rgba(var(--st-green-rgb),0.15); border:1px solid rgba(var(--st-green-rgb),0.42); }
.li-tag-need{ color:var(--warning); background:rgba(var(--warn-rgb),0.15); border:1px solid rgba(var(--warn-rgb),0.42); }
.li-desc{ font-size:0.83rem; line-height:1.55; color:var(--text-3); margin:0; min-height:1.55em; }
.li-caret{ display:inline-block; width:2px; height:0.95em; vertical-align:-0.12em; margin-left:2px;
background:var(--st-green); animation: liCaret 1s steps(1) infinite; }
.li-need .li-caret{ background:var(--warning); }
@keyframes liCaret{ 0%,49%{ opacity:1 } 50%,100%{ opacity:0 } }
@media (prefers-reduced-motion: reduce){
.li-live, .li-caret{ animation:none }
.li-row{ transition:none }
}
@media (max-width:768px){
.agentlog{ padding:2px 0 20px; }
.al-link-line{ height:38px; }
.al-intro{ font-size:0.94rem; }
.li-row{ grid-template-columns:44px 10px 1fr; gap:8px; padding:12px 13px; }
.li-ev{ font-size:0.85rem; }
.li-desc{ font-size:0.79rem; }
.li-panel{ border-radius:13px; }
}
.li-ico{ width:15px; height:15px; flex:0 0 15px; display:inline-flex; color:var(--text-3); }
.li-ico svg{ width:15px; height:15px; display:block; }
.li-fwd .li-ico{ color:var(--st-green); }
.li-need .li-ico{ color:var(--warning); }
.li-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.li-chip{ display:inline-flex; align-items:center; gap:5px; font-size:0.62rem; font-weight:500;
padding:3px 8px; border-radius:7px; color:var(--text-3);
background:rgba(var(--fg-rgb),0.045); border:1px solid var(--border); white-space:nowrap; }
.li-chip svg{ width:11px; height:11px; flex:0 0 11px; }
.li-fwd .li-chip svg{ color:var(--st-green); }
.li-need .li-chip svg{ color:var(--warning); }
@media (max-width:768px){
.am-hub{ width:100%; max-width:212px; margin:0 auto; aspect-ratio:1/1;
display:flex; flex-direction:column; align-items:center; justify-content:center; }
.am-hub-ring{ inset:-7px; border-radius:20px; }
.li-chips{ gap:5px; }
.li-chip{ font-size:0.58rem; padding:2px 7px; }
}
@media (max-width:480px){ .am-hub{ max-width:190px; } }
.li-actor{
margin-left:auto; display:inline-flex; align-items:center; gap:5px;
font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
border-radius:100px; white-space:nowrap;
}
.li-actor .ac-lead{ color:var(--text-3); }
.li-actor .ac-agent{ color:var(--accent-light); }
.li-actor-arw{ width:10px; height:10px; flex:0 0 10px; opacity:.55; }
.li-actor-solo{ background:rgba(var(--accent-rgb),0.06); border-color:rgba(var(--accent-rgb),0.20); }
@media (max-width:768px){
.li-actor{ margin-left:0; font-size:0.52rem; padding:2px 7px; }
.li-head{ gap:7px; }
}
.li-row{ padding:11px 18px; gap:9px; }
.li-ev{ font-size:0.855rem; }
.li-desc{ font-size:0.795rem; line-height:1.5; min-height:1.5em; }
.li-time{ font-size:0.63rem; line-height:1.6; }
.li-head{ margin-bottom:2px; gap:8px; }
.li-chips{ margin-top:5px; gap:5px; }
.li-bar{ padding:10px 18px; }
.li-tag{
display:inline-flex; align-items:center; justify-content:center;
line-height:1; padding:4px 9px 4px; font-size:0.565rem;
}
.li-chip{
font-size:0.6rem; padding:3px 8px; line-height:1.25;
color:var(--text-2);
background:var(--surface-2);
border:1px solid var(--border-light);
box-shadow:0 1px 2px rgba(var(--shadow-rgb),0.04);
}
.li-chip svg{ width:10.5px; height:10.5px; flex:0 0 10.5px; }
.li-actor{
font-size:0.53rem; padding:3px 8px; line-height:1;
color:var(--text-2);
background:rgba(var(--fg-rgb),0.05);
border:1px solid rgba(var(--fg-rgb),0.16);
}
.li-actor .ac-lead{ color:var(--text-2); }
.li-actor .ac-agent{ color:var(--accent-light); font-weight:700; }
.li-actor-arw{ opacity:.75; }
.li-actor-solo{ background:rgba(var(--accent-rgb),0.10); border-color:rgba(var(--accent-rgb),0.34); }
[data-theme="dark"] .li-chip{ background:rgba(var(--fg-rgb),0.07); border-color:rgba(var(--fg-rgb),0.18); }
[data-theme="dark"] .li-actor{ background:rgba(var(--fg-rgb),0.06); border-color:rgba(var(--fg-rgb),0.20); }
@media (max-width:768px){
.li-row{ padding:10px 13px; }
.li-ev{ font-size:0.82rem; }
.li-desc{ font-size:0.765rem; }
.li-chip{ font-size:0.57rem; padding:2px 7px; }
.li-actor{ font-size:0.5rem; padding:2px 7px; }
}
.li-row{ opacity:0; transform:translateY(7px); transition:opacity .42s ease, transform .42s cubic-bezier(.3,1,.4,1), background .45s ease; }
.li-row.in{ opacity:1; transform:none; }
.li-row .li-chips{ opacity:0; transform:translateY(3px); transition:opacity .38s ease .05s, transform .38s ease .05s; }
.li-row.settled .li-chips{ opacity:1; transform:none; }
.li-row.typing{ background:rgba(var(--st-green-rgb),0.10); }
.li-row.typing.li-need{ background:rgba(var(--warn-rgb),0.11); }
.li-row.typing::after{ opacity:1; transform:scaleY(1); }
.li-row.typing .li-dot{ box-shadow:0 0 0 4px rgba(var(--dot-fwd-rgb),0.30); }
.li-row.typing.li-need .li-dot{ box-shadow:0 0 0 4px rgba(var(--dot-need-rgb),0.30); }
.li-tag, .li-actor{ animation:none !important; }
@media (prefers-reduced-motion: reduce){
.li-row, .li-row .li-chips{ opacity:1; transform:none; transition:none; }
}
:root{
--sage-bg:#DBF5EC; --sage-br:#84DEC2; --sage-tx:#075740; --sage-ic:#12A07C; --dot-fwd:#12A07C; --dot-fwd-rgb:18,160,124; --dot-need:#C9761F; --dot-need-rgb:201,118,31; --sage-dc:#075740;
--sage-bg2:#CBF0E1; --sage-br2:#5FD2AE;
}
[data-theme="dark"]{
--sage-bg:rgba(18,160,124,0.15); --sage-br:rgba(18,160,124,0.34);
--sage-tx:#7FE3C2; --sage-ic:#5FD2AE; --dot-fwd:#5FD2AE; --dot-fwd-rgb:95,210,174; --dot-need:#FBBF24; --dot-need-rgb:251,191,36; --sage-dc:#79DDBC;
--sage-bg2:rgba(18,160,124,0.23); --sage-br2:rgba(18,160,124,0.48);
}
.comp-step.sig-handled{ background:var(--sage-bg) !important; border-color:var(--sage-br) !important; }
.comp-step.sig-won{ background:var(--sage-bg2) !important; border-color:var(--sage-br2) !important; }
.sig-handled .comp-step-icon, .sig-won .comp-step-icon{
background:var(--sage-br) !important; color:var(--sage-ic) !important; box-shadow:none !important; }
.sig-won .comp-step-icon{ background:var(--sage-br2) !important; }
.sig-handled .comp-step-title, .sig-won .comp-step-title{ color:var(--sage-tx) !important; }
.sig-handled .comp-step-desc, .sig-won .comp-step-desc{ color:var(--sage-dc) !important; }
.sig-handled .comp-step-tick svg, .sig-won .comp-step-tick svg{ color:var(--sage-ic) !important; }
.sig-handled .comp-step-flash, .sig-won .comp-step-flash{ background:rgba(18,160,124,0.13) !important; }
.overhaul{ padding: 26px 0; }
.ov-wrap{ max-width:1000px; margin:0 auto; }
.ov-c{ background:var(--surface-2); border:1px solid var(--border); border-radius:13px;
padding:12px 14px; box-shadow:0 2px 10px rgba(var(--shadow-rgb),0.05); }
.ov-c-t{ font-size:0.86rem; font-weight:600; color:var(--text-1); letter-spacing:-0.012em; margin-bottom:3px; }
.ov-c-d{ font-size:0.76rem; line-height:1.5; color:var(--text-3); }
.ov-c.ok{ border-color:rgba(var(--st-green-rgb),0.34); background:rgba(var(--st-green-rgb),0.05); }
.ov-c.wr{ border-color:rgba(var(--warn-rgb),0.32); background:rgba(var(--warn-rgb),0.05); }
.ov-hub{ width:var(--hs); height:var(--hs); flex:0 0 var(--hs); position:relative; border-radius:50%;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
background:rgba(var(--accent-rgb),0.08); border:1px solid rgba(var(--accent-rgb),0.30);
animation: ovFloat 5.6s ease-in-out infinite; }
@keyframes ovFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
.ov-hub-ring{ position:absolute; inset:-8px; border-radius:50%;
border:1px solid rgba(var(--accent-rgb),0.20); animation: ovRing 3.2s ease-out infinite; }
@keyframes ovRing{ 0%{ transform:scale(.94); opacity:.9 } 100%{ transform:scale(1.14); opacity:0 } }
.ov-hub-in{ width:22px; height:22px; color:var(--accent-light); display:block; }
.ov-hub-in svg{ width:22px; height:22px; display:block; }
.ov-hub-lb{ font-size:0.5rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-light); }
.ov-line{ display:block; position:relative; }
.ov-v{ width:2px; height:38px; margin:10px auto 0;
background-image:
linear-gradient(180deg, rgba(var(--accent-rgb),0) 0%, var(--accent-light) 50%, rgba(var(--accent-rgb),0) 100%),
repeating-linear-gradient(180deg, rgba(var(--accent-rgb),0.30) 0 4px, transparent 4px 9px);
background-size:2px 20px, 2px 100%; background-repeat:no-repeat, repeat-y;
background-position:0 -20px, 0 0; animation: ovDotV 2.1s linear infinite; }
@keyframes ovDotV{ from{ background-position:0 -20px, 0 0 } to{ background-position:0 100%, 0 0 } }
.ov-5{ display:flex; flex-direction:column; align-items:center; }
.ov-top{ display:flex; flex-direction:column; align-items:center; }
.ov-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%; margin-top:6px; }
@media (prefers-reduced-motion: reduce){
.ov-hub, .ov-hub-ring, .ov-line{ animation:none }
}
@media (max-width:820px){
.ov-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
.ov-grid{ grid-template-columns:1fr; }
.ov-c-d{ font-size:0.73rem; }
.overhaul{ padding:20px 0; }
}
.ov-c-h{ display:flex; align-items:center; gap:9px; margin-bottom:5px; }
.ov-ic{ width:30px; height:30px; flex:0 0 30px; border-radius:9px;
display:flex; align-items:center; justify-content:center; }
.ov-ic svg{ width:15px; height:15px; }
.ov-c{ display:flex; flex-direction:column; min-height:104px; height:100%; }
.ov-c-d{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
overflow:hidden; margin-top:auto; }
.ov-grid{ grid-auto-rows:1fr; align-items:stretch; }
@media (max-width:820px){
.ov-c{ min-height:96px; }
}
@media (max-width:520px){
.ov-c{ min-height:auto; }
.ov-c-d{ -webkit-line-clamp:3; }
}
.ov-c-d{ padding-left:39px; }
@media (max-width:820px){ .ov-ic{ width:28px; height:28px; flex:0 0 28px; } .ov-c-d{ padding-left:37px; } }
@media (max-width:520px){ .ov-ic{ width:26px; height:26px; flex:0 0 26px; } .ov-c-d{ padding-left:0; } }
.section-title .em-green{
font-style:normal;
background:linear-gradient(105deg, #3F6B4A 0%, #2F6A61 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
}
[data-theme="dark"] .section-title .em-green{
background:linear-gradient(105deg, #8FBE95 0%, #6FC3B6 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent;
}
.overhaul, .agentlog{ background: var(--bg-1); position: relative; z-index: 1; }
.overhaul{ padding: 40px 0 26px; }
.agentlog{ padding: 10px 0 90px; }
.ov-c-d{ margin-top:0; }
.ov-c{ justify-content:flex-start; }
.ov-grid{ gap:12px; }
.ov-ic-ok{ background:rgba(var(--st-green-rgb),0.16); color:var(--st-green); }
.ov-ic-wr{ background:rgba(var(--warn-rgb),0.16); color:var(--warning); }
.li-chip-hero{
color:var(--sage-tx);
background:var(--sage-bg);
border-color:var(--sage-br);
font-weight:600;
}
.li-chip-hero svg{ color:var(--sage-dc); }
.li-actor, .li-actor span{ line-height:1; }
.li-actor{ align-items:center; padding-top:4px; padding-bottom:4px; }
.comp-step-icon, .comp-step-content{ position:relative; z-index:2; }
.comp-step-tick{ z-index:2; top:50%; transform:translateY(-50%); }
.comp-step-flash{ z-index:1; }
.pastel-layer::before{ z-index:0; }
.sig-handled.pastel-layer::before{
background:linear-gradient(135deg, rgba(18,160,124,0.10), rgba(18,160,124,0.05)) !important;
border:1px solid rgba(18,160,124,0.20) !important; }
.sig-won.pastel-layer::before{
background:linear-gradient(135deg, rgba(18,160,124,0.16), rgba(18,160,124,0.08)) !important;
border:1px solid rgba(18,160,124,0.28) !important; }
.sig-handled .comp-step-tick, .sig-won .comp-step-tick{
background:var(--sage-bg) !important; border-color:var(--sage-br2) !important; }
.ov-c{ background:linear-gradient(180deg,#FFFFFF 0%,#F7F3EC 100%); border:1px solid #EAE4D9; }
.ov-c.ok, .ov-c.wr{ background:linear-gradient(180deg,#FFFFFF 0%,#F7F3EC 100%); border-color:#EAE4D9; }
.ov-ic-ok{ background:#CFF0E2; color:#0A6E55; }
.ov-ic-wr{ background:#F6DFBB; color:#8A4008; }
.ov-c.ok .ov-c-t{ color:#1F1714; }
.ov-c.wr .ov-c-t{ color:#1F1714; }
[data-theme="dark"] .ov-c,
[data-theme="dark"] .ov-c.ok,
[data-theme="dark"] .ov-c.wr{ background:linear-gradient(180deg,#2E2621 0%,#241D19 100%); border-color:var(--border); }
[data-theme="dark"] .ov-ic-ok{ background:rgba(94,211,168,0.16); color:#7FE3C2; }
[data-theme="dark"] .ov-ic-wr{ background:rgba(251,191,36,0.15); color:#FCD34D; }
.adaptive-header{ text-align:center; margin-bottom:56px; position:relative; z-index:2; }
.adaptive-header .section-desc{ margin:0 auto; }
@media (max-width:768px){ .adaptive-header{ margin-bottom:34px; } }
.dash-stat-value.ds-hi { color: var(--dash-hi); }
.dash-stat-value.ds-ok { color: var(--dash-ok); }
.dash-row2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; flex: 1; min-height: 0; }
.dash-card { background: rgba(var(--fg-rgb),0.04); border: 1px solid rgba(var(--fg-rgb),0.08); border-radius: 10px; padding: 14px; min-width: 0; overflow: hidden; }
.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dash-card-title { font-size: 0.757rem; font-weight: 700; color: var(--text-2); display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.dash-card-title .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dash-ok); animation: pulse-dot 1.5s infinite; flex-shrink: 0; }
.dash-range { display: flex; gap: 3px; flex-shrink: 0; }
.dash-range b { font-size: 0.53rem; font-weight: 600; color: var(--text-3); padding: 3px 7px; border-radius: 5px; background: rgba(var(--fg-rgb),0.05); }
.dash-range b.on { background: rgba(var(--accent-rgb),0.16); color: var(--dash-hi); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.28); }
.dash-total { font-size: 1.45rem; font-weight: 700; color: var(--text-1); line-height: 1; margin-bottom: 10px; }
.dash-chart { display: flex; align-items: flex-end; gap: 6px; height: 88px; }
.dc-group { display: flex; align-items: flex-end; gap: 2px; flex: 1; height: 100%; }
.dc-bar { flex: 1; border-radius: 2px 2px 0 0; height: 0; transition: height 0.9s cubic-bezier(0.22,0.9,0.3,1); }
.dash-chart.play .dc-bar { height: var(--h); }
.dc-1 { background: #A78BFA; }
.dc-2 { background: #34D399; }
.dc-3 { background: #60A5FA; }
.dc-4 { background: #FBBF24; }
.dc-5 { background: #F0ABFC; }
.dash-xaxis { display: flex; gap: 6px; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(var(--fg-rgb),0.09); }
.dash-xaxis span { flex: 1; text-align: center; font-size: 0.5rem; color: var(--text-3); }
.dash-legend { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 9px; }
.dash-legend span { font-size: 0.5rem; color: var(--text-3); display: inline-flex; align-items: center; gap: 4px; }
.dash-legend i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.la-list { display: flex; flex-direction: column; }
.convo-status.cs-replied { background: rgba(var(--warn-rgb),0.18); color: var(--warning); }
.convo-status.cs-agent { background: rgba(var(--dash-ok-rgb),0.20); color: var(--dash-ok); }
.dash-usage { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; background: rgba(var(--fg-rgb),0.04); border: 1px solid rgba(var(--fg-rgb),0.08); border-radius: 10px; padding: 12px 14px; }
.du-cell { min-width: 0; }
.du-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.du-label { font-size: 0.6rem; color: var(--text-3); font-weight: 600; }
.du-val { font-size: 0.63rem; color: var(--text-1); font-weight: 700; white-space: nowrap; }
.du-bar { height: 4px; border-radius: 100px; background: rgba(var(--fg-rgb),0.10); overflow: hidden; }
.du-fill { display: block; height: 100%; border-radius: 100px; width: 0; transition: width 1s cubic-bezier(0.22,0.9,0.3,1); }
.dash-usage.play .du-fill { width: var(--w); }
.du-a { background: #A78BFA; }
.du-b { background: #60A5FA; }
.du-c { background: var(--dash-hi); }
@media (max-width: 768px) {
.dash-stats { grid-template-columns: repeat(2,1fr); }
.dash-row2 { grid-template-columns: 1fr; gap: 8px; }
.dash-card { padding: 10px; }
.dash-card-title { font-size: 0.66rem; }
.dash-range b { font-size: 0.46rem; padding: 2px 5px; }
.dash-total { font-size: 1.05rem; margin-bottom: 7px; }
.dash-chart { height: 66px; gap: 4px; }
.dash-xaxis { gap: 4px; }
.dash-xaxis span { font-size: 0.44rem; }
.dash-legend { gap: 2px 8px; margin-top: 7px; }
.dash-legend span { font-size: 0.44rem; }
.dash-usage { grid-template-columns: 1fr; gap: 8px; padding: 10px; }
.du-label { font-size: 0.53rem; }
.du-val { font-size: 0.55rem; }
}
@media (max-width: 480px) {
.dash-card { padding: 8px; }
.dash-card-title { font-size: 0.58rem; }
.dash-range b { font-size: 0.4rem; padding: 2px 4px; }
.dash-total { font-size: 0.9rem; margin-bottom: 5px; }
.dash-chart { height: 52px; gap: 3px; }
.dc-group { gap: 1px; }
.dash-xaxis { gap: 3px; }
.dash-xaxis span { font-size: 0.38rem; }
.dash-xaxis span:nth-child(even) { visibility: hidden; }
.dash-legend span { font-size: 0.38rem; }
.dash-legend i { width: 5px; height: 5px; }
.du-label { font-size: 0.46rem; }
.du-val { font-size: 0.48rem; }
}
.dash-stats { grid-template-columns: repeat(4,1fr); gap: 10px; }
.dash-main { gap: 11px; }
.dash-stat-card { padding: 9px 8px; }
.dash-stat-label { font-size: 0.56rem; margin-bottom: 4px; letter-spacing: 0.06em; }
.dash-stat-value { font-size: 1.15rem; }
.dash-card { padding: 12px; }
.dash-card-head { margin-bottom: 6px; }
.dash-card-title { font-size: 0.7rem; }
.dash-total { font-size: 1.05rem; margin-bottom: 7px; }
.dash-chart { height: 70px; }
.dash-legend { margin-top: 7px; gap: 2px 9px; }
.dash-usage { padding: 10px 12px; gap: 12px; }
.la-list .convo-row { padding: 7px 0; }
.la-list .convo-avatar { width: 26px; height: 26px; font-size: 0.58rem; }
.la-list .convo-name { font-size: 0.66rem; }
.la-list .convo-msg { font-size: 0.58rem; }
.li-desc em { font-style: italic; }
@media (max-width: 900px) { .dash { min-height: 440px; } }
@media (max-width: 768px) {
.dash-stats { grid-template-columns: repeat(2,1fr); gap: 6px; }
.dash-stat-card { padding: 6px 5px; }
.dash-stat-label { font-size: 0.46rem; margin-bottom: 2px; }
.dash-stat-value { font-size: 0.85rem; }
.dash-main { gap: 8px; }
.dash-card { padding: 9px; }
.dash-chart { height: 48px; }
.la-list .convo-row { padding: 5px 0; }
.la-list .convo-row:nth-child(n+4) { display: none; }
.la-list .convo-avatar { width: 22px; height: 22px; font-size: 0.5rem; }
.dash-usage { grid-template-columns: repeat(3,1fr); gap: 8px; padding: 9px; }
.du-label { font-size: 0.44rem; }
.du-val { font-size: 0.46rem; }
.du-top { margin-bottom: 3px; }
}
@media (max-width: 480px) {
.dash { min-height: 370px; }
.dash-stat-value { font-size: 0.75rem; }
.dash-stat-label { font-size: 0.4rem; }
.dash-card { padding: 7px; }
.dash-chart { height: 40px; }
.la-list .convo-avatar { width: 19px; height: 19px; }
.dash-usage { padding: 7px; gap: 6px; }
}
.sfa-sec .sf-header{ margin-bottom:30px; }
.sfa-intro{ text-align:center; margin:36px auto 0; }
.sfa-intro .section-desc{ margin:0 auto; }
.sfa-intro .sfa-mech{ margin:18px auto 40px; }
@media (max-width:820px){ .sfa-intro{ margin-top:26px; }
.sfa-intro .sfa-mech{ margin:16px auto 30px; } }
.sfa-mech{ display:flex; width:fit-content; align-items:center; gap:9px; max-width:100%;
margin:30px auto 38px; padding:11px 22px;
font-size:0.875rem; font-weight:600; line-height:1.55; color:var(--text-2);
background:rgba(var(--accent-rgb),0.08);
border:1px solid rgba(var(--accent-rgb),0.30);
border-radius:999px; text-align:left; }
.sfa-mech .sfa-mech-ic{ flex:none; color:var(--accent); }
.sfa-mech strong{ font-weight:800; color:var(--text-1); }
@media (max-width:820px){
.sfa-mech{ align-items:center; text-align:center; border-radius:16px;
padding:12px 16px; font-size:0.82rem;
margin-top:22px; margin-bottom:28px; }
.sfa-mech .sfa-mech-ic{ margin-top:0; } }
.sfa-bridge{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px; margin:0 auto 34px; }
.sfa-chip{ display:inline-flex; align-items:center; gap:6px; font-size:0.74rem; font-weight:600;
color:var(--sage-tx); background:var(--sage-bg); border:1px solid var(--sage-br);
padding:5px 12px; border-radius:100px; white-space:nowrap; }
.sfa-chip svg{ flex:0 0 13px; color:var(--sage-ic); }
.sfa-sep{ color:var(--text-3); opacity:0.5; display:inline-flex; }
.sfa-sep svg{ width:16px; height:16px; }
.sfa-note{ flex-basis:100%; text-align:center; font-size:0.72rem; color:var(--text-3); margin-top:5px; }
.sfa-pipe{ display:grid; grid-template-columns:3fr auto 1fr; align-items:start; gap:0 6px; }
.sfa-lead{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:0 6px; }
.sfa-node{ background:linear-gradient(180deg,#FFFFFF 0%,#F7F3EC 100%); border:1px solid #EAE4D9;
border-radius:14px; padding:18px 17px; display:flex; flex-direction:column;
box-shadow:0 2px 10px rgba(var(--shadow-rgb),0.05); position:relative; }
.sfa-node h4, .sfa-node h3, .sfa-node .mockh-b{ margin:11px 0 5px; font-size:0.9rem; font-weight:700; letter-spacing:-0.014em; color:var(--text-1); }
.sfa-node p{ margin:0; font-size:0.78rem; line-height:1.55; color:var(--text-3); }
.sfa-node p strong{ color:var(--text-1); font-weight:700; }
.sfa-node p strong[class^="fx-"]{ font-weight:700; padding:1px 5px; border-radius:5px;
-webkit-box-decoration-break:clone; box-decoration-break:clone; }
.fx-face { color:#6D28D9; background:rgba(109,40,217,0.13); }
.fx-voice{ color:#8F4405; background:rgba(143,68,5,0.13); }
.fx-site { color:#0C6478; background:rgba(12,100,120,0.13); }
.fx-name { color:#9F1239; background:rgba(159,18,57,0.13); }
.fx-page { color:#166534; background:rgba(22,101,52,0.13); }
[data-theme="dark"] .fx-face { color:#C4B5FD; background:rgba(167,139,250,0.16); }
[data-theme="dark"] .fx-voice{ color:#FCD34D; background:rgba(251,191,36,0.16); }
[data-theme="dark"] .fx-site { color:#67E8F9; background:rgba(34,211,238,0.16); }
[data-theme="dark"] .fx-name { color:#FDA4AF; background:rgba(251,113,133,0.16); }
[data-theme="dark"] .fx-page { color:#86EFAC; background:rgba(74,222,128,0.16); }
[data-theme="dark"] .sfa-node{
background:linear-gradient(180deg,#2E2621 0%,#241D19 100%);
border-color:var(--border);
box-shadow:0 2px 10px rgba(var(--shadow-rgb),0.30);
}
[data-theme="dark"] .sfa-node-out{
background:linear-gradient(150deg, rgba(94,211,168,0.16) 0%, rgba(94,211,168,0.05) 58%, #241D19 100%);
border-color:var(--sage-br);
box-shadow:0 4px 20px rgba(94,211,168,0.10);
}
.sfa-node-out p{ color:var(--text-2); }
.sfa-ic{ width:38px; height:38px; flex:0 0 38px; border-radius:11px; display:flex; align-items:center;
justify-content:center; background:rgba(var(--accent-rgb),0.10); color:var(--accent); }
.sfa-ic svg{ width:20px; height:20px; }
.sfa-ic-brand{ padding:7px; }
.sfa-ic-brand img{ width:100%; height:100%; object-fit:contain; display:block; }
.sfa-arrow{ display:flex; align-self:start; align-items:flex-start; padding-top:27px;
color:var(--text-3); opacity:0.45; }
.sfa-node-out{ background:linear-gradient(150deg, rgba(18,160,124,0.14) 0%, rgba(18,160,124,0.04) 58%, #FFFFFF 100%);
border-color:var(--sage-br); box-shadow:0 4px 20px rgba(18,160,124,0.13); }
.sfa-node-out .sfa-ic{ background:var(--sage-bg); color:var(--sage-ic); border:1px solid var(--sage-br); }
.sfa-node-out h4, .sfa-node-out h3{ color:var(--sage-tx); }
.sfa-badge{ position:absolute; top:-10px; left:16px; font-size:0.6rem; font-weight:700; letter-spacing:0.02em;
color:var(--sage-tx); background:var(--sage-bg); border:1px solid var(--sage-br);
padding:3px 9px; border-radius:100px; white-space:nowrap; }
.sfa-tok{ display:flex; align-items:center; flex-wrap:nowrap; gap:4px; margin-top:10px; }
.sfa-tok b{ display:inline-flex; align-items:center; justify-content:center; line-height:1;
font-size:0.58rem; font-weight:700; padding:5px 7px; border-radius:6px; white-space:nowrap; }
.tk-a{ color:#6D28D9; background:rgba(109,40,217,0.11); border:1px solid rgba(109,40,217,0.30); }
.tk-b{ color:#0C6478; background:rgba(12,100,120,0.11); border:1px solid rgba(12,100,120,0.30); }
.tk-c{ color:#9A4A06; background:rgba(154,74,6,0.11); border:1px solid rgba(154,74,6,0.30); }
[data-theme="dark"] .tk-a{ color:#C4B5FD; background:rgba(167,139,250,0.16); border-color:rgba(167,139,250,0.38); }
[data-theme="dark"] .tk-b{ color:#67E8F9; background:rgba(34,211,238,0.16); border-color:rgba(34,211,238,0.38); }
[data-theme="dark"] .tk-c{ color:#FCD34D; background:rgba(251,191,36,0.16); border-color:rgba(251,191,36,0.38); }
.sfa-sec .sf-vo-label{ margin-bottom:28px; }
.sfa-sec .sf-video-output{ margin-top:38px; }
@media (max-width:900px){
.sfa-pipe{ grid-template-columns:1fr; gap:0; }
.sfa-lead{ grid-template-columns:1fr; gap:0; align-items:stretch; }
.sfa-arrow{ align-self:auto; align-items:center; justify-content:center; padding:9px 0; }
.sfa-arrow svg{ transform:rotate(90deg); }
.sfa-node{ padding:16px 15px; }
}
@media (max-width:620px){
.sfa-sep{ display:none; }
.sfa-bridge{ gap:7px; margin-bottom:28px; }
.sfa-chip{ font-size:0.7rem; padding:5px 11px; }
.sfa-note{ font-size:0.68rem; }
}
@media (max-width:480px){
.sfa-sec .sf-header{ margin-bottom:24px; }
.sfa-node{ padding:14px 13px; }
.sfa-node h4, .sfa-node h3, .sfa-node .mockh-b{ font-size:0.85rem; }
.sfa-node p{ font-size:0.75rem; }
.sfa-tok{ gap:3px; }
.sfa-tok b{ font-size:0.55rem; padding:4px 6px; }
.sfa-sec .sf-vo-label{ margin-bottom:20px; }
}
[data-theme="dark"] .ov-c.ok .ov-c-t,
[data-theme="dark"] .ov-c.wr .ov-c-t{ color:var(--text-1); }
.cd-profile .cd-li-badge{ color:#6FB6F2; background:rgba(96,165,250,0.14); border-color:rgba(96,165,250,0.30); }
.sfa-node-out{
background:
radial-gradient(120% 85% at 10% -12%, rgba(255,255,255,0.92), rgba(255,255,255,0) 58%),
linear-gradient(150deg, rgba(18,160,124,0.18) 0%, rgba(18,160,124,0.05) 55%, #FFFFFF 100%);
border-color:var(--sage-br2);
animation: sfaGlow 6s ease-in-out infinite;
}
[data-theme="dark"] .sfa-node-out{
background:
radial-gradient(120% 85% at 10% -12%, rgba(126,231,194,0.20), rgba(126,231,194,0) 58%),
linear-gradient(150deg, rgba(94,211,168,0.18) 0%, rgba(94,211,168,0.06) 55%, #241D19 100%);
border-color:rgba(94,211,168,0.42);
animation: sfaGlowDark 6s ease-in-out infinite;
}
@keyframes sfaGlow{
0%,100%{ box-shadow:0 10px 32px rgba(18,160,124,0.15), 0 2px 8px rgba(31,23,20,0.05), inset 0 1px 0 rgba(255,255,255,0.90); }
50% { box-shadow:0 14px 44px rgba(18,160,124,0.26), 0 2px 8px rgba(31,23,20,0.05), inset 0 1px 0 rgba(255,255,255,0.90); }
}
@keyframes sfaGlowDark{
0%,100%{ box-shadow:0 10px 34px rgba(94,211,168,0.13), inset 0 1px 0 rgba(255,255,255,0.07); }
50% { box-shadow:0 14px 46px rgba(94,211,168,0.24), inset 0 1px 0 rgba(255,255,255,0.07); }
}
.sfa-badge{ animation: sfaBadgeFloat 2.8s ease-in-out infinite; }
@keyframes sfaBadgeFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
.sfa-sec .sf-header{ margin-bottom:22px; }
.sfa-bridge{ margin:0 auto 30px; }
.al-link-line{
background-image:
linear-gradient(180deg, rgba(var(--accent-rgb),0) 0%, var(--accent) 50%, rgba(var(--accent-rgb),0) 100%),
linear-gradient(180deg, transparent, rgba(var(--accent-rgb),0.42), transparent);
background-size:2px 22px, 2px 100%;
background-repeat:no-repeat, no-repeat;
background-position:0 -22px, 0 0;
animation: alDrip 2.4s linear infinite;
}
@keyframes alDrip{ from{ background-position:0 -22px, 0 0; } to{ background-position:0 100%, 0 0; } }
[data-theme="dark"] .ov-hub{ background:rgba(var(--accent-rgb),0.13); border-color:rgba(var(--accent-rgb),0.46); }
[data-theme="dark"] .ov-hub-ring{ border-color:rgba(var(--accent-rgb),0.36); }
@media (prefers-reduced-motion: reduce){
.sfa-badge, .sfa-node-out, .al-link-line{ animation:none; }
}
.am-mk:has(.mk-img){ background:#FFFFFF; border-color:rgba(31,23,20,0.12); }
[data-theme="dark"] .am-mk:has(.mk-img){ background:#F4F2EE; border-color:rgba(255,255,255,0.16); }
.hero-microcopy{ font-size:0.78rem; color:var(--text-3); margin:16px auto 0; max-width:640px;
text-align:center; line-height:1.6; text-wrap: balance; max-width: 640px; margin-left:auto; margin-right:auto;}
.anchor-offset{ display:block; height:0; scroll-margin-top:90px; }
.hero-video-wrap .video-placeholder{ cursor:pointer; }
.hv-embed{ position:absolute; inset:0; z-index:6; }
.hv-embed iframe{ width:100%; height:100%; border:0; display:block; }
.hero-video-wrap.playing .video-placeholder,
.hero-video-wrap.playing .video-overlay{ display:none; }
.rw-wrap{ position:relative; overflow:hidden; padding:8px 0 4px; }
.rw-wrap::before, .rw-wrap::after{ content:''; position:absolute; top:0; bottom:0; width:27%;
z-index:3; pointer-events:none; }
.rw-wrap::before{ left:0; background:linear-gradient(90deg, var(--bg-1) 0%, var(--bg-1) 34%, transparent 100%); }
.rw-wrap::after { right:0; background:linear-gradient(270deg, var(--bg-1) 0%, var(--bg-1) 34%, transparent 100%); }
.rw-row{ display:flex; gap:14px; width:max-content; animation:rwScroll 68s linear infinite; }
.rw-row.rw-rev{ animation-duration:82s; animation-direction:reverse; margin-top:14px; }
@keyframes rwScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.rw-wrap:hover .rw-row{ animation-play-state:paused; }
.rw-card{ flex:0 0 clamp(258px,25vw,330px); background:var(--surface-2); border:1px solid var(--border);
border-radius:14px; padding:16px 18px; margin:0; opacity:0.60;
transition:opacity .35s ease, transform .35s ease; }
.rw-card:hover{ opacity:1; transform:translateY(-2px); }
.rw-card blockquote{ margin:0; font-size:0.81rem; line-height:1.62; color:var(--text-2); }
.rw-card figcaption{ margin-top:11px; padding-top:10px; border-top:1px solid var(--border); }
[data-theme="dark"] .rw-card{ background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.07);
backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); opacity:0.50; }
[data-theme="dark"] .rw-card:hover{ opacity:1; }
.rw-logo{ display:flex; align-items:center; justify-content:center; gap:10px;
flex:0 0 clamp(190px,18vw,242px); padding:20px 18px; min-height:80px; }
.rw-logo .rw-logo-mark{ flex:none; color:var(--accent); }
.rw-logo .rw-logo-name{ font-size:1.02rem; font-weight:700; letter-spacing:-0.02em;
color:var(--text-2); white-space:nowrap; }
@media (max-width:768px){ .rw-logo{ flex-basis:clamp(158px,50vw,200px); min-height:68px;
padding:16px 14px; } .rw-logo .rw-logo-name{ font-size:0.92rem; } }
.rw-foot{ text-align:center; font-size:0.76rem; color:var(--text-3); margin:26px auto 0; max-width:560px; }
@media (max-width:768px){
.rw-card{ flex-basis:clamp(230px,72vw,290px); padding:14px 15px; }
.rw-card blockquote{ font-size:0.78rem; }
.rw-wrap::before, .rw-wrap::after{ width:18%; }
.hero-microcopy{ font-size:0.72rem; }
}
@media (prefers-reduced-motion: reduce){ .rw-row{ animation:none; } }
.hero h1{ font-size:clamp(2.3rem, 5.2vw, 4rem); }
@media (max-width:768px){ .hero h1{ font-size:2.05rem; } .h1-lead{ font-size:0.52em; margin-bottom:0.3em; } }
@media (max-width:480px){ .hero h1{ font-size:1.72rem; } .h1-lead{ font-size:0.56em; } }
.hero h1.cz-h1{
letter-spacing:-0.03em; line-height:1.04; max-width:900px; padding-bottom:10px;
background:linear-gradient(90deg,
var(--text-1) 0%, var(--text-1) 8%,
var(--accent) 24%,
var(--head-grad-end) 36%,
var(--h1-peak) 46%, var(--h1-peak) 54%,
var(--head-grad-end) 64%,
var(--accent) 76%,
var(--text-1) 92%, var(--text-1) 100%);
background-size:200% auto;
will-change:background-position;
transform:translateZ(0);
backface-visibility:hidden;
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
animation:brand-flow 13s linear infinite;
filter:drop-shadow(0 1.5px 0 rgba(var(--shadow-rgb),0.20))
drop-shadow(0 1.5px 0 rgba(var(--shadow-rgb),0.14))
drop-shadow(0 7px 14px rgba(var(--shadow-rgb),0.17)); }
[data-theme="dark"] .hero h1.cz-h1{
filter:drop-shadow(0 1.5px 0 rgba(0,0,0,0.50))
drop-shadow(0 1.5px 0 rgba(0,0,0,0.38))
drop-shadow(0 9px 22px rgba(0,0,0,0.55)); }
.cz-h1 .l1, .cz-h1 .l2, .cz-h1 .l3{
display:block; color:inherit; -webkit-text-fill-color:transparent; }
.cz-h1 .l1{ font-size:clamp(0.85rem, 2.2vw, 1.35rem); font-weight:600;
line-height:1.3; letter-spacing:-0.01em; }
.cz-h1 .l3{ font-size:clamp(1.8rem, 8.6vw, 6.2rem); font-weight:900;
line-height:1.22; }
@media (prefers-reduced-motion: reduce){
.hero h1.cz-h1{ animation:none; background-position:50% center; } }
.hero .badge{ color:var(--text-3); gap:7px; padding:5px 6px 5px 12px; }
.hero .badge .badge-lead{ font-weight:600; white-space:nowrap; }
.hero .badge .badge-chip{
display:inline-flex; align-items:center; white-space:nowrap;
padding:3px 10px; border-radius:100px;
background:var(--accent); color:#FFFFFF;
font-weight:700; letter-spacing:0.005em; line-height:1.35;
box-shadow:0 1px 2px rgba(var(--shadow-rgb),0.20); }
[data-theme="dark"] .hero .badge .badge-chip{
color:#16120F; box-shadow:0 1px 2px rgba(0,0,0,0.35); }
@media (max-width:480px){
.hero .badge{ gap:6px; padding:4px 5px 4px 10px; }
.hero .badge .badge-chip{ padding:3px 8px; } }
.footer-wordmark-wrap{ overflow:hidden;
width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
margin-top:44px;
height:clamp(2.88rem, 12.8vw, 10.4rem);
display:flex; align-items:flex-start; justify-content:center;
pointer-events:none; user-select:none; -webkit-user-select:none;
-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 46%, rgba(0,0,0,0.55) 74%, rgba(0,0,0,0) 100%);
mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 46%, rgba(0,0,0,0.55) 74%, rgba(0,0,0,0) 100%); }
.footer-wordmark{ font-family:'Outfit', 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight:700;
font-size:clamp(3.6rem, 16vw, 13rem); line-height:0.8;
letter-spacing:-0.045em; color:var(--text-1); opacity:0.055;
white-space:nowrap; }
[data-theme="dark"] .footer-wordmark{ opacity:0.085; }
@media (max-width:600px){ .footer-wordmark-wrap{ margin-top:30px; } }
@media (min-width: 769px){
.sf-header, .features-header, .testimonials-header, .pg-head{ margin-bottom:64px; }
}
footer a:not(.logo), .footer a:not(.logo){
color:var(--text-3); text-decoration:none; transition:color .2s ease; }
footer a:not(.logo):hover, .footer a:not(.logo):hover{ color:var(--accent); }
footer a:focus-visible, .footer a:focus-visible{
outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
footer [aria-current="page"], .footer [aria-current="page"]{
color:var(--text-2); font-weight:600; }
.cta-pills{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
margin:28px auto 40px; }
.cta-pill{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px;
border-radius:999px; background:var(--surface-2);
border:1px solid var(--border); font-size:0.86rem; color:var(--text-2); }
.cta-pill b{ color:var(--text-1); font-weight:800; }
.cta-dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.cta-d1{ background:#6D28D9; } .cta-d2{ background:#8F4405; } .cta-d3{ background:#166534; }
[data-theme="dark"] .cta-d1{ background:#C4B5FD; }
[data-theme="dark"] .cta-d2{ background:#FCD34D; }
[data-theme="dark"] .cta-d3{ background:#86EFAC; }
@media (max-width:560px){ .cta-pills{ gap:8px; } .cta-pill{ font-size:0.8rem; padding:8px 14px; } }
[data-theme="dark"] .fx-b1 { color:#C4B5FD; background:rgba(167,139,250,0.16); }
[data-theme="dark"] .fx-b2 { color:#FCD34D; background:rgba(251,191,36,0.16); }
[data-theme="dark"] .fx-b3 { color:#86EFAC; background:rgba(74,222,128,0.16); }
.sfa-mech .sfa-mech-ic{ animation:mech-bolt 3s ease-in-out infinite; }
.sfa-mech{ position:relative; overflow:hidden; }
.sfa-mech::after{ content:''; position:absolute; top:0; bottom:0; width:38%;
left:-45%; pointer-events:none; border-radius:inherit;
background:linear-gradient(100deg, transparent,
rgba(var(--accent-rgb),0.14), transparent);
animation:mech-sheen 4s ease-in-out infinite; }
@keyframes mech-bolt{ 0%,100%{ opacity:.55; transform:scale(1); }
50% { opacity:1; transform:scale(1.14); } }
@keyframes mech-sheen{ 0%,52%{ left:-45%; } 100%{ left:115%; } }
.hero-flow-track > .hf-node:nth-child(1) { --w:0.14; }
.hero-flow-track > .hf-node:nth-child(3) { --w:0.29; }
.hero-flow-track > .hf-node:nth-child(5) { --w:0.44; }
.hero-flow-track > .hf-node:nth-child(7) { --w:0.60; }
.hero-flow-track > .hf-node:nth-child(9) { --w:0.78; }
.hero-flow-track > .hf-node:nth-child(11){ --w:1; }
.hero-flow-track > .hf-node .hf-node-circle{
border-color:rgba(var(--accent-rgb), calc(0.10 + var(--w,.3) * 0.62));
background:
linear-gradient(180deg, rgba(var(--accent-rgb), calc(var(--w,.3) * 0.07)),
rgba(var(--accent-rgb), 0)), var(--bg-0);
transition:border-color .45s ease, box-shadow .45s ease, transform .45s ease; }
.hero-flow-track > .hf-node:nth-child(11) .hf-node-circle{
box-shadow:0 0 0 5px rgba(var(--accent-rgb),0.07); }
.hero-flow-track > .hf-node:nth-child(11) .hf-node-circle svg{ color:var(--accent); }
.hero-flow-track > .hf-node:nth-child(11) .hf-node-label{
color:var(--accent); font-weight:800; }
.hf-node .hf-node-circle{ position:relative; }
.hf-node.active .hf-node-circle{ transform:translateY(-3px); }
.hf-node.active .hf-node-circle::after{
content:''; position:absolute; inset:-2px; border-radius:50%;
border:2px solid rgba(var(--accent-rgb),0.55); pointer-events:none;
animation:hf-ring 1.5s cubic-bezier(.22,.61,.36,1) 1 both; }
.hero-flow-track > .hf-node:nth-child(11).active .hf-node-circle{
box-shadow:0 0 34px rgba(var(--accent-rgb),0.34), 0 0 0 6px rgba(var(--accent-rgb),0.10);
transform:translateY(-4px) scale(1.05); }
.hero-flow-track > .hf-node:nth-child(11).active .hf-node-circle::before{
content:''; position:absolute; inset:-2px; border-radius:50%;
border:2px solid rgba(var(--accent-rgb),0.40); pointer-events:none;
animation:hf-ring 1.9s cubic-bezier(.22,.61,.36,1) .28s 1 both; }
@keyframes hf-ring{
0% { transform:scale(1); opacity:.85; }
70% { opacity:.22; }
100%{ transform:scale(1.85); opacity:0; } }
@media (prefers-reduced-motion: reduce){
.sfa-mech .sfa-mech-ic, .sfa-mech::after,
.hf-node.active .hf-node-circle::after,
.hero-flow-track > .hf-node:nth-child(11).active .hf-node-circle::before{
animation:none; }
.hf-node.active .hf-node-circle{ transform:none; } }
.system-flow .sf-header{ margin-bottom:34px; }
.system-flow .sfa-bridge{ margin-bottom:0; }
.sfa-intro{ margin-top:58px; }
@media (max-width:820px){
.system-flow .sf-header{ margin-bottom:26px; }
.sfa-intro{ margin-top:42px; } }
.uline{ position:relative; display:inline-block; padding:0 0.08em;
background-image:linear-gradient(180deg,
transparent 58%,
rgba(var(--accent-rgb),0.30) 58%,
rgba(var(--accent-rgb),0.30) 92%,
transparent 92%); }
.sfa-bridge .sfa-drop{ --drop-h:34px; flex:0 0 100%; position:relative; height:var(--drop-h); margin-top:14px; }
.sfa-bridge .sfa-drop::before{ content:''; position:absolute; left:50%; top:0;
margin-left:-1px; width:2px; height:100%; border-radius:2px;
background:linear-gradient(180deg,
rgba(var(--accent-rgb),0.20), rgba(var(--accent-rgb),0.04)); }
.sfa-bridge .sfa-drop i{ position:absolute; left:50%; top:0; margin-left:-3px;
width:6px; height:6px; border-radius:50%; background:var(--accent-light);
box-shadow:0 0 10px var(--accent), 0 0 4px var(--accent);
animation:sfa-drip 1.6s linear infinite;
will-change:transform, opacity; }
@keyframes sfa-drip{
0%{ transform:translateY(-6px); opacity:0; }
14%{ opacity:1; }
86%{ opacity:1; }
100%{ transform:translateY(var(--drop-h, 34px)); opacity:0; } }
.system-flow .sfa-intro{ margin-top:12px; }
@media (max-width:820px){
.sfa-bridge .sfa-drop{ --drop-h:24px; margin-top:10px; }
.system-flow .sfa-intro{ margin-top:8px; } }
@media (prefers-reduced-motion: reduce){
.sfa-bridge .sfa-drop i{ animation:none; transform:translateY(14px); opacity:0.7; } }
[data-theme="dark"] .uline{
background-image:linear-gradient(180deg,
transparent 58%,
rgba(var(--accent-rgb),0.55) 58%,
rgba(var(--accent-rgb),0.55) 92%,
transparent 92%); }
.objfall{ margin:26px auto 34px; max-width:1000px; }
.objfall-lead{ text-align:center; font-size:0.86rem; color:var(--text-3);
margin:0 0 12px; }
.objfall-pit{ position:relative; height:212px; }
.ofp{ position:absolute; left:var(--l); top:var(--t);
display:inline-flex; align-items:center; white-space:nowrap;
padding:9px 17px; border-radius:999px;
font-size:0.86rem; font-weight:600; opacity:0;
transform:translateY(-210px) rotate(0deg);
will-change:transform, opacity;
transition:transform .95s cubic-bezier(.24,1.34,.42,1) var(--d),
opacity .34s linear var(--d); }
.objfall.in .ofp{ opacity:1; transform:translateY(0) rotate(var(--r)); }
.objfall.out .ofp{ opacity:0; transform:translateY(-210px) rotate(0deg);
transition:transform 1.05s cubic-bezier(.36,0,.3,1) var(--d),
opacity .72s linear var(--d); }
.ofp.p1{ color:var(--st-violet); background:rgba(var(--st-violet-rgb),0.13); border:1px solid rgba(var(--st-violet-rgb),0.28); }
.ofp.p2{ color:#92400E; background:rgba(var(--st-amber-rgb),0.13); border:1px solid rgba(var(--st-amber-rgb),0.28); }
.ofp.p3{ color:#166534; background:rgba(var(--st-green-rgb),0.13); border:1px solid rgba(var(--st-green-rgb),0.28); }
.ofp.p4{ color:var(--st-blue); background:rgba(var(--st-blue-rgb),0.13); border:1px solid rgba(var(--st-blue-rgb),0.28); }
.ofp.p5{ color:#115E59; background:rgba(var(--st-teal-rgb),0.13); border:1px solid rgba(var(--st-teal-rgb),0.28); }
.ofp.p6{ color:var(--st-slate); background:rgba(var(--st-slate-rgb),0.13); border:1px solid rgba(var(--st-slate-rgb),0.28); }
[data-theme="dark"] .ofp{ background:rgba(var(--fg-rgb),0.07); }
[data-theme="dark"] .ofp.p1{ border-color:rgba(167,139,250,0.32); }
[data-theme="dark"] .ofp.p2{ color:var(--st-amber); border-color:rgba(251,191,36,0.32); }
[data-theme="dark"] .ofp.p3{ color:var(--st-green); border-color:rgba(74,222,128,0.32); }
[data-theme="dark"] .ofp.p4{ border-color:rgba(96,165,250,0.32); }
[data-theme="dark"] .ofp.p5{ color:var(--st-teal); border-color:rgba(45,212,191,0.32); }
[data-theme="dark"] .ofp.p6{ border-color:rgba(148,163,184,0.32); }
@media (max-width:860px){
.objfall-pit{ height:auto; display:flex; flex-wrap:wrap; gap:9px;
justify-content:center; }
.ofp{ position:static; font-size:0.78rem; padding:7px 13px;
transform:translateY(-40px) rotate(0deg)!important; }
.objfall.in .ofp{ transform:none!important; }
.objfall.out .ofp{ transform:translateY(-40px) rotate(0deg)!important; }
}
@media (prefers-reduced-motion: reduce){
.ofp{ transition:none; opacity:1; transform:translateY(0) rotate(var(--r)); }
.objfall.out .ofp{ opacity:1; transform:translateY(0) rotate(var(--r)); }
}
:root{ --hc-ink:var(--text-1); --hc-accent:var(--accent);
--g1u:url(assets/headline-01.webp);--g2u:url(assets/headline-02.webp);--g3u:url(assets/headline-03.webp); }
.hero h1.cz-h1v3{
--h1s:clamp(2rem, 5.1vw, 3.9rem);
font-size:var(--h1s); font-weight:900; color:var(--hc-ink);
max-width:1140px; margin:0 auto 24px;
letter-spacing:-0.035em; line-height:1.06; padding-bottom:6px;
overflow-wrap:break-word;
background:none; -webkit-background-clip:border-box; background-clip:border-box;
-webkit-text-fill-color:currentColor; animation:none; filter:none; }
[data-theme="dark"] .hero h1.cz-h1v3{ filter:none; }
.cz-h1v3 .l1{ display:block; font-size:0.58em; font-weight:800; line-height:1.18;
margin-bottom:0.16em; color:var(--hc-ink); font-style:normal;
-webkit-text-fill-color:currentColor;
filter:drop-shadow(0 1px 1px rgba(var(--shadow-rgb),0.07)); }
[data-theme="dark"] .cz-h1v3 .l1{ filter:drop-shadow(0 1px 1.5px rgba(0,0,0,0.24)); }
.cz-h1v3 .pay{ display:block; font-size:1em; font-weight:900; line-height:1.19; }
.cz-h1v3 .pay + .pay{ margin-top:0.20em; }
.cz-h1v3 .uline{ position:relative; isolation:isolate; padding:0 0.12em;
background-image:none; }
.cz-h1v3 .uline::before{ content:''; position:absolute; inset:48% 0 0.02em;
background:linear-gradient(100deg,
rgba(253,141,104,0.62), rgba(255,95,109,0.62));
border-radius:0.06em; z-index:-1; }
.cz-h1v3 .lnk{ font-style:normal; font-weight:inherit;
background:linear-gradient(100deg, #C0492A 0%, #C7263D 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent; }
[data-theme="dark"] .cz-h1v3 .lnk{
background:linear-gradient(100deg, var(--fill-1) 0%, var(--fill-2) 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; }
.cz-h1v3 .wa, .cz-h1v3 .wi{ display:inline; font-weight:900; font-style:normal;
white-space:nowrap; }
.cz-h1v3 .h1eb, .cz-h1v3 .h1st{ display:inline; }
.cz-h1v3 .ch{ display:inline-block; }
.cz-h1v3 .cw .ch{ -webkit-text-fill-color:transparent; color:transparent;
-webkit-text-stroke:var(--sw,0.022em) var(--c1,var(--hc-ink)); }
.cz-h1v3 .cw.wid .ch{
animation:cwave var(--dur,4s) ease-in-out infinite,
cwidth var(--dur,4s) ease-in-out infinite;
animation-delay:calc(var(--i) * var(--st,0.10s)),
calc(var(--i) * var(--st,0.10s)); }
.cz-h1v3 .p-inkacc{ --c1:var(--hc-ink); --c2:var(--hc-accent); }
@keyframes cwave{ 0%,100%{ -webkit-text-stroke-color:var(--c1,var(--hc-ink)); }
50%{ -webkit-text-stroke-color:var(--c2,var(--hc-accent)); } }
@keyframes cwidth{ 0%,100%{ -webkit-text-stroke-width:var(--w1,0.016em); }
50%{ -webkit-text-stroke-width:var(--w2,0.030em); } }
.cz-h1v3 .vf{ position:relative; display:inline-block; overflow:hidden;
width:var(--vfw,1.4375em); height:var(--vfh,0.80875em);
margin:0 0.106em 0 0.154em;
vertical-align:var(--vfva,-0.158em);
border-radius:999px; background:var(--surface-2);
-webkit-text-fill-color:initial; color:initial; -webkit-text-stroke:0;
box-shadow:0 0 0 var(--vfring,0.075em) var(--vfmat,var(--surface-0)),
0 0.13em 0.32em rgba(var(--shadow-rgb),0.26); }
[data-theme="dark"] .cz-h1v3 .vf{ --vfmat:#EFE7E0; }
.cz-h1v3 .vf u{ position:absolute; inset:0; display:block; text-decoration:none;
background-size:cover; background-position:center; opacity:0;
animation:gswap 13.5s linear infinite; }
.cz-h1v3 .vf u.g1{ background-image:var(--g1u); }
.cz-h1v3 .vf u.g2{ background-image:var(--g2u); animation-delay:4.5s; }
.cz-h1v3 .vf u.g3{ background-image:var(--g3u); animation-delay:9s; }
@keyframes gswap{ 0%{opacity:0} 2%{opacity:1} 31%{opacity:1}
33.3%{opacity:0} 100%{opacity:0} }
@media (max-width:768px){
.hero h1.cz-h1v3{ --h1s:clamp(1.7rem, 7.4vw, 2.5rem); }
.cz-h1v3 .l1{ white-space:nowrap; font-size:0.50em; } }
@media (max-width:480px){
.hero h1.cz-h1v3{ --base:calc((100vw - 47px) * 0.074); }
.cz-h1v3 .pay{ line-height:1.26; }
.cz-h1v3 .pay + .pay{
margin-top:calc(var(--base) * 0.34); }
.cz-h1v3 .pay:nth-child(1){ font-size:var(--base); }
.cz-h1v3 .h1eb{ display:block; font-size:0.46em; font-weight:700;
text-transform:uppercase; letter-spacing:0.14em; opacity:1;
background:linear-gradient(100deg, #B94629 0%, #C0253B 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent; }
[data-theme="dark"] .cz-h1v3 .h1eb{
background:linear-gradient(100deg, var(--fill-1) 0%, var(--fill-2) 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; }
.cz-h1v3 .h1st{ display:block; font-size:1.22em;
margin-top:0.18em; }
.cz-h1v3 .pay:nth-child(2){ font-size:calc((100vw - 81px) / 13.6);
white-space:nowrap; }
.cz-h1v3 .pay:nth-child(3){ font-size:calc(var(--base) * 1.18);
--vfw:1.95em; --vfh:1.096875em; --vfring:0.10em; --vfva:-0.24em; } }
@media (max-width:359px){
.hero h1.cz-h1v3{ --h1s:clamp(1.5rem, 6.8vw, 1.95rem); } }
@media (prefers-reduced-motion: reduce){
.cz-h1v3 *{ animation:none !important; }
.cz-h1v3 .vf u.g1{ opacity:1; } }
.cz-h1v3 .bk{ display:inline-block; white-space:nowrap; }
.cz-h1v3 .l1.noshade,
[data-theme="dark"] .cz-h1v3 .l1.noshade{ filter:none; }
:root{ --constellation:1.20; --grid:6.00; --gridcell:20px; }
body{ background:var(--surface-1); }
.page-bg{ background:none; animation:none; }
.grid-overlay{
background-image:
linear-gradient(rgba(var(--fg-rgb), calc(0.015 * var(--grid))) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--fg-rgb), calc(0.015 * var(--grid))) 1px, transparent 1px);
background-size:var(--gridcell) var(--gridcell); }
section.amb, .footer.amb{ background:transparent; }
section.flat, .footer.flat{ background:var(--surface-1); }
.flat::before{ display:none; }
.footer.amb > .container{ position:relative; z-index:1; }
.footer.amb > .container::before{
content:''; position:absolute; z-index:-1; pointer-events:none;
top:-60px;
bottom:-44px;
left:50%; margin-left:-50vw; width:100vw;
background:var(--surface-1);
-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 40px),transparent 100%);
mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 40px),transparent 100%); }
@media (max-width:600px){
.footer.amb > .container::before{ bottom:-30px; } }
.hero-screen-wrapper{ position:relative; z-index:1; }
.hero-screen-wrapper::before{
content:''; position:absolute; z-index:-1; pointer-events:none;
top:-110px; bottom:-90px;
left:50%; margin-left:-50vw; width:100vw;
background:var(--surface-1);
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 100px,
#000 calc(100% - 46px),transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 100px,
#000 calc(100% - 46px),transparent 100%); }
@media (prefers-reduced-motion: reduce){
.grid-overlay{ animation:none; } }
.cz-bridge{ display:flex; flex-direction:column; align-items:center;
justify-content:center; padding:6px 24px 2px; }
.cz-term{ display:inline-block; text-align:left; background:#16120F;
border-radius:10px; padding:18px 22px;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:.88rem; line-height:1.4; min-width:340px;
box-shadow:0 8px 26px rgba(0,0,0,.28);
color:#D8CCC3; }
[data-theme="dark"] .cz-term{ background:#0B0908;
box-shadow:0 0 0 1px rgba(var(--accent-rgb),.24),
inset 0 1px 0 rgba(247,241,236,.07),
0 10px 34px rgba(0,0,0,.55),
0 0 30px rgba(var(--accent-rgb),.10); }
.cz-term-p{ color:#9b8b80; }
.cz-term-cmd{ color:#7FE3C2; }
.cz-term-flag{ color:#BFB0A5; }
.cz-term-out{ color:#F7F1EC; font-weight:600; display:block; margin-top:7px;
white-space:nowrap; }
.cz-term-txt{ display:inline-block; overflow:hidden; white-space:nowrap;
vertical-align:bottom; width:22ch;
animation:czType 4.6s steps(22,end) infinite; }
@keyframes czType{ 0%{ width:0 } 51%{ width:22ch } 90%{ width:22ch } 100%{ width:0 } }
.cz-term-link{ position:relative; width:2px; height:54px; margin-top:16px;
border-radius:2px; flex:0 0 auto;
background:linear-gradient(180deg, rgba(var(--accent-rgb),.42), rgba(var(--accent-rgb),0)); }
.cz-term-link::after{ content:''; position:absolute; left:50%; margin-left:-3.5px;
width:7px; height:7px; border-radius:50%; background:var(--accent);
box-shadow:0 0 0 4px rgba(var(--accent-rgb),.13);
animation:czDrop 2.6s cubic-bezier(.45,0,.5,1) infinite; }
@keyframes czDrop{ 0%{ top:-5px; opacity:0 } 14%{ opacity:1 }
76%{ opacity:1 } 100%{ top:50px; opacity:0 } }
@media (prefers-reduced-motion: reduce){
.cz-term-txt{ animation:none; width:22ch; }
.cz-term-link::after{ animation:none; top:22px; } }
.cz-term-cur{ display:inline-block; width:8px; height:14px; background:#FD8D68;
vertical-align:-2px; margin-left:5px;
animation:czTermBl 1.1s steps(2) infinite; }
@keyframes czTermBl{ 0%,50%{ opacity:1 } 51%,100%{ opacity:0 } }
@media (prefers-reduced-motion: reduce){ .cz-term-cur{ animation:none; } }
@media (max-width:560px){
.cz-bridge{ padding:4px 16px 0; }
.cz-term{ min-width:0; padding:15px 17px; font-size:.78rem; } }
.hp-plans{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
max-width:860px; margin:0 auto 34px; text-align:left; }
.hp-plan{ display:flex; flex-direction:column; gap:0; padding:18px 18px 20px;
background:linear-gradient(180deg,#FFFFFF 0%,#F7F3EC 100%);
border:1px solid #EAE4D9; border-radius:13px;
box-shadow:0 2px 10px rgba(var(--shadow-rgb),.05); }
.hp-plan b{ align-self:flex-start; font-size:.62rem; font-weight:800; letter-spacing:.12em;
text-transform:uppercase; padding:5px 10px; border-radius:8px;
margin-bottom:15px; }
.hp-p1 b{ background:#CFF0E2; color:#0A6E55; }
.hp-p2 b{ background:rgba(var(--accent-rgb),.13); color:#A14220; }
.hp-p3 b{ background:rgba(var(--st-blue-rgb),.13); color:#1D4ED8; }
.hp-plan-mid{ border-color:rgba(var(--accent-rgb),.30); }
.hp-price{ font-size:1.55rem; font-weight:800; letter-spacing:-.02em; color:#1F1714; line-height:1;
margin-bottom:6px; }
.hp-price i{ font-style:normal; font-size:.85rem; font-weight:600; color:var(--text-3); margin-left:2px; }
.hp-what{ min-height:3em;
font-size:.79rem; line-height:1.5; color:var(--text-3); }
[data-theme="dark"] .hp-plan{ background:linear-gradient(180deg,#332A24 0%,#221B17 100%);
border-color:rgba(255,255,255,.10);
box-shadow:0 6px 20px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.055); }
[data-theme="dark"] .hp-plan-mid{ border-color:rgba(var(--accent-rgb),.34); }
[data-theme="dark"] .hp-p1 b{ background:rgba(94,211,168,.16); color:#7FE3C2; }
[data-theme="dark"] .hp-p2 b{ background:rgba(225,148,121,.20); color:#EBAC96; }
[data-theme="dark"] .hp-p3 b{ background:rgba(96,165,250,.18); color:#93C5FD; }
[data-theme="dark"] .hp-price{ color:var(--text-1); }
@media (max-width:820px){ .hp-plans{ grid-template-columns:1fr; gap:11px; max-width:420px; margin-bottom:28px; }
.hp-plan{ padding:16px 18px 18px; }
.hp-what{ min-height:0; }
.hp-plan b{ margin-bottom:13px; } }
.cc-chain{ display:flex; align-items:center; gap:0 10px;
margin:-4px -4px 16px; padding:8px 10px; border-radius:9px;
box-shadow:inset 0 1px 2px rgba(var(--shadow-rgb),.06); }
.cc-kind{ flex:0 0 auto; font-size:.58rem; font-weight:800; letter-spacing:.12em;
text-transform:uppercase; color:var(--text-3);
padding-right:9px; border-right:1px solid rgba(var(--fg-rgb),.13); }
.cc-seq{ flex:1 1 auto; display:flex; align-items:center; gap:20px; min-width:0; }
.cc-w{ flex:1 1 auto; text-align:center; white-space:nowrap;
font-size:.58rem; font-weight:800; letter-spacing:.07em;
padding:4px 9px; border-radius:6px; border:1px solid transparent; }
.cc-seq{ padding:4px 7px; border-radius:7px; }
.cc-chain-old .cc-seq{ background:linear-gradient(90deg,
rgba(var(--fg-rgb),.03) 0%, rgba(var(--fg-rgb),.05) 46%, rgba(var(--danger-rgb),.20) 100%); }
.cc-chain-agent .cc-seq{ background:linear-gradient(90deg,
rgba(18,160,124,.05) 0%, rgba(18,160,124,.10) 46%, rgba(18,160,124,.26) 100%); }
.cc-seq .cc-w + .cc-w{ position:relative; }
.cc-seq .cc-w + .cc-w::before{ content:'\2192'; position:absolute; left:-14px; top:50%;
transform:translateY(-50%); font-size:.62rem; font-weight:700;
color:var(--text-3); pointer-events:none; }
.cc-chain-old{ background:linear-gradient(90deg,
rgba(var(--fg-rgb),.05) 0%, rgba(var(--fg-rgb),.045) 42%, rgba(var(--danger-rgb),.07) 100%); }
.cc-chain-old .cc-seq .cc-w:nth-of-type(1){ background:rgba(var(--fg-rgb),.06); color:var(--text-2); }
.cc-chain-old .cc-seq .cc-w:nth-of-type(2){ background:rgba(var(--fg-rgb),.09); color:var(--text-2); }
.cc-chain-old .cc-seq .cc-w:nth-of-type(3){ background:rgba(var(--warn-rgb),.13); color:#6E2E05; }
.cc-chain-old .cc-seq .cc-w:nth-of-type(4){ background:rgba(var(--danger-rgb),.13); color:#8E1616;
border-color:rgba(var(--danger-rgb),.30); }
.cc-chain-agent{ background:linear-gradient(90deg,
rgba(var(--fg-rgb),.05) 0%, rgba(var(--fg-rgb),.04) 42%, rgba(18,160,124,.09) 100%); }
.cc-chain-agent .cc-kind{ border-right-color:rgba(18,160,124,.30); }
.cc-chain-agent .cc-seq .cc-w{ background:var(--surface-2); color:var(--text-1);
border-color:var(--border); border-left-width:3px; }
.cc-chain-agent .cc-seq .cc-w:nth-of-type(1){ border-left-color:#B6C9C3; }
.cc-chain-agent .cc-seq .cc-w:nth-of-type(2){ border-left-color:#6FD8B8; }
.cc-chain-agent .cc-seq .cc-w:nth-of-type(3){ border-left-color:#2FBF97; }
.cc-chain-agent .cc-seq .cc-w:nth-of-type(4){
background:#0A7355; color:#F2FCF8;
border-color:#0A7355; border-left-color:#04382A; }
[data-theme="dark"] .cc-chain-agent .cc-seq .cc-w{ background:#2E2621; color:var(--text-1);
border-color:rgba(255,255,255,.30); border-left-width:3px; }
[data-theme="dark"] .cc-chain-agent .cc-seq .cc-w:nth-of-type(1){ border-left-color:#6E7C77; }
[data-theme="dark"] .cc-chain-agent .cc-seq .cc-w:nth-of-type(2){ border-left-color:#3FA98A; }
[data-theme="dark"] .cc-chain-agent .cc-seq .cc-w:nth-of-type(3){ border-left-color:#4FD3AC; }
[data-theme="dark"] .cc-chain-agent .cc-seq .cc-w:nth-of-type(4){
background:#5FD2AE; color:#062B20;
border-color:#9BEBD3; border-left-color:#DFF8EE; }
[data-theme="dark"] .cc-chain-old .cc-seq .cc-w:nth-of-type(3){ color:#FBBF24; }
[data-theme="dark"] .cc-chain-old .cc-seq .cc-w:nth-of-type(4){ color:#FCA5A5; }
@media (max-width:640px){
.cc-chain{ flex-wrap:wrap; gap:7px 9px; padding:8px 9px; }
.cc-kind{ flex-basis:100%; padding:0 0 4px; border-right:0;
border-bottom:1px solid rgba(var(--fg-rgb),.12); }
.cc-chain-agent .cc-kind{ border-bottom-color:rgba(18,160,124,.30); }
.cc-seq{ gap:16px; }
.cc-w{ font-size:.54rem; padding:4px 7px; }
.cc-seq .cc-w + .cc-w::before{ left:-12px; } }
.testimonials-header{ margin-bottom:44px; }
.bf-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:22px 0 0; }
.bf-chip{ font-size:.86rem; font-weight:650; letter-spacing:-.005em; color:var(--text-1);
padding:10px 20px; border-radius:99px;
background:var(--surface-2); border:1px solid var(--border);
box-shadow:0 2px 8px rgba(var(--shadow-rgb),.05); }
@media (max-width:480px){ .bf-chips{ gap:8px; } .bf-chip{ font-size:.8rem; padding:9px 16px; } }
[data-a="1"]{ --sig:#C84E29; --sig-ink:#B54725; }
[data-theme="dark"] [data-a="1"]{ --sig:#BE4A27; --sig-ink:#DE7D60; }
[data-a="2"]{ --sig:#D04522; --sig-ink:#BC3E1F; }
[data-theme="dark"] [data-a="2"]{ --sig:#C64220; --sig-ink:#E4785D; }
[data-a="3"]{ --sig:#AA641E; --sig-ink:#9B5B1B; }
[data-theme="dark"] [data-a="3"]{ --sig:#A15F1D; --sig-ink:#DA832C; }
[data-a="4"]{ --sig:#B75B34; --sig-ink:#A7532F; }
[data-theme="dark"] [data-a="4"]{ --sig:#AE5731; --sig-ink:#D38463; }
.bR [data-p="0"]{ --pf:#FAEFEF; --pt:#BE2D2D; --pe:#DE5454; }
[data-theme="dark"] .bR [data-p="0"]{ --pf:#2F1B1B; --pt:#CC6E6E; --pe:#BE3F3F; }
.bR [data-p="1"]{ --pf:#F5FAEF; --pt:#567C1D; --pe:#6DA11F; }
[data-theme="dark"] .bR [data-p="1"]{ --pf:#272F1B; --pt:#9AC559; --pe:#7BA838; }
.bR [data-p="2"]{ --pf:#EFFAF8; --pt:#1D7E6A; --pe:#1FA58A; }
[data-theme="dark"] .bR [data-p="2"]{ --pf:#1B2F2B; --pt:#59C5AF; --pe:#38A892; }
.bR [data-p="3"]{ --pf:#F1EFFA; --pt:#4A2DBE; --pe:#6F54DE; }
[data-theme="dark"] .bR [data-p="3"]{ --pf:#1F1B2F; --pt:#8B7AD0; --pe:#705AC8; }
.bR [data-p="4"]{ --pf:#FAEFF3; --pt:#BE2D67; --pe:#DE548B; }
[data-theme="dark"] .bR [data-p="4"]{ --pf:#2F1B23; --pt:#CB6B91; --pe:#B83D6E; }
.bR [data-p="5"]{ --pf:#FAFAEF; --pt:#75751C; --pe:#97971D; }
[data-theme="dark"] .bR [data-p="5"]{ --pf:#2F2F1B; --pt:#C5C559; --pe:#A8A838; }
.bR [data-p="6"]{ --pf:#EFFAF3; --pt:#1E7F45; --pe:#20A655; }
[data-theme="dark"] .bR [data-p="6"]{ --pf:#1B2F23; --pt:#59C584; --pe:#38A865; }
.bR [data-p="7"]{ --pf:#EFF1FA; --pt:#2D4ABE; --pe:#546FDE; }
[data-theme="dark"] .bR [data-p="7"]{ --pf:#1B1F2F; --pt:#7385CE; --pe:#4E65C4; }
.bR [data-p="8"]{ --pf:#FAEFF8; --pt:#BC2CA0; --pe:#DE54C3; }
[data-theme="dark"] .bR [data-p="8"]{ --pf:#2F1B2B; --pt:#C967B6; --pe:#B13B9A; }
.bR [data-p="9"]{ --pf:#FAF5EF; --pt:#936622; --pe:#C58526; }
[data-theme="dark"] .bR [data-p="9"]{ --pf:#2F271B; --pt:#C59A59; --pe:#A87B38; }
.bR [data-p="10"]{ --pf:#EFFAEF; --pt:#1E811E; --pe:#20A820; }
[data-theme="dark"] .bR [data-p="10"]{ --pf:#1B2F1B; --pt:#59C559; --pe:#38A838; }
.bR [data-p="11"]{ --pf:#EFF5FA; --pt:#2774A7; --pe:#3899D9; }
[data-theme="dark"] .bR [data-p="11"]{ --pf:#1B272F; --pt:#599AC5; --pe:#387BA8; }
.bR [data-p="12"]{ --pf:#F8EFFA; --pt:#A12DBE; --pe:#C354DE; }
[data-theme="dark"] .bR [data-p="12"]{ --pf:#2B1B2F; --pt:#B86BCB; --pe:#A23EBB; }
.bR [data-p="13"]{ --pf:#FAF1EF; --pt:#BB482C; --pe:#DE6F54; }
[data-theme="dark"] .bR [data-p="13"]{ --pf:#2F1F1B; --pt:#C77560; --pe:#AB5039; }
.bR [data-p="14"]{ --pf:#F3FAEF; --pt:#447E1D; --pe:#55A51F; }
[data-theme="dark"] .bR [data-p="14"]{ --pf:#232F1B; --pt:#84C559; --pe:#65A838; }
.bR [data-p="15"]{ --pf:#EFFAFA; --pt:#1D7C7C; --pe:#1FA1A1; }
[data-theme="dark"] .bR [data-p="15"]{ --pf:#1B2F2F; --pt:#59C5C5; --pe:#38A8A8; }
.bR [data-p="16"]{ --pf:#F3EFFA; --pt:#672DBE; --pe:#8B54DE; }
[data-theme="dark"] .bR [data-p="16"]{ --pf:#231B2F; --pt:#9A77CF; --pe:#8052C5; }
.bR [data-p="17"]{ --pf:#FAEFF1; --pt:#BE2D4A; --pe:#DE546F; }
[data-theme="dark"] .bR [data-p="17"]{ --pf:#2F1B1F; --pt:#CC6D80; --pe:#BB3E57; }
.bR [data-p="18"]{ --pf:#F8FAEF; --pt:#66791C; --pe:#839C1E; }
[data-theme="dark"] .bR [data-p="18"]{ --pf:#2B2F1B; --pt:#AFC559; --pe:#92A838; }
.bR-wrap{ max-width:1020px; margin:0 auto; }
.bR-head .section-desc{ max-width:700px; }
.bR-track{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
background:var(--surface-3); border:1px solid var(--border);
border-radius:18px; padding:6px; }
.bR-seg{ appearance:none; border:0; cursor:pointer; font-family:inherit;
background-color:transparent; border-radius:13px; padding:14px 12px 15px;
text-align:center; position:relative;
transition:background-color .22s ease, box-shadow .22s ease; }
.bR-seg .n{ display:block; font-size:.66rem; font-weight:700; letter-spacing:.16em;
color:var(--text-3); opacity:.7; margin-bottom:7px;
transition:color .2s ease, opacity .2s ease; }
.bR-seg .t{ display:block; font-size:.735rem; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--text-3); line-height:1.32;
transition:color .2s ease; }
.bR-seg:hover{ background-color:var(--surface-2); }
.bR-seg:hover .t{ color:var(--text-1); }
.bR-seg[aria-selected="true"]{ background-color:var(--sig);
box-shadow:0 4px 14px color-mix(in srgb, var(--sig) 34%, transparent),
inset 0 1px 0 rgba(255,255,255,.18); }
.bR-seg[aria-selected="true"] .n{ color:rgba(255,255,255,.74); opacity:1; }
.bR-seg[aria-selected="true"] .t{ color:#FFFFFF; }
[data-theme="dark"] .bR-seg[aria-selected="true"] .n{ color:rgba(255,243,236,.74); }
[data-theme="dark"] .bR-seg[aria-selected="true"] .t{ color:#FFF3EC; }
.bR-seg:focus-visible{ outline:2px solid var(--sig); outline-offset:2px; }
.bR-panels{ position:relative; margin-top:14px; }
.bR-panel{ display:none; }
.bR-panel.is-on{ display:block; position:relative;
background:var(--surface-2); border:1px solid var(--border);
border-top:3px solid var(--sig); border-radius:6px 6px 18px 18px;
box-shadow:0 6px 26px rgba(var(--shadow-rgb),.07);
animation:bRIn .36s cubic-bezier(.16,1,.3,1) both; }
@keyframes bRIn{ from{ opacity:0; transform:translateY(9px) } to{ opacity:1; transform:none } }
.bR-panel.is-on::before{ content:''; position:absolute; top:-10px; width:16px; height:16px;
margin-left:-8px; transform:rotate(45deg); background:var(--sig); border-radius:3px; }
.bR-panel[data-a="1"].is-on::before{ left:12.5%; }
.bR-panel[data-a="2"].is-on::before{ left:37.5%; }
.bR-panel[data-a="3"].is-on::before{ left:62.5%; }
.bR-panel[data-a="4"].is-on::before{ left:87.5%; }
.bR-body{ display:grid; grid-template-columns:1.45fr 1fr;
border-radius:0 0 17px 17px; overflow:hidden; }
.bR-main{ padding:44px 46px 46px;
background:linear-gradient(160deg,
color-mix(in srgb, var(--sig) 7%, var(--surface-2)) 0%,
var(--surface-2) 70%); }
.bR-kick{ display:flex; align-items:center; gap:9px; margin:0 0 18px;
font-size:.68rem; font-weight:700; letter-spacing:.16em;
text-transform:uppercase; color:var(--sig-ink); }
.bR-kick::before{ content:''; width:7px; height:7px; border-radius:99px;
background:var(--sig); flex:0 0 auto; }
.bR-value{ font-size:1.62rem; font-weight:600; line-height:1.32;
letter-spacing:-.026em; color:var(--text-1); margin:0; text-wrap:balance; }
.bR-side{ padding:44px 42px 46px; border-left:1px solid var(--border); }
.bR-side-h{ font-size:.66rem; font-weight:700; letter-spacing:.16em;
text-transform:uppercase; color:var(--text-3); margin:0 0 16px; }
.bR-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.bR-tags li{ font-size:.81rem; font-weight:650; color:var(--pt);
padding:8px 14px 8px 13px; border-radius:4px 8px 8px 4px;
background:var(--pf);
border:1px solid color-mix(in srgb, var(--pe) 26%, transparent);
border-left:3px solid var(--pe); }
.bR-qual{ text-align:center; font-size:.83rem; color:var(--text-3);
max-width:640px; margin:34px auto 0; }
@media (max-width:899px){
.bR-body{ grid-template-columns:1fr; }
.bR-main{ padding:34px 30px 32px; }
.bR-side{ padding:30px 30px 34px; border-left:0; border-top:1px solid var(--border); }
.bR-value{ font-size:1.36rem; }
}
@media (max-width:640px){
.bR-track{ grid-template-columns:1fr 1fr; border-radius:16px; }
.bR-seg{ padding:12px 9px 13px; border-radius:12px; }
.bR-seg .n{ font-size:.62rem; margin-bottom:5px; }
.bR-seg .t{ font-size:.695rem; letter-spacing:.05em; }
.bR-panel.is-on::before{ display:none; }
.bR-panel.is-on{ border-radius:16px; }
.bR-body{ border-radius:0 0 15px 15px; }
.bR-main{ padding:26px 21px 24px; }
.bR-side{ padding:22px 21px 26px; }
.bR-value{ font-size:1.18rem; line-height:1.36; }
.bR-tags li{ font-size:.775rem; padding:7px 12px 7px 11px; }
.bR-qual{ margin-top:26px; font-size:.79rem; }
}
@media (prefers-reduced-motion: reduce){
.bR-panel.is-on{ animation:none; }
.bR-seg, .bR-seg .n, .bR-seg .t{ transition:none; }
}
.cz-wsp{ position:absolute; width:1px; height:1px; overflow:hidden;
clip-path:inset(50%); white-space:nowrap; }
.cz-mq{ position:relative; z-index:1; padding:34px 0 26px; }
.stats-bar:has(+ .cz-mq){ border-bottom-color:transparent; }
.cz-mq .cz-mq-in{ text-align:center; }
.cz-mq .cz-mq-note{ display:block; font-size:.66rem; font-weight:600;
letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin:0 0 24px; }
.cz-mq + .how{ padding-top:100px; }
.cz-mq.flat{
background-color:var(--surface-1);
background-image:
radial-gradient(ellipse 46% 44% at 50% 50%,
transparent 0%, transparent 34%, var(--surface-1) 100%),
linear-gradient(rgba(var(--fg-rgb), calc(0.015 * var(--grid))) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--fg-rgb), calc(0.015 * var(--grid))) 1px, transparent 1px);
background-size:auto, var(--gridcell) var(--gridcell), var(--gridcell) var(--gridcell);
background-attachment:scroll, scroll, scroll;
background-position:center center, center top, center top;
}
.cz-mq .cz-mq-win{ --v:11px; position:relative; overflow:hidden; width:430px;
margin:0 auto; height:calc(var(--v) * 1.9);
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%,#000 72%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 28%,#000 72%,transparent 100%); }
.cz-mq .cz-mq-trk{ display:flex; align-items:center; height:100%; width:max-content;
will-change:transform; animation:czMq 27.444s linear infinite; }
@keyframes czMq{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
.cz-mq .cz-mq-trk:has(.fx:hover){ animation-play-state:paused; }
.cz-mq .lgm{ display:block; flex:0 0 auto; margin-right:109.9px;
transform:translateY(calc(var(--v) * var(--T) * -1)); }
.cz-mq .lgm img, .cz-mq .sh{ filter:brightness(0) opacity(.52); }
.cz-mq .lgm img{ display:block; height:calc(var(--v) * var(--K));
width:calc(var(--v) * var(--W)); filter:brightness(0) opacity(.52); }
[data-theme="dark"] .cz-mq .lgm img, [data-theme="dark"] .cz-mq .sh{ filter:brightness(0) invert(1) opacity(.44); }
.cz-mq .fr{ position:relative; display:block; }
.cz-mq .fr .whole{ transition:opacity 0s .52s; }
.cz-mq .shards{ position:absolute; inset:0; opacity:0; transition:opacity 0s .52s; }
.cz-mq .sh{ position:absolute; inset:0; transform-origin:48% 52%;
background-image:var(--img); background-size:100% 100%; background-repeat:no-repeat;
transition:transform .52s cubic-bezier(.33,0,.2,1), filter .52s ease; }
.cz-mq .fx:hover .whole{ opacity:0; transition:opacity 0s 0s; }
.cz-mq .fx:hover .shards{ opacity:1; transition:opacity 0s 0s; }
.cz-mq .fx:hover .sh{
transition:transform .34s cubic-bezier(.2,1.5,.32,1), filter .34s ease;
filter:brightness(0) opacity(.60); }
[data-theme="dark"] .cz-mq .fx:hover .sh{ filter:brightness(0) invert(1) opacity(.52); }
.cz-mq .s1{ -webkit-clip-path:polygon(48% 52%, 0% 0%, 38% 0%); clip-path:polygon(48% 52%, 0% 0%, 38% 0%); }
.cz-mq .fx:hover .s1{ transform:translate(calc(var(--v) * -0.2353), calc(var(--v) * -0.2059)) rotate(-2.4deg); }
.cz-mq .s2{ -webkit-clip-path:polygon(48% 52%, 38% 0%, 100% 0%, 100% 22%); clip-path:polygon(48% 52%, 38% 0%, 100% 0%, 100% 22%); }
.cz-mq .fx:hover .s2{ transform:translate(calc(var(--v) * 0.1765), calc(var(--v) * -0.2647)) rotate(1.8deg); }
.cz-mq .s3{ -webkit-clip-path:polygon(48% 52%, 100% 22%, 100% 68%); clip-path:polygon(48% 52%, 100% 22%, 100% 68%); }
.cz-mq .fx:hover .s3{ transform:translate(calc(var(--v) * 0.2941), calc(var(--v) * -0.0588)) rotate(2.6deg); }
.cz-mq .s4{ -webkit-clip-path:polygon(48% 52%, 100% 68%, 100% 100%, 62% 100%); clip-path:polygon(48% 52%, 100% 68%, 100% 100%, 62% 100%); }
.cz-mq .fx:hover .s4{ transform:translate(calc(var(--v) * 0.2059), calc(var(--v) * 0.2059)) rotate(-1.6deg); }
.cz-mq .s5{ -webkit-clip-path:polygon(48% 52%, 62% 100%, 0% 100%, 0% 62%); clip-path:polygon(48% 52%, 62% 100%, 0% 100%, 0% 62%); }
.cz-mq .fx:hover .s5{ transform:translate(calc(var(--v) * -0.1471), calc(var(--v) * 0.2647)) rotate(2.2deg); }
.cz-mq .s6{ -webkit-clip-path:polygon(48% 52%, 0% 62%, 0% 0%); clip-path:polygon(48% 52%, 0% 62%, 0% 0%); }
.cz-mq .fx:hover .s6{ transform:translate(calc(var(--v) * -0.2941), calc(var(--v) * 0.0588)) rotate(-2.8deg); }
.cz-mq .m-deviniti{ --img:url(assets/client-deviniti.webp); --K:1.0390; --W:5.8389; --T:0.1355; }
.cz-mq .m-consertus{ --img:url(assets/client-consertus.webp); --K:1.3786; --W:7.0697; --T:-0.0110; }
.cz-mq .m-celona{ --img:url(assets/client-celona.webp); --K:0.9788; --W:4.3153; --T:0.1195; }
.cz-mq .m-kinetic3{ --img:url(assets/client-kinetic3.webp); --K:1.0460; --W:4.4483; --T:0.1355; }
.cz-mq .m-trundl{ --img:url(assets/client-trundl.webp); --K:1.0139; --W:4.1740; --T:0.1285; }
.cz-mq .m-hunters{ --img:url(assets/client-hunters.webp); --K:1.0650; --W:6.5038; --T:0.1680; }
.cz-mq .m-tdc{ --img:url(assets/client-tdc.webp); --K:1.0391; --W:2.5016; --T:0.1355; }
@media (max-width:768px){
.cz-mq{ padding:26px 0 20px; }
.cz-mq .cz-mq-note{ margin-bottom:18px; }
.cz-mq + .how{ padding-top:56px; }
}
@media (max-width:640px){
.cz-mq .cz-mq-win{ --v:9.06px; width:78%; }
.cz-mq .cz-mq-trk{ animation-duration:20.285s; }
.cz-mq .lgm{ margin-right:76.6px; }
}
@media (prefers-reduced-motion:reduce){
.cz-mq .cz-mq-trk{ animation:none; transform:none; justify-content:center; width:100%; }
.cz-mq .cz-mq-trk > .lgm:nth-child(n+8){ display:none; }
.cz-mq .cz-mq-trk > .lgm:nth-child(7){ margin-right:0; }
.cz-mq .shards{ display:none; }
.cz-mq .fx:hover .whole{ opacity:1; }
}
.sc-after{ grid-column:1 / -1;
max-width:none; margin:64px 0 0; }
.sc-after-lead{ text-align:center; margin:0 0 38px; }
.sc-after-label{ display:inline-flex; align-items:stretch; border-radius:10px;
overflow:hidden; border:1px solid rgba(var(--accent-rgb),.32);
background:var(--surface-2); box-shadow:0 2px 8px rgba(var(--shadow-rgb),.06); }
.sc-after-label .n{ display:grid; place-items:center; background:var(--accent);
color:#fff; font-size:.74rem; font-weight:800; line-height:1;
padding:0 14px; letter-spacing:0; }
[data-theme="dark"] .sc-after-label .n{ color:var(--on-accent); }
.sc-after-label .t{ padding:9px 15px 9px 14px; font-size:.66rem; font-weight:800;
letter-spacing:.13em; text-transform:uppercase; color:var(--text-1); }
.sc-after-line{ margin:20px 0 0; font-size:.98rem; line-height:1.5; font-weight:600;
letter-spacing:-.01em; color:var(--text-1); }
.sc-after-note{ margin:14px auto 0; font-size:.9rem; line-height:1.6;
color:var(--text-3); max-width:560px; }
@media (max-width:560px){
.sc-after{ margin-top:24px; }
.sc-after-line{ font-size:.9rem; }
.sc-after-note{ font-size:.84rem; }
.sc-after-label{ font-size:.58rem; letter-spacing:.13em; } }
:root{
--gridfade-w:70%;
--gridfade-h:50%;
--gridfade-y:30%;
--gridfade-in:20%;
--gridfade-out:80%;
}
.grid-overlay{
-webkit-mask-image:radial-gradient(ellipse var(--gridfade-w) var(--gridfade-h) at 50% var(--gridfade-y), #000 var(--gridfade-in), transparent var(--gridfade-out));
mask-image:radial-gradient(ellipse var(--gridfade-w) var(--gridfade-h) at 50% var(--gridfade-y), #000 var(--gridfade-in), transparent var(--gridfade-out)); }
html[data-gridfade="off"] .grid-overlay{ -webkit-mask-image:none; mask-image:none; }
html[data-grid="off"] { --grid:0; }
html[data-grid="subtle"] { --grid:0.90; }
html[data-grid="strong"] { --grid:2.60; }
html[data-grid="off"] .grid-overlay{ background-image:none; }
.czg{ position:fixed; z-index:10000; right:18px; bottom:18px; width:260px;
padding:15px 16px 14px; border-radius:14px;
background:var(--surface-2); color:var(--text-1);
border:1px solid var(--border); box-shadow:0 14px 40px rgba(var(--shadow-rgb),.20);
font-size:.8rem; line-height:1.4; }
.czg .czg-h{ margin:0 0 12px; font-size:.62rem; font-weight:800; letter-spacing:.13em;
text-transform:uppercase; color:var(--text-3);
display:flex; align-items:center; justify-content:space-between; }
.czg h6 button{ all:unset; cursor:pointer; font-size:.9rem; line-height:1; color:var(--text-3); padding:0 2px; }
.czg label{ display:block; margin:0 0 4px; font-size:.7rem; font-weight:700; color:var(--text-2); }
.czg .czg-row{ margin:0 0 13px; }
.czg input[type=range]{ width:100%; accent-color:var(--accent); margin:0; }
.czg .czg-val{ float:right; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; }
.czg .czg-btns{ display:flex; gap:6px; }
.czg .czg-btns button{ flex:1; cursor:pointer; font:inherit; font-size:.7rem; font-weight:700;
padding:7px 0; border-radius:8px; border:1px solid var(--border);
background:var(--surface-3); color:var(--text-2); }
.czg .czg-btns button.on{ background:rgba(var(--accent-rgb),.12);
border-color:rgba(var(--accent-rgb),.35); color:var(--accent); }
.czg code{ display:block; margin:11px 0 0; padding:8px 9px; border-radius:8px;
background:rgba(var(--fg-rgb),.05); font-size:.63rem; line-height:1.5;
color:var(--text-2); word-break:break-all; }
.sc-after{ min-width:0; }
.cz-rows{ max-width:1020px; margin:0 auto; min-width:0; }
.cz-track + .cz-track{ margin-top:14px; }
:root{ --cz-gut-l:45%; --cz-gut-r:45%; }
.cz-track{ overflow:hidden; min-width:0; padding:4px 0;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--cz-gut-l),
#000 calc(100% - var(--cz-gut-r)),transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 var(--cz-gut-l),
#000 calc(100% - var(--cz-gut-r)),transparent 100%); }
.cz-row{ display:flex; gap:14px; width:max-content; will-change:transform; }
.cz-row-a{ animation:czRowA 70s linear infinite; }
.cz-row-b{ animation:czRowB 70s linear infinite; }
@keyframes czRowA{ from{ transform:translateX(0) } to{ transform:translateX(-3540px) } }
@keyframes czRowB{ from{ transform:translateX(-3540px) } to{ transform:translateX(0) } }
@keyframes czRowAt{ from{ transform:translateX(0) } to{ transform:translateX(-3320px) } }
@keyframes czRowBt{ from{ transform:translateX(-3320px) } to{ transform:translateX(0) } }
@keyframes czRowAm{ from{ transform:translateX(0) } to{ transform:translateX(-2820px) } }
@keyframes czRowBm{ from{ transform:translateX(-2820px) } to{ transform:translateX(0) } }
.cz-vc{ display:flex; align-items:center; gap:13px; flex:0 0 auto;
width:340px; max-width:340px; height:92px; box-sizing:border-box; margin:0;
padding:13px 15px;
background:var(--surface-2); border:1px solid var(--border); border-radius:14px;
box-shadow:0 3px 14px rgba(var(--shadow-rgb),.07); }
.cz-vc-thumb{ flex:0 0 112px; aspect-ratio:16/9; border-radius:8px; overflow:hidden;
background:var(--surface-3); }
.cz-vc-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.cz-vc-meta{ min-width:0; display:flex; flex-direction:column; justify-content:center; }
.cz-vc-title{ font-size:.80rem; font-weight:700; color:var(--text-1); letter-spacing:-.01em;
line-height:1.25; margin:0 0 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cz-vc-sub{ font-size:.70rem; line-height:1.3; color:var(--text-3); margin:0 0 7px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cz-vc-badge{ align-self:flex-start; font-size:.60rem; font-weight:700; color:var(--sage-tx);
line-height:1.3; background:var(--sage-bg); border-radius:99px; padding:3px 9px; }
@media (max-width:1024px){
:root{ --cz-gut-l:45%; --cz-gut-r:45%; }
.cz-rows{ max-width:none; }
.cz-row{ gap:12px; }
.cz-vc{ width:320px; max-width:320px; }
.cz-row-a{ animation-name:czRowAt; animation-duration:65.7s; }
.cz-row-b{ animation-name:czRowBt; animation-duration:65.7s; } }
@media (max-width:600px){
:root{ --cz-gut-l:45%; --cz-gut-r:45%; }
.cz-track{ padding:3px 0; }
.cz-track + .cz-track{ margin-top:10px; }
.cz-row{ gap:10px; }
.cz-vc{ width:272px; max-width:272px; height:84px; padding:11px 12px; gap:11px;
border-radius:12px; }
.cz-vc-thumb{ flex-basis:96px; }
.cz-vc-title{ font-size:.74rem; margin:0 0 4px; }
.cz-vc-sub{ font-size:.66rem; margin:0 0 6px; }
.cz-vc-badge{ font-size:.57rem; padding:3px 8px; }
.cz-row-a{ animation-name:czRowAm; animation-duration:55.8s; }
.cz-row-b{ animation-name:czRowBm; animation-duration:55.8s; } }
@media (prefers-reduced-motion: reduce){ .cz-row{ animation:none; } }
@media (min-width: 769px){
.cta-buttons, .hero-buttons{ align-items:stretch; }
}
.cta-buttons .btn, .hero-buttons .btn{ padding:16px 28px; min-height:48px; box-sizing:border-box; }
.cta-dot{ width:10px; height:10px; }
.cta-d1{ background:#7C3AED; box-shadow:0 0 0 3px rgba(124,58,237,.18); }
.cta-d2{ background:#EA580C; box-shadow:0 0 0 3px rgba(234,88,12,.18); }
.cta-d3{ background:#059669; box-shadow:0 0 0 3px rgba(5,150,105,.18); }
[data-theme="dark"] .cta-d1{ background:#A78BFA; box-shadow:0 0 0 3px rgba(167,139,250,.22); }
[data-theme="dark"] .cta-d2{ background:#FB923C; box-shadow:0 0 0 3px rgba(251,146,60,.22); }
[data-theme="dark"] .cta-d3{ background:#34D399; box-shadow:0 0 0 3px rgba(52,211,153,.22); }
.cta-pill{ gap:11px; }
@keyframes ctaDotPulse{
0%,100%{ transform:scale(1); opacity:1; }
50% { transform:scale(.84); opacity:.55; } }
.cta-dot{ animation:ctaDotPulse 2.6s ease-in-out infinite; will-change:transform,opacity; }
.cta-pill:nth-of-type(2) .cta-dot{ animation-delay:.43s; }
.cta-pill:nth-of-type(3) .cta-dot{ animation-delay:.86s; }
@media (prefers-reduced-motion: reduce){ .cta-dot{ animation:none; } }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:1000;
background:var(--accent); color:#fff; padding:10px 18px; border-radius:0 0 8px 0;
font-size:.85rem; font-weight:700; text-decoration:none; }
.skip-link:focus{ left:0; }
[data-theme="dark"] .skip-link{ color:var(--on-accent); }
.reveal{opacity:1!important;transform:none!important;}
:root{ --seam-fade:160px;
--seam-stops: #000 0, rgba(0,0,0,.9) calc(var(--seam-fade) * .2), rgba(0,0,0,.65) calc(var(--seam-fade) * .4),
rgba(0,0,0,.35) calc(var(--seam-fade) * .6), rgba(0,0,0,.1) calc(var(--seam-fade) * .8), transparent var(--seam-fade); }
@media (max-width:767px){ :root{ --seam-fade:110px; } }
.system-flow{ z-index:1; }
.cz-bridge{ position:relative; z-index:1; }
.hero::after, .cz-bridge::before, .system-flow::after,
.comparison::after, .pricing::after, .cta-section::after{
content:''; position:absolute; inset:-1px 0; z-index:-1; pointer-events:none;
background:var(--surface-1); }
.cz-bridge::before{
-webkit-mask-image:linear-gradient(180deg, #000 0, rgba(0,0,0,.9) 20%, rgba(0,0,0,.65) 40%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.1) 80%, transparent 100%);
mask-image:linear-gradient(180deg, #000 0, rgba(0,0,0,.9) 20%, rgba(0,0,0,.65) 40%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.1) 80%, transparent 100%); }
.system-flow::after{
-webkit-mask-image:linear-gradient(0deg, var(--seam-stops));
mask-image:linear-gradient(0deg, var(--seam-stops)); }
.hero::after{
-webkit-mask-image:linear-gradient(0deg, #000 0, #000 80px, rgba(0,0,0,.9) calc(80px + var(--seam-fade) * .2), rgba(0,0,0,.65) calc(80px + var(--seam-fade) * .4), rgba(0,0,0,.35) calc(80px + var(--seam-fade) * .6), rgba(0,0,0,.1) calc(80px + var(--seam-fade) * .8), transparent calc(80px + var(--seam-fade)));
mask-image:linear-gradient(0deg, #000 0, #000 80px, rgba(0,0,0,.9) calc(80px + var(--seam-fade) * .2), rgba(0,0,0,.65) calc(80px + var(--seam-fade) * .4), rgba(0,0,0,.35) calc(80px + var(--seam-fade) * .6), rgba(0,0,0,.1) calc(80px + var(--seam-fade) * .8), transparent calc(80px + var(--seam-fade))); }
.comparison::after, .pricing::after, .cta-section::after{
-webkit-mask-image:linear-gradient(180deg, var(--seam-stops)), linear-gradient(0deg, var(--seam-stops));
mask-image:linear-gradient(180deg, var(--seam-stops)), linear-gradient(0deg, var(--seam-stops)); }
html:not([data-theme="dark"]) .section-label{ color:#B44924; }
html:not([data-theme="dark"]) .hero .badge .badge-lead{ color:#646463; }
html:not([data-theme="dark"]) .btn-glass{ color:#A8380A; }
.footer{ border-top:0; }
.footer-mail{ display:inline-flex; align-items:center; gap:8px; margin-top:14px;
font-size:0.854rem; line-height:1.6; }
.footer-mail svg{ width:15px; height:15px; flex:none; }
.footer a.cz-mail{ position:relative; }
.footer a.cz-mail::after{ content:''; position:absolute; left:0; right:0; top:50%;
height:44px; transform:translateY(-50%); }
.bR [data-a]{ --sig:#C84E29; --sig-ink:#B54725; }
[data-theme="dark"] .bR [data-a]{ --sig:#BE4A27; --sig-ink:#DE7D60; }
.bR-seg .n{ opacity:1; }
.bR-seg[aria-selected="true"] .n{ color:#FFFFFF; }
[data-theme="dark"] .bR-seg[aria-selected="true"] .n{ color:#FFF3EC; }
.hero-screen.screen-border-travel::before{
animation:none;
background:conic-gradient(from 0deg,
var(--accent-light) 0deg, rgba(var(--accent-rgb),.5) 45deg, transparent 100deg,
transparent 260deg, rgba(var(--accent-rgb),.5) 315deg, var(--accent-light) 360deg);
}
.hero-screen.cz-dash-idle *, .hero-screen.cz-dash-idle *::before,
.hero-screen.cz-dash-idle *::after{ animation-play-state:paused !important; }
.vd-connector{ container-type:inline-size; }
@keyframes vd-dot-flow-x{
0% { transform:translateX(0); opacity:.3; }
10% { opacity:1; }
90% { opacity:1; }
100% { transform:translateX(100cqw); opacity:.3; }
}
.vd-connector.flowing::after{ animation:vd-dot-flow-x 1.8s linear infinite !important; }
.dc-bar{ height:var(--h); transform:scaleY(0); transform-origin:center bottom;
transition:transform .9s cubic-bezier(0.22,0.9,0.3,1); }
.dash-chart.play .dc-bar{ transform:scaleY(1); }
.du-fill{ width:var(--w); transform:scaleX(0); transform-origin:left center;
transition:transform 1s cubic-bezier(0.22,0.9,0.3,1); }
.dash-usage.play .du-fill{ transform:scaleX(1); }
.screen-hint{ -webkit-backdrop-filter:none; backdrop-filter:none;
background:linear-gradient(rgba(var(--shadow-rgb),.5), rgba(var(--shadow-rgb),.5)), var(--surface-0); }
.ft-track, .ft-foot, .ft-glide{ display:none; }
.features[data-ftg="0"]{ --gj:#8A3FB0; --gb:#C68BE0; }
.features[data-ftg="1"]{ --gj:#936622; --gb:#D2A866; }
.features[data-ftg="2"]{ --gj:#2774A7; --gb:#79B2D9; }
.features[data-ftg="3"]{ --gj:#1E7F45; --gb:#6FD196; }
.ft-seg[data-g="0"]{ --sd:#7A3594; --sb:#C68BE0; --sv:#A24BC9; }
.ft-seg[data-g="1"]{ --sd:#7A5418; --sb:#D2A866; --sv:#C58526; }
.ft-seg[data-g="2"]{ --sd:#225F8C; --sb:#79B2D9; --sv:#3899D9; }
.ft-seg[data-g="3"]{ --sd:#1B6E3C; --sb:#6FD196; --sv:#20A655; }
.features.ft-on .features-header{ margin-bottom:68px; }
.features.ft-on .ft-wrap{ position:relative; max-width:1180px; margin:0 auto; }
.features.ft-on .ft-track{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; position:relative;
isolation:isolate; margin:0 0 14px; z-index:1; background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.85);
border-radius:999px; padding:6px; box-shadow:0 10px 30px rgba(60,40,30,.08), inset 0 1px 0 rgba(255,255,255,.9); }
[data-theme="dark"] .features.ft-on .ft-track{ background:rgba(46,38,33,.62); border-color:rgba(255,255,255,.1);
box-shadow:0 10px 30px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06); }
.ft-seg{ appearance:none; border:0; background:transparent; font-family:inherit; cursor:pointer; position:relative;
z-index:1; text-align:center; padding:13px 10px 14px; border-radius:999px; color:var(--text-2);
transition:color .25s ease, background-color .25s ease; }
.ft-seg .n{ display:inline-block; font-size:.6875rem; font-weight:700; letter-spacing:.16em; margin-bottom:6px; }
.ft-seg .t{ display:block; font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; line-height:1.3; }
.ft-seg .d{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:7px; vertical-align:1px;
color:var(--sv); background:currentColor; }
.ft-seg:not([aria-selected="true"]) .n{ color:var(--sd); }
.ft-seg:not([aria-selected="true"]):hover{ color:var(--text-1); }
.ft-seg:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
[data-theme="dark"] .ft-seg .d{ color:var(--sb); }
[data-theme="dark"] .ft-seg:not([aria-selected="true"]) .n{ color:var(--sb); }
.features.ft-on .ft-glide{ display:block; position:absolute; left:0; top:0; z-index:0; pointer-events:none;
border-radius:999px; width:var(--gw,0); height:var(--gh,0); transform:translate(var(--gx,0), var(--gy,0));
background:#1F1714;
box-shadow:0 10px 26px color-mix(in srgb, var(--gj) 42%, transparent), inset 0 1px 0 rgba(255,255,255,.08);
transition:transform .38s cubic-bezier(.3,1,.4,1), width .38s cubic-bezier(.3,1,.4,1), height .38s,
background-color .38s, box-shadow .38s; }
[data-theme="dark"] .features.ft-on .ft-glide{ background:#0F0B09;
box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--gb) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.07), 0 8px 22px rgba(0,0,0,.4); }
.ft-seg[aria-selected="true"]{ color:#FFF7F2; }
.ft-seg[aria-selected="true"] .n{ color:var(--sb); }
.ft-seg[aria-selected="true"] .d{ color:var(--sb); animation:ftDotBlink 1.6s ease-in-out infinite; }
@keyframes ftDotBlink{
0% { opacity:1; box-shadow:0 0 0 0 currentColor; }
50% { opacity:.35; }
70% { box-shadow:0 0 0 6px transparent; }
100%{ opacity:1; box-shadow:0 0 0 6px transparent; } }
.features.ft-on .ft-glide::after{ content:''; position:absolute; left:50%; bottom:7px; width:34px; height:2px;
border-radius:2px; background:var(--gb); transform:translateX(-50%); transform-origin:50% 50%; }
.features.ft-on .ft-glide.ft-draw::after{ animation:ftLineIn .42s .22s cubic-bezier(.3,1,.4,1) both; }
@keyframes ftLineIn{ from{ transform:translateX(-50%) scaleX(0); opacity:.2; } to{ transform:translateX(-50%) scaleX(1); opacity:1; } }
.features.ft-on .ft-wrap::before{ content:''; position:absolute; inset:-36px -24px; z-index:0; pointer-events:none; border-radius:48px;
background:
radial-gradient(38% 46% at 8% 12%, rgba(162,75,201,.26), transparent 70%),
radial-gradient(34% 44% at 92% 8%, rgba(253,141,104,.26), transparent 70%),
radial-gradient(36% 46% at 12% 92%, rgba(56,153,217,.20), transparent 70%),
radial-gradient(36% 44% at 90% 94%, rgba(32,166,85,.18), transparent 70%); }
[data-theme="dark"] .features.ft-on .ft-wrap::before{ opacity:.7; }
.features.ft-on .ft-stage{ --sp:22px; position:relative; z-index:1; padding:var(--sp); border-radius:26px;
background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.85);
box-shadow:0 18px 44px rgba(60,40,30,.08), inset 0 1px 0 rgba(255,255,255,.9); }
[data-theme="dark"] .features.ft-on .ft-stage{ background:rgba(36,29,25,.6); border-color:rgba(255,255,255,.08);
box-shadow:0 18px 44px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05); }
.features.ft-on .pc{ position:relative; z-index:1; }
.features.ft-on .pc-c:not(.ft-show){ display:none; }
.features.ft-on .pc-c.ft-in{ animation:ftIn .32s ease both; }
@keyframes ftIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.features.ft-on .ft-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin:12px 0 -6px;
position:relative; z-index:1; }
.ft-next[data-n="0"]{ --nx:#7A3594; --nxb:#C68BE0; }
.ft-next[data-n="1"]{ --nx:#7A5418; --nxb:#D2A866; }
.ft-next[data-n="2"]{ --nx:#225F8C; --nxb:#79B2D9; }
.ft-next[data-n="3"]{ --nx:#1B6E3C; --nxb:#6FD196; }
.ft-next{ appearance:none; cursor:pointer; font-family:inherit; margin-left:auto;
display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 6px 0 16px; border-radius:999px;
font-size:.875rem; font-weight:600; color:var(--text-2); white-space:nowrap;
background:rgba(var(--fg-rgb),.045); border:1px solid rgba(var(--fg-rgb),.14);
transition:border-color .2s ease, background-color .2s ease; }
.ft-next b{ font-weight:700; color:var(--text-1); }
.ft-next .ar{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:30px; height:30px;
border-radius:50%; background:var(--nx); color:#FFFFFF; transition:background-color .25s ease; }
[data-theme="dark"] .ft-next .ar{ background:var(--nxb); color:#0F0B09; }
.ft-next svg{ width:15px; height:15px; flex:none; transition:transform .2s ease; }
.ft-next:hover{ background:rgba(var(--fg-rgb),.075); border-color:color-mix(in srgb, var(--nx) 55%, transparent); }
[data-theme="dark"] .ft-next:hover{ border-color:color-mix(in srgb, var(--nxb) 55%, transparent); }
.ft-next:hover svg{ transform:translateX(2px); }
.ft-next:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.ft-step{ display:none; align-items:center; gap:6px; }
.features.ft-on .ft-foot.can .ft-step{ display:inline-flex; }
.ft-step button{ appearance:none; cursor:pointer; font-family:inherit; display:inline-grid; place-items:center;
width:32px; height:32px; border-radius:50%; padding:0; color:var(--text-1);
background:rgba(var(--fg-rgb),.045); border:1px solid rgba(var(--fg-rgb),.16); position:relative;
transition:opacity .2s ease, border-color .2s ease; }
.ft-step button::after{ content:''; position:absolute; inset:-6px; }
.ft-step button svg{ width:14px; height:14px; }
.ft-step button:disabled{ opacity:.35; cursor:default; }
.ft-step button:not(:disabled):hover{ border-color:rgba(var(--fg-rgb),.3); }
.ft-step button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ft-step .ft-n{ min-width:34px; text-align:center; font-size:.75rem; font-weight:600; color:var(--text-2); }
.ft-step .ft-n b{ color:var(--text-1); font-weight:700; }
@media (max-width:1020px){
.features.ft-on .ft-stage{ --sp:16px; overflow:hidden; }
.features.ft-on .pc{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px;
padding:10px var(--sp) 18px; margin:-10px calc(-1 * var(--sp)) 0; scroll-padding-inline:var(--sp);
scrollbar-width:none; overscroll-behavior-x:contain; }
.features.ft-on .pc::-webkit-scrollbar{ display:none; }
.features.ft-on .pc-c{ flex:0 0 calc(50% - 7px); scroll-snap-align:start; }
.features.ft-on .ft-foot{ margin:0 0 2px; }
}
@media (max-width:680px){
.features.ft-on .ft-wrap::before{ border-radius:36px; }
.features.ft-on .ft-track{ grid-template-columns:1fr 1fr; border-radius:22px; }
.ft-seg{ padding:11px 8px 12px; border-radius:16px; }
.features.ft-on .ft-glide{ border-radius:16px; }
.features.ft-on .ft-glide::after{ bottom:6px; }
.ft-seg .t{ font-size:.72rem; letter-spacing:.05em; }
.ft-next{ font-size:.8125rem; gap:8px; padding-left:14px; }
.features.ft-on .pc-c{ flex-basis:80%; }
}
@media (max-width:480px){
.features.ft-on .ft-stage{ --sp:12px; border-radius:20px; }
.features.ft-on .ft-wrap::before{ inset:-24px -12px; border-radius:32px; }
.features.ft-on .features-header{ margin-bottom:56px; }
}
@media (max-width:400px){
.features.ft-on .ft-stage{ --sp:10px; }
.features.ft-on .pc{ gap:10px; }
.features.ft-on .pc-c{ flex-basis:calc(100% - 48px); }
}
@media (max-width:360px){
.ft-next .pfx{ display:none; }
.features.ft-on .pc-c{ flex-basis:calc(100% - 26px); }
}
@media (min-width:1300px){ .features.ft-on .ft-wrap::before{ inset:-40px -48px; } .features.ft-on .features-header{ margin-bottom:72px; } }
@media (prefers-reduced-motion: reduce){
.ft-seg[aria-selected="true"] .d{ animation:none; }
.features.ft-on .ft-glide.ft-draw::after{ animation:none; }
.features.ft-on .pc-c.ft-in{ animation:none; }
.features.ft-on .ft-glide, .ft-seg{ transition:none; }
}
.uline{ position:relative; isolation:isolate; padding:0 0.12em; background-image:none; }
[data-theme="dark"] .uline{ background-image:none; }
.uline::before{ content:''; position:absolute; left:0; right:0; z-index:-1;
top:calc(0.55em - 0.0238em); bottom:calc(0.55em - 0.575em);
top:calc(0.5lh - 0.0238em); bottom:calc(0.5lh - 0.575em);
background:linear-gradient(100deg, rgba(253,141,104,0.62), rgba(255,95,109,0.62));
border-radius:0.06em; }
@media (min-width:769px){ .footer-brand p{ max-width:440px; } }
#system, #features, #showcase, #comparison, #developers, #audience, #safety, #pricing, #faq,
.cta-section{ padding-top:96px; padding-bottom:96px; }
#how, #agentlog{ padding-bottom:96px; }
@media (max-width:1024px){
#system, #features, #showcase, #comparison, #developers, #audience, #safety, #pricing, #faq,
.cta-section{ padding-top:80px; padding-bottom:80px; }
#how, #agentlog{ padding-bottom:80px; }
}
@media (max-width:768px){
#system, #features, #showcase, #comparison, #developers, #audience, #safety, #pricing, #faq,
.cta-section{ padding-top:64px; padding-bottom:64px; }
#how, #agentlog{ padding-bottom:64px; }
}
@keyframes howRail{ 0%{ top:62px; opacity:0; } 15%{ opacity:1; } 85%{ opacity:.4; } 100%{ top:calc(100% - 10px); opacity:0; } }
@media (max-width:768px){
.how .how-header{ margin-bottom:44px; }
.how .how-steps{ gap:0; max-width:560px; margin:0 auto; }
.how .how-step{ display:grid; grid-template-columns:52px minmax(0,1fr); column-gap:18px; align-items:start;
text-align:left; padding:0 0 28px; }
.how .how-step:last-child{ padding-bottom:0; }
.how .how-step .step-circle{ grid-row:1 / span 2; width:52px; height:52px; margin:0; }
.how .how-step .step-circle svg{ width:22px; height:22px; }
.how .how-step h3{ grid-column:2; margin:4px 0 5px; }
.how .how-step p{ grid-column:2; margin:0; }
.how .how-step::after{ position:absolute; left:25px; top:62px; bottom:8px; height:auto; width:2px; margin:0; }
.how .how-step::before{ left:26px; margin-left:-3px; bottom:auto; top:62px; animation-name:howRail; }
}
.pc-row > .pc-mono{ min-width:0; overflow-wrap:anywhere; }
@media (max-width:480px){ .pc-row .pc-type{ display:none; } }
.pc-row:has(.pc-sub){ align-items:flex-start; }
.am-card-ic.c2{ background:rgba(var(--bt-amber-rgb),0.18); color:var(--bt-amber);
box-shadow:inset 0 0 0 1px rgba(var(--bt-amber-rgb),0.3); }
@media (max-width:768px){
#viewAgentSelect .ca-reco-badge{ top:7px; left:50%; right:auto; transform:translateX(-50%); white-space:nowrap; }
#viewAgentSelect .ca-card{ padding-top:32px; }
}
@media (max-width:480px){
#viewAgentSelect .ca-reco-badge{ top:5px; }
#viewAgentSelect .ca-card{ padding-top:22px; }
}
.lr-avatar, .chat-ava{ overflow:hidden; }
.lr-avatar img, .convo-avatar img, .cd-profile-avatar img, .cd-ava img, .chat-ava img{
display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
img.pc-face{ object-fit:cover; background:var(--surface-2); }
.mv-card-row .mv-val img.mv-ava{ object-fit:cover; flex-shrink:0; }
@media (max-width:1020px){ .pc-row-x{ display:none; } }