.elementor-1777 .elementor-element.elementor-element-1f0a709{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-01ccde9 *//* ===== Design Tokens ===== */

:root{
--primary:#0b1220;
--text:#2b3445;
--muted:#6b7280;
--accent:#5b6cff;
--accent2:#8b5cf6;
--border:#eceff5;
}

/* ===== Base ===== */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Inter,ui-sans-serif,system-ui;
}

body{
color:var(--text);
line-height:1.8;
background:#ffffff;
-webkit-font-smoothing:antialiased;
}

/* ===== Hero ===== */

.hero{
padding:130px 20px 90px;
text-align:center;
background:
radial-gradient(circle at 20% 20%,rgba(91,108,255,.12),transparent 45%),
radial-gradient(circle at 80% 30%,rgba(139,92,246,.12),transparent 45%);
}

.badge{
display:inline-block;
font-size:12px;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--accent);
margin-bottom:18px;
}

.hero h1{
font-size:52px;
font-weight:700;
max-width:920px;
margin:0 auto 16px;
letter-spacing:-.02em;
color:var(--primary);
}

.hero p{
font-size:18px;
color:var(--muted);
max-width:640px;
margin:auto;
}

/* ===== Container ===== */

.container{
max-width:820px;
margin:auto;
padding:80px 20px;
}

/* ===== Typography ===== */

.content h2{
font-size:34px;
margin:60px 0 18px;
color:var(--primary);
letter-spacing:-.01em;
}

.content h3{
font-size:22px;
margin:30px 0 10px;
color:var(--primary);
}

.content p{
margin-bottom:18px;
font-size:17px;
}

.content ul,
.content ol{
padding-left:22px;
margin:18px 0;
}

.content li{
margin-bottom:6px;
}

/* ===== Cards (Minimal — no shadow) ===== */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:26px;
margin:36px 0;
}

.card{
padding:24px;
border:1px solid var(--border);
border-radius:18px;
background:linear-gradient(180deg,#fff,#fafbff);
transition:.25s ease;
}

.card:hover{
border-color:#dfe5f2;
transform:translateY(-4px);
}

/* ===== Links ===== */

a{
color:var(--accent);
text-decoration:none;
font-weight:500;
}

a:hover{
text-decoration:underline;
}

/* ===== Divider ===== */

hr{
border:none;
height:1px;
background:var(--border);
margin:48px 0;
}

/* ===== Footer ===== */

.footer{
margin-top:90px;
padding:60px 20px;
text-align:center;
font-size:14px;
color:var(--muted);
border-top:1px solid var(--border);
}

/* ===== Reading Flow Spacing ===== */

.content > *:first-child{
margin-top:0;
}

/* ===== Mobile ===== */

@media(max-width:768px){

.hero h1{
font-size:36px;
}

.container{
padding:50px 18px;
}

.content h2{
font-size:28px;
}

}

.comparison-table{
width:100%;
border-collapse:collapse;
margin:30px 0;
font-size:16px;
}

.comparison-table th,
.comparison-table td{
border:1px solid #eceff5;
padding:14px;
text-align:left;
}

.comparison-table th{
background:#f8faff;
font-weight:600;
}/* End custom CSS */