:root {
--primary: #1B1464;
--accent: #6C63FF;
--accent2: #00C9A7;
--warm: #FF6B6B;
--gold: #FFB347;
--bg: #FAFBFF;
--card: #FFFFFF;
--t1: #1B1464;
--t2: #4A4A68;
--t3: #8888A4;
--border: #E8EAF6;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
color: var(--t1);
background: var(--bg);
}
a {
text-decoration: none;
}
.wrap {
max-width: 1100px;
margin: 0 auto;
padding: 0 32px;
}
.section {
padding: 72px 0;
}
.section-white {
padding: 72px 0;
background: #fff;
}
.tag {
display: inline-flex;
padding: 2px 10px;
border-radius: 99px;
font-size: 10px;
font-weight: 700;
}
.btn-primary {
padding: 13px 28px;
border-radius: 8px;
background: linear-gradient(135deg, var(--accent), var(--primary));
color: #fff;
font-size: 14px;
font-weight: 700;
border: none;
cursor: pointer;
font-family: inherit;
display: inline-block;
}
.btn-secondary {
padding: 13px 28px;
border-radius: 8px;
background: rgba(255, 255, 255, .15);
color: #fff;
font-size: 14px;
font-weight: 700;
border: 1px solid rgba(255, 255, 255, .25);
display: inline-block;
}
.grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
.grid-4 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px;
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.center {
text-align: center;
}
.subtitle {
font-size: 11px;
font-weight: 700;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 2px;
}
h2 {
font-size: 30px;
font-weight: 800;
color: var(--primary);
margin: 10px 0;
letter-spacing: -0.5px;
}
h3 {
font-size: 14px;
font-weight: 700;
color: var(--t1);
margin: 0 0 6px;
}
.card {
background: #fff;
border-radius: 12px;
padding: 24px;
border: 1px solid var(--border);
transition: all .2s;
}
.card:hover {
box-shadow: 0 6px 24px rgba(27, 20, 100, .08);
transform: translateY(-2px);
}
.input {
width: 100%;
padding: 10px 12px;
border-radius: 7px;
border: 1px solid var(--border);
font-size: 13px;
outline: none;
font-family: inherit;
background: var(--bg);
}
select.input {
appearance: none;
cursor: pointer;
}
/* Toast notification */
#toast {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 200;
background: #fff;
border-radius: 10px;
padding: 10px 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
border: 1px solid var(--border);
max-width: 340px;
font-size: 12px;
color: var(--t2);
display: flex;
align-items: center;
gap: 8px;
transition: opacity .3s;
}
#toast .dot {
width: 8px;
height: 8px;
border-radius: 4px;
background: var(--accent2);
flex-shrink: 0;
}
/* Sticky bar */
#stickyBar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 150;
background: var(--primary);
padding: 10px 0;
border-top: 2px solid var(--accent);
transform: translateY(100%);
transition: transform .3s;
}
#stickyBar.visible {
transform: translateY(0);
}
/* Lead modal */
#leadOverlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .5);
z-index: 300;
display: none;
align-items: center;
justify-content: center;
}
#leadOverlay.active {
display: flex;
}
.lead-box {
background: #fff;
border-radius: 16px;
padding: 36px;
max-width: 400px;
width: 90%;
}
/* FAQ */
.faq-item {
margin-bottom: 6px;
}
.faq-q {
padding: 14px 16px;
background: #fff;
border-radius: 8px;
border: 1px solid var(--border);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-q.open {
background: var(--primary);
border-radius: 8px 8px 0 0;
}
.faq-q.open span:first-child {
color: #fff;
}
.faq-q.open .faq-icon {
color: var(--accent2);
transform: rotate(45deg);
}
.faq-a {
padding: 14px 16px;
background: #fff;
border-radius: 0 0 8px 8px;
border: 1px solid var(--border);
border-top: none;
display: none;
}
.faq-a.open {
display: block;
}
.faq-icon {
font-size: 16px;
color: var(--accent);
transition: transform .2s;
}
/* Comparison table */
.comp-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.comp-table thead tr {
background: var(--primary);
}
.comp-table th {
padding: 12px 16px;
color: #fff;
font-weight: 700;
font-size: 11px;
}
.comp-table th:first-child {
text-align: left;
}
.comp-table th:nth-child(2) {
color: var(--accent2);
}
.comp-table th:nth-child(3),
.comp-table th:nth-child(4) {
color: rgba(255, 255, 255, .5);
}
.comp-table td {
padding: 10px 16px;
border-bottom: 1px solid var(--border);
}
.comp-table td:first-child {
font-weight: 600;
color: var(--t1);
}
.comp-table td:nth-child(2) {
text-align: center;
color: var(--accent2);
font-weight: 700;
}
.comp-table td:nth-child(3),
.comp-table td:nth-child(4) {
text-align: center;
color: var(--t3);
}
.comp-table tbody tr:nth-child(even) {
background: var(--bg);
}
/* Admin tabs */
.tab-btn {
padding: 10px 20px;
border-radius: 8px;
border: none;
background: transparent;
color: var(--t3);
font-size: 12px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
}
.tab-btn.active {
background: var(--primary);
color: #fff;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* Feature card icon */
.feat-icon {
width: 42px;
height: 42px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 12px;
}
/* Pricing */
.plan-card {
background: var(--bg);
border-radius: 14px;
padding: 28px;
border: 1px solid var(--border);
position: relative;
}
.plan-card.popular {
border: 2px solid var(--accent);
box-shadow: 0 6px 24px rgba(108, 99, 255, .1);
}
.plan-badge {
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
padding: 3px 14px;
border-radius: 99px;
background: var(--accent);
color: #fff;
font-size: 10px;
font-weight: 700;
}
/* Location tags */
.loc-tag {
padding: 6px 14px;
border-radius: 99px;
background: #fff;
border: 1px solid var(--border);
font-size: 12px;
color: var(--t2);
font-weight: 600;
display: inline-block;
}
@media (max-width: 768px) {
.grid-3,
.grid-4,
.grid-2 {
grid-template-columns: 1fr;
}
.hero-grid {
grid-template-columns: 1fr !important;
}
.hero-tags {
flex-wrap: wrap;
}
.nav-links {
display: none;
}
.stats-bar {
flex-wrap: wrap;
gap: 16px;
}
.footer-grid {
grid-template-columns: 1fr 1fr !important;
}
.roi-grid {
grid-template-columns: 1fr !important;
}
.comp-table {
font-size: 10px;
}
.comp-table th,
.comp-table td {
padding: 8px 6px;
}
}