:root{

--primary:#2563eb;
--primary-dark:#1d4ed8;

--bg:#f3f6fb;
--card:#ffffff;

--text:#0f172a;
--muted:#64748b;

--border:#dbe5f1;

}

/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:Segoe UI,Arial,sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.6;
}

a{
text-decoration:none;
}

/* HERO */

.hero{

text-align:center;

padding:60px 20px 100px;
}

.logo{

width:240px;

max-width:80%;

margin-bottom:25px;
}

.hero h1{

font-size:3rem;

margin-bottom:15px;
}

.subtitle{

font-size:1.15rem;

color:var(--muted);

margin-bottom:25px;
}

/* BADGES */

.badges{

margin-bottom:30px;
}

.badges span{

display:inline-block;

margin:5px;

padding:8px 16px;

background:white;

border:1px solid var(--border);

border-radius:30px;

font-size:.95rem;
}

/* CTA */

.cta{

display:inline-block;

padding:16px 36px;

background:var(--primary);

color:white;

font-weight:600;

border-radius:12px;

box-shadow:
0 10px 25px rgba(37,99,235,.18);

transition:.25s;
}

.cta:hover{

background:var(--primary-dark);

transform:translateY(-2px);
}

/* TOOLS */

.tools{

max-width:1200px;

margin:auto;

padding:0 20px 120px;
}

.tools h2{

text-align:center;

margin-bottom:50px;
}

.grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:25px;
}

.card{

background:white;

padding:28px;

border-radius:18px;

border:1px solid var(--border);

box-shadow:
0 8px 24px rgba(15,23,42,.05);

transition:.25s;

color:inherit;

display:flex;

flex-direction:column;

height:100%;

min-height:280px;
}

.card:hover{

transform:translateY(-8px);

border-color:var(--primary);

box-shadow:
0 18px 40px rgba(37,99,235,.12);
}

.tool-icon{

font-size:2rem;

margin-bottom:15px;
}

.card h3{

margin-bottom:10px;

font-size:1.15rem;
}

.card p{

color:var(--muted);

margin-bottom:25px;

flex-grow:1;
}

.tool-button{

display:inline-block;

padding:8px 16px;

background:#eef4ff;

color:var(--primary);

border-radius:8px;

font-size:.9rem;

font-weight:600;
}

.tool-badge{

display:inline-flex;

width:auto;

align-self:flex-start;

margin-bottom:15px;

padding:4px 10px;

font-size:.75rem;

font-weight:700;

border-radius:20px;
}

.tool-badge.web{

background:#e0f2fe;

color:#0369a1;
}

.tool-badge.desktop{

background:#ecfdf5;

color:#047857;
}

/* FEATURES */

.features{

background:#eef4ff;

padding:120px 20px;
}

.features h2{

text-align:center;

font-size:2rem;

margin-bottom:15px;
}

.features-subtitle{

text-align:center;

max-width:700px;

margin:0 auto 60px;

color:var(--muted);
}

.feature-grid{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:25px;
}

.feature-card{

background:white;

padding:30px;

border-radius:18px;

border:1px solid var(--border);

text-align:center;

box-shadow:
0 8px 24px rgba(15,23,42,.05);

transition:.25s;
}

.feature-card:hover{

transform:translateY(-6px);
}

.feature-icon{
	
width:42px;

height:42px;

display:block;

margin:0 auto;	

font-size:2rem;

margin-bottom:15px;

filter:
invert(36%)
sepia(92%)
saturate(2070%)
hue-rotate(214deg)
brightness(95%)
contrast(95%);

}

.feature-card h3{

margin-bottom:10px;
}

/* AUDIENCE */

.audience{

padding:120px 20px;
}

.audience h2{

text-align:center;

margin-bottom:15px;
}

.audience-subtitle{

text-align:center;

max-width:700px;

margin:0 auto 60px;

color:var(--muted);
}

.audience-grid{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:25px;
}

/* ROADMAP */

.roadmap{

max-width:900px;

margin:0 auto 120px;

background:white;

padding:40px;

border-radius:20px;

border:1px solid var(--border);

box-shadow:
0 10px 30px rgba(15,23,42,.06);
}

.roadmap h2{

margin-bottom:20px;
}

.roadmap p{

margin-bottom:20px;

color:var(--muted);
}

.roadmap ul{

padding-left:20px;
}

/* FOOTER */

footer{

text-align:center;

padding:40px;

color:var(--muted);
}

/* FAQ */

.faq{

max-width:900px;

margin:0 auto 120px;

padding:0 20px;
}

.faq h2{

text-align:center;

margin-bottom:40px;
}

.faq-item{

background:white;

padding:25px;

margin-bottom:20px;

border-radius:16px;

border:1px solid var(--border);

box-shadow:
0 8px 24px rgba(15,23,42,.05);
}

.faq-item h3{

margin-bottom:10px;
}

.tool-icon img{

width:32px;

height:32px;

display:block;

filter:
hue-rotate(10deg)
saturate(120%);
}

footer{

padding:60px 20px;

text-align:center;
}

.footer-links{

display:flex;

justify-content:center;

align-items:center;

gap:25px;

flex-wrap:wrap;

margin-bottom:20px;
}

.footer-links a{

color:var(--muted);

font-weight:500;

display:flex;

align-items:center;

gap:8px;

transition:.2s;
}

.footer-links a:hover{

color:var(--primary);
}

.footer-icon{

width:18px;

height:18px;
}

.copyright{

font-size:.9rem;

color:var(--muted);
}

/* MOBILE */

@media(max-width:768px){

.hero h1{

font-size:2.2rem;
}

.logo{

width:180px;
}

.tools,
.features,
.audience{

padding-left:15px;
padding-right:15px;
}

}