/*
HoraSync — Diseño v2
Aplicado cuando está activo.
Todos los estilos bajo [data-v2] salvo los elementos que
están ocultos en v1 con display:none.
v1 (style.css) no se modifica.
*/
/* Hide horizontal slider in v2 (v2 has its own hero visual) */
[data-v2] .screenshots-slider { display: none; }
/* ══════════════════════════════════════════════════════════
TOKENS
══════════════════════════════════════════════════════════ */
[data-v2] {
--primary: #10b981;
--primary-dark: #059669;
--primary-light: #f0fdf4;
--primary-border: #bbf7d0;
--text: #0d0d0d;
--text-2: #52525b;
--text-3: #a1a1aa;
--border: #e4e4e7;
--border-dark: #27272a;
--bg: #ffffff;
--bg-subtle: #fafafa;
--bg-dark: #09090b;
--bg-dark-2: #18181b;
--radius: 8px;
}
/* ══════════════════════════════════════════════════════════
GLOBAL RESET
══════════════════════════════════════════════════════════ */
[data-v2] body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
}
/* Disable scroll-in animations — design is intentionally static */
[data-v2] .feature-card,
[data-v2] .pricing-card,
[data-v2] .step {
opacity: 1 !important;
transform: none !important;
}
/* ══════════════════════════════════════════════════════════
HEADER
══════════════════════════════════════════════════════════ */
[data-v2] .header {
background: #fff;
border-bottom: 1px solid var(--border);
backdrop-filter: none;
box-shadow: none;
}
[data-v2] .header.scrolled {
box-shadow: none;
border-bottom: 1px solid var(--border);
}
[data-v2] .nav {
height: 60px;
}
[data-v2] .logo {
font-size: 1.1rem;
font-weight: 700;
letter-spacing: -0.4px;
color: var(--text);
background: none;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
}
[data-v2] .logo-dot {
color: var(--primary);
background: none;
-webkit-text-fill-color: unset;
}
[data-v2] .nav-links a {
font-size: 0.875rem;
font-weight: 450;
color: var(--text-2);
text-decoration: none;
}
[data-v2] .nav-links a:hover {
color: var(--text);
}
[data-v2] .nav .btn-primary {
background: var(--text);
color: #fff;
border-radius: var(--radius);
font-size: 0.85rem;
padding: 9px 18px;
font-weight: 500;
box-shadow: none;
}
[data-v2] .nav .btn-primary:hover {
background: #27272a;
transform: none;
box-shadow: none;
}
/* ══════════════════════════════════════════════════════════
HERO
══════════════════════════════════════════════════════════ */
[data-v2] .hero {
background: #fff;
padding: 80px 0 72px;
min-height: auto;
}
[data-v2] .hero .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
[data-v2] .hero-content {
max-width: none;
text-align: left;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
[data-v2] .badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border: 1px solid var(--border);
border-radius: 100px;
font-size: 0.78rem;
font-weight: 500;
color: var(--text-2);
background: transparent;
box-shadow: none;
animation: none;
}
[data-v2] .badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--primary);
flex-shrink: 0;
}
[data-v2] .hero h1 {
font-size: clamp(2.4rem, 4vw, 3.6rem);
font-weight: 800;
letter-spacing: -2.5px;
line-height: 1.05;
color: var(--text);
background: none;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
}
[data-v2] .gradient-text {
background: none;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
color: var(--primary);
}
[data-v2] .hero-subtitle {
font-size: 1.05rem;
color: var(--text-2);
line-height: 1.65;
max-width: 420px;
}
[data-v2] .hero-cta {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
[data-v2] .hero-cta .btn-primary {
background: var(--primary);
color: #fff;
border-radius: var(--radius);
font-size: 0.9rem;
font-weight: 600;
padding: 11px 22px;
box-shadow: none;
border: none;
}
[data-v2] .hero-cta .btn-primary:hover {
background: var(--primary-dark);
transform: none;
box-shadow: none;
}
/* Hide v1 carousel in v2 */
[data-v2] .hero-image {
display: none !important;
}
/* ══════════════════════════════════════════════════════════
BROWSER MOCKUP (hero-visual-v2)
══════════════════════════════════════════════════════════ */
/* Hidden in v1, shown in v2 */
.hero-visual-v2 {
display: none;
}
[data-v2] .hero-visual-v2 {
display: block;
}
[data-v2] .browser-chrome {
border-radius: 10px;
border: 1px solid #d4d4d8;
overflow: hidden;
box-shadow: 0 24px 64px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.06);
background: #fff;
font-family: 'Inter', system-ui, sans-serif;
}
[data-v2] .browser-bar {
background: #f4f4f5;
padding: 10px 14px;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid #e4e4e7;
}
[data-v2] .browser-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
[data-v2] .bdot-red { background: #f87171; }
[data-v2] .bdot-yellow { background: #fbbf24; }
[data-v2] .bdot-green { background: #34d399; }
[data-v2] .browser-url {
flex: 1;
background: #fff;
border: 1px solid #e4e4e7;
border-radius: 5px;
padding: 4px 10px;
color: #71717a;
font-size: 10px;
text-align: center;
font-family: 'Inter', system-ui, sans-serif;
}
[data-v2] .browser-body {
display: flex;
height: 310px;
}
[data-v2] .app-sidebar-v2 {
width: 130px;
flex-shrink: 0;
background: #fafafa;
border-right: 1px solid #e4e4e7;
padding: 16px 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
[data-v2] .app-sidebar-logo {
font-weight: 800;
font-size: 12px;
color: #0d0d0d;
padding: 4px 8px 14px;
letter-spacing: -0.5px;
}
[data-v2] .app-nav-item-v2 {
padding: 6px 10px;
border-radius: 6px;
color: #71717a;
font-size: 11px;
cursor: default;
white-space: nowrap;
font-family: 'Inter', system-ui, sans-serif;
}
[data-v2] .app-nav-item-v2.active {
background: #fff;
color: #0d0d0d;
font-weight: 600;
border: 1px solid #e4e4e7;
}
[data-v2] .app-main-v2 {
flex: 1;
padding: 16px 18px;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 14px;
}
[data-v2] .app-topbar-v2 {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 12px;
border-bottom: 1px solid #e4e4e7;
}
[data-v2] .app-greeting-v2 {
font-weight: 700;
font-size: 13px;
color: #0d0d0d;
letter-spacing: -0.3px;
font-family: 'Inter', system-ui, sans-serif;
}
[data-v2] .app-date-v2 {
color: #a1a1aa;
font-size: 10px;
font-family: 'Inter', system-ui, sans-serif;
}
[data-v2] .app-table-v2 {
width: 100%;
border-collapse: collapse;
font-size: 11px;
font-family: 'Inter', system-ui, sans-serif;
}
[data-v2] .app-table-v2 th {
text-align: left;
padding: 5px 8px;
color: #a1a1aa;
font-weight: 500;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 0.6px;
border-bottom: 1px solid #e4e4e7;
}
[data-v2] .app-table-v2 td {
padding: 8px 8px;
color: #27272a;
border-bottom: 1px solid #f4f4f5;
font-size: 11px;
}
[data-v2] .tbl-status {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 100px;
font-size: 9px;
font-weight: 600;
white-space: nowrap;
}
[data-v2] .tbl-status.working {
background: #f0fdf4;
color: #059669;
border: 1px solid #bbf7d0;
}
[data-v2] .tbl-status.done {
background: #f4f4f5;
color: #71717a;
border: 1px solid #e4e4e7;
}
[data-v2] .tbl-status.absent {
background: #fff1f2;
color: #e11d48;
border: 1px solid #fecdd3;
}
/* ══════════════════════════════════════════════════════════
SOCIAL PROOF BAR
══════════════════════════════════════════════════════════ */
.social-proof-v2 {
display: none;
}
[data-v2] .social-proof-v2 {
display: block;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 22px 0;
background: var(--bg-subtle);
}
[data-v2] .proof-stats {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
[data-v2] .proof-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 0 36px;
}
[data-v2] .proof-divider {
width: 1px;
height: 32px;
background: var(--border);
flex-shrink: 0;
}
[data-v2] .proof-num {
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
letter-spacing: -0.5px;
}
[data-v2] .proof-label {
font-size: 0.7rem;
color: var(--text-3);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ══════════════════════════════════════════════════════════
PROBLEM / SOLUTION
══════════════════════════════════════════════════════════ */
[data-v2] .problem-solution {
background: var(--bg-dark);
padding: 80px 0;
}
[data-v2] .problem-solution .container {
display: grid;
grid-template-columns: 1fr 1px 1fr;
gap: 0 64px;
align-items: start;
}
/* .arrow becomes vertical divider */
[data-v2] .arrow {
background: #1f1f23;
align-self: stretch;
font-size: 0;
color: transparent;
width: 1px;
}
[data-v2] .problem h3,
[data-v2] .solution h3 {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2.5px;
margin-bottom: 20px;
background: none;
-webkit-text-fill-color: unset;
}
[data-v2] .problem h3 {
color: #f87171;
opacity: 0.8;
}
[data-v2] .solution h3 {
color: #34d399;
opacity: 0.9;
}
[data-v2] .problem ul,
[data-v2] .solution ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
}
[data-v2] .problem ul li,
[data-v2] .solution ul li {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 0;
border-bottom: 1px solid #1a1a1d;
font-size: 0.9rem;
color: #71717a;
background: none;
border-radius: 0;
box-shadow: none;
font-weight: 400;
}
[data-v2] .problem ul li::before {
content: '—';
color: #f87171;
flex-shrink: 0;
font-weight: 400;
}
[data-v2] .solution ul li::before {
content: '→';
color: var(--primary);
flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════════
SECTION HEADERS
══════════════════════════════════════════════════════════ */
[data-v2] .section-header {
text-align: left;
max-width: none;
margin-bottom: 40px;
}
[data-v2] .section-header h2 {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 700;
letter-spacing: -1px;
color: var(--text);
background: none;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
}
[data-v2] .section-header p {
font-size: 0.95rem;
color: var(--text-2);
margin-top: 8px;
max-width: 480px;
}
/* ══════════════════════════════════════════════════════════
FEATURES — BENTO GRID
══════════════════════════════════════════════════════════ */
[data-v2] .features {
background: var(--bg);
padding: 80px 0;
border-top: 1px solid var(--border);
}
[data-v2] .features-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
grid-template-rows: auto auto;
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
gap: 0;
}
/* Card 1: tall card spanning 2 rows */
[data-v2] .feature-card:nth-child(1) {
grid-row: span 2;
border-right: 1px solid var(--border);
}
[data-v2] .feature-card:nth-child(2) {
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
[data-v2] .feature-card:nth-child(3) {
border-bottom: 1px solid var(--border);
}
[data-v2] .feature-card:nth-child(4) {
border-right: 1px solid var(--border);
}
/* Card 6: full-width bottom row */
[data-v2] .feature-card:nth-child(6) {
grid-column: span 3;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
gap: 24px;
}
[data-v2] .feature-card:nth-child(6) h3 {
margin-bottom: 4px;
}
[data-v2] .feature-card:nth-child(6) .feature-icon {
margin-bottom: 0;
}
[data-v2] .feature-card {
padding: 28px 28px 30px;
background: var(--bg);
border-radius: 0;
box-shadow: none;
transform: none;
transition: background 0.15s;
}
[data-v2] .feature-card:hover {
background: var(--bg-subtle);
transform: none;
box-shadow: none;
}
[data-v2] .feature-icon {
width: 36px;
height: 36px;
min-width: 36px;
background: #f4f4f5;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
margin-bottom: 16px;
}
[data-v2] .feature-card h3 {
font-size: 0.93rem;
font-weight: 600;
color: var(--text);
margin-bottom: 8px;
letter-spacing: -0.2px;
}
[data-v2] .feature-card p {
font-size: 0.85rem;
color: var(--text-2);
line-height: 1.6;
}
/* ══════════════════════════════════════════════════════════
HOW IT WORKS — TIMELINE
══════════════════════════════════════════════════════════ */
[data-v2] .how-it-works {
background: var(--bg);
padding: 80px 0;
border-top: 1px solid var(--border);
}
[data-v2] .steps {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: start;
gap: 0 24px;
margin-top: 48px;
}
[data-v2] .step-arrow {
display: flex;
align-items: flex-start;
padding-top: 10px;
color: var(--border);
font-size: 1.2rem;
}
[data-v2] .step {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
background: none;
border: none;
border-radius: 0;
padding: 0;
box-shadow: none;
text-align: left;
}
[data-v2] .step:hover {
transform: none;
box-shadow: none;
}
[data-v2] .step-number {
width: 32px;
height: 32px;
background: transparent;
border: 1px solid var(--border);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 600;
color: var(--text-3);
flex-shrink: 0;
}
[data-v2] .step h3 {
font-size: 1rem;
font-weight: 600;
color: var(--text);
letter-spacing: -0.2px;
}
[data-v2] .step p {
font-size: 0.875rem;
color: var(--text-2);
line-height: 1.6;
}
/* ══════════════════════════════════════════════════════════
PRICING
══════════════════════════════════════════════════════════ */
[data-v2] .pricing {
background: var(--bg-subtle);
padding: 80px 0;
border-top: 1px solid var(--border);
}
[data-v2] .pricing-toggle {
display: flex;
justify-content: flex-start;
gap: 12px;
margin-bottom: 32px;
align-items: center;
}
[data-v2] .toggle-label {
font-size: 0.875rem;
color: var(--text-2);
font-weight: 400;
}
[data-v2] .discount-badge {
background: var(--primary-light);
color: var(--primary-dark);
border: 1px solid var(--primary-border);
border-radius: 100px;
padding: 1px 7px;
font-size: 0.68rem;
font-weight: 600;
}
[data-v2] .toggle-slider {
background: var(--border);
}
[data-v2] .toggle-slider:before {
background: var(--text-2);
}
[data-v2] input:checked + .toggle-slider {
background: var(--primary);
}
[data-v2] input:checked + .toggle-slider:before {
background: #fff;
}
[data-v2] .pricing-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
max-width: 720px;
}
[data-v2] .pricing-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: none;
padding: 28px;
transform: none;
}
[data-v2] .pricing-card:hover {
transform: none;
box-shadow: none;
}
[data-v2] .pricing-card.featured {
border: 2px solid var(--primary);
background: var(--bg);
box-shadow: none;
transform: none;
}
[data-v2] .pricing-card.dimmed {
opacity: 0.65;
background: var(--bg);
transform: none;
}
[data-v2] .pricing-badge {
background: var(--primary-light);
color: var(--primary-dark);
border: 1px solid var(--primary-border);
border-radius: 100px;
font-size: 0.72rem;
font-weight: 600;
padding: 3px 10px;
box-shadow: none;
}
[data-v2] .pricing-card-header h3 {
font-size: 0.9rem;
font-weight: 600;
color: var(--text);
letter-spacing: -0.2px;
}
[data-v2] .pricing-subtitle {
color: var(--text-3);
font-size: 0.8rem;
}
[data-v2] .currency {
font-size: 0.85rem;
color: var(--text-2);
font-weight: 500;
}
[data-v2] .amount {
font-size: 3rem;
font-weight: 700;
color: var(--text);
letter-spacing: -2px;
line-height: 1;
}
[data-v2] .period {
font-size: 0.8rem;
color: var(--text-3);
}
[data-v2] .pricing-desc {
color: var(--text-3);
font-size: 0.82rem;
margin-top: 4px;
}
[data-v2] .pricing-features {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
[data-v2] .pricing-features li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--border);
font-size: 0.875rem;
color: var(--text-2);
}
[data-v2] .pricing-features li::before {
content: '✓';
color: var(--primary);
font-weight: 700;
flex-shrink: 0;
font-size: 0.8rem;
}
[data-v2] .pricing-features li.highlight {
color: var(--text);
font-weight: 500;
}
[data-v2] .pricing-examples {
background: var(--bg-subtle);
border: 1px solid var(--border);
border-radius: 6px;
padding: 12px 14px;
font-size: 0.8rem;
color: var(--text-2);
}
[data-v2] .pricing-examples p {
color: var(--text);
font-weight: 600;
margin-bottom: 6px;
}
[data-v2] .pricing-examples span {
display: block;
padding: 2px 0;
}
[data-v2] .pricing-card .btn-primary {
background: var(--primary);
color: #fff;
border-radius: var(--radius);
font-weight: 600;
box-shadow: none;
}
[data-v2] .pricing-card .btn-primary:hover {
background: var(--primary-dark);
transform: none;
box-shadow: none;
}
[data-v2] .pricing-card .btn-secondary {
background: transparent;
border: 1px solid var(--border);
color: var(--text-2);
border-radius: var(--radius);
box-shadow: none;
}
[data-v2] .pricing-card .btn-secondary:hover {
border-color: var(--text-3);
color: var(--text);
transform: none;
box-shadow: none;
}
[data-v2] .pricing-note-center {
color: var(--text-3);
font-size: 0.82rem;
margin-top: 20px;
text-align: left;
}
/* ══════════════════════════════════════════════════════════
FAQ
══════════════════════════════════════════════════════════ */
[data-v2] .faq {
background: var(--bg);
padding: 80px 0;
border-top: 1px solid var(--border);
}
[data-v2] .faq-list {
border-top: 1px solid var(--border);
}
[data-v2] .faq-item {
border: none;
border-bottom: 1px solid var(--border);
border-radius: 0;
background: none;
padding: 0;
box-shadow: none;
overflow: hidden;
}
[data-v2] .faq-item.active {
background: none;
border-color: var(--border);
box-shadow: none;
}
[data-v2] .faq-question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0;
font-size: 0.93rem;
font-weight: 500;
color: var(--text);
background: none;
border: none;
text-align: left;
cursor: pointer;
gap: 16px;
}
[data-v2] .faq-icon {
color: var(--text-3);
font-size: 1.2rem;
font-weight: 300;
line-height: 1;
flex-shrink: 0;
transition: color 0.15s, transform 0.2s;
}
[data-v2] .faq-item.active .faq-icon {
color: var(--primary);
transform: rotate(45deg);
}
[data-v2] .faq-answer p {
padding: 0 0 18px;
font-size: 0.875rem;
color: var(--text-2);
line-height: 1.65;
}
/* ══════════════════════════════════════════════════════════
CTA / CONTACT
══════════════════════════════════════════════════════════ */
[data-v2] .cta {
background: var(--bg-dark);
padding: 80px 0;
}
[data-v2] .cta .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start;
}
[data-v2] .cta h2 {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 700;
letter-spacing: -1px;
color: #fff;
margin-bottom: 10px;
max-width: 360px;
}
[data-v2] .cta > .container > p {
color: #52525b;
font-size: 0.9rem;
margin-top: -4px;
}
[data-v2] .cta-form {
display: flex;
flex-direction: column;
gap: 10px;
max-width: none;
}
[data-v2] .cta-form input {
background: var(--bg-dark-2);
border: 1px solid #27272a;
color: #fff;
border-radius: 6px;
padding: 11px 14px;
font-size: 0.9rem;
font-family: 'Inter', system-ui, sans-serif;
width: 100%;
}
[data-v2] .cta-form input:focus {
border-color: var(--primary);
outline: none;
}
[data-v2] .cta-form input::placeholder {
color: #52525b;
}
[data-v2] .cta-form .btn-primary {
background: var(--primary);
color: #fff;
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
padding: 12px;
box-shadow: none;
width: 100%;
margin-top: 2px;
}
[data-v2] .cta-form .btn-primary:hover {
background: var(--primary-dark);
transform: none;
box-shadow: none;
}
[data-v2] .cta-note {
color: #3f3f46;
font-size: 0.78rem;
margin-top: 6px;
display: block;
}
/* ══════════════════════════════════════════════════════════
FOOTER
══════════════════════════════════════════════════════════ */
[data-v2] .footer {
background: var(--bg-dark);
border-top: 1px solid #1f1f23;
}
[data-v2] .footer .logo {
color: #d4d4d8;
background: none;
-webkit-text-fill-color: unset;
}
[data-v2] .footer .logo-dot {
color: var(--primary);
background: none;
-webkit-text-fill-color: unset;
}
[data-v2] .footer-brand p {
color: #3f3f46;
font-size: 0.82rem;
}
[data-v2] .footer-column h4 {
color: #3f3f46;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.68rem;
font-weight: 600;
}
[data-v2] .footer-column a {
color: #52525b;
transition: color 0.15s;
}
[data-v2] .footer-column a:hover {
color: #d4d4d8;
}
[data-v2] .footer-bottom {
border-top: 1px solid #1a1a1d;
padding: 18px 0;
}
[data-v2] .footer-bottom p {
color: #27272a;
font-size: 0.78rem;
}
/* ══════════════════════════════════════════════════════════
COOKIE BANNER
══════════════════════════════════════════════════════════ */
[data-v2] .cookie-banner {
background: #18181b;
border: 1px solid #27272a;
border-radius: 10px;
box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
[data-v2] .cookie-content p {
color: #a1a1aa;
font-size: 0.82rem;
}
[data-v2] .cookie-content a {
color: var(--primary);
}
[data-v2] .cookie-banner .btn-primary {
background: var(--primary);
box-shadow: none;
border-radius: 6px;
}
[data-v2] .cookie-banner .btn-secondary {
border-color: #27272a;
color: #71717a;
border-radius: 6px;
}
/* ══════════════════════════════════════════════════════════
DESIGN TOGGLE BUTTON
══════════════════════════════════════════════════════════ */
.design-toggle-btn {
position: fixed;
bottom: 20px;
left: 20px;
display: flex;
align-items: center;
gap: 7px;
padding: 7px 13px;
background: #18181b;
color: #a1a1aa;
font-size: 0.76rem;
font-weight: 500;
border: 1px solid #3f3f46;
border-radius: 100px;
cursor: pointer;
z-index: 9998;
font-family: 'Inter', sans-serif;
box-shadow: 0 4px 16px rgba(0,0,0,0.35);
transition: background 0.15s, color 0.15s, border-color 0.15s;
user-select: none;
}
.design-toggle-btn:hover {
background: #27272a;
color: #e4e4e7;
}
.toggle-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #3f3f46;
flex-shrink: 0;
transition: background 0.2s;
}
[data-v2] .design-toggle-btn {
background: #f4f4f5;
color: #52525b;
border-color: #d4d4d8;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
[data-v2] .design-toggle-btn:hover {
background: #e4e4e7;
color: #09090b;
}
[data-v2] .toggle-dot {
background: var(--primary);
}
/* ══════════════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
[data-v2] .hero .container {
grid-template-columns: 1fr;
gap: 0;
}
[data-v2] .hero-visual-v2 {
display: none !important;
}
[data-v2] .hero {
padding: 56px 0 48px;
}
[data-v2] .hero h1 {
font-size: 2.4rem;
letter-spacing: -1.5px;
}
[data-v2] .problem-solution .container {
grid-template-columns: 1fr;
gap: 32px;
}
[data-v2] .arrow {
display: none;
}
[data-v2] .features-grid {
grid-template-columns: 1fr;
}
[data-v2] .feature-card:nth-child(1) {
grid-row: span 1;
border-right: none;
border-bottom: 1px solid var(--border);
}
[data-v2] .feature-card:nth-child(2),
[data-v2] .feature-card:nth-child(3),
[data-v2] .feature-card:nth-child(4),
[data-v2] .feature-card:nth-child(5) {
border-right: none;
border-bottom: 1px solid var(--border);
}
[data-v2] .feature-card:nth-child(6) {
grid-column: span 1;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
[data-v2] .steps {
grid-template-columns: 1fr;
gap: 32px;
}
[data-v2] .step-arrow {
display: none;
}
[data-v2] .pricing-grid {
grid-template-columns: 1fr;
max-width: 400px;
}
[data-v2] .cta .container {
grid-template-columns: 1fr;
gap: 32px;
}
[data-v2] .proof-stat {
padding: 0 20px;
}
}
@media (max-width: 560px) {
[data-v2] .proof-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
text-align: center;
}
[data-v2] .proof-divider {
display: none;
}
[data-v2] .proof-stat {
padding: 0;
}
}