/* =====================================
PEPTALUX CORE STYLES
Replaces Tailwind reset that breaks WP
===================================== */

:root{
--background:#f8fafc;
--foreground:#0f172a;
--primary:#1d4ed8;
--border:#e5e7eb;
--card:#ffffff;
--radius:12px;
}

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:Inter,system-ui,-apple-system,sans-serif;
background:var(--background);
color:var(--foreground);
line-height:1.5;
-webkit-font-smoothing:antialiased;
}

img{
max-width:100%;
height:auto;
}

.section-container{
max-width:1280px;
margin:0 auto;
padding:0 24px;
}

.page-section{
max-width:1280px;
margin:0 auto;
padding:60px 24px;
}

.page-section-sm{
max-width:1280px;
margin:0 auto;
padding:30px 24px;
}

.card-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:28px;
}

.feature-card{
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius);
padding:24px;
transition:.2s;
}

.feature-card:hover{
box-shadow:0 8px 28px rgba(0,0,0,.06);
}

.stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:20px;
text-align:center;
}

.stat strong{
display:block;
font-size:28px;
color:var(--primary);
}

.icon-circle{
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#eef2ff;
font-size:20px;
margin-bottom:12px;
}

.workflow{
display:flex;
justify-content:space-between;
gap:20px;
flex-wrap:wrap;
}

.step{
text-align:center;
flex:1;
min-width:120px;
}

button,
.button{
background:var(--primary);
color:#fff;
border:none;
border-radius:10px;
padding:10px 18px;
cursor:pointer;
}

button:hover,
.button:hover{
opacity:.9;
}