:root{--bg-light:#ffffff;--accent:#2a5b61;--card:#f9f4ed;--radius:14px;--shadow:0 8px 24px rgba(0,0,0,.15);}
* {
    margin:0;
    padding:0;
    box-sizing:
    border-box;
}

body { 
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    background:var(--bg-light);
    color:#222;line-height:1.6;
}

header {
    background:var(--accent);
    color:#f5f5f5;
    padding:1rem 2rem 3rem 2rem;
    text-align:center;
    box-shadow:var(--shadow);
}

header h1 { 
    font-size:2.5rem;
    margin-bottom:0.5rem;
    font-weight:700;
}

header p {
    font-size:1.2rem;
    opacity:0.95;
}

#header-img {
    width: 12rem;
    height: 6rem;
    margin: 0;
    padding-bottom: 1rem;
}

.container { max-width:1200px;
    margin:0 auto
    ;padding:3rem 2rem;
}

.features-highlight {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto 4rem;
    text-align: center;
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.feature p {
    color: var(--muted);
    font-size: 0.95rem;
}

.tools-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:2rem;
    margin-bottom:4rem;
}

.tool-card { 
    background:var(--card);
    border-radius:var(--radius);
    padding:2rem;
    box-shadow:var(--shadow);
    transition:transform 0.35s,box-shadow 0.35s;
    cursor:pointer;text-decoration:none;
    color:#222;
    display:block;
}

.tool-card:hover { 
    transform:translateY(-5px);
    box-shadow:0 12px 32px rgba(0,0,0,.2);
}

.tool-icon { 
    font-size:3rem;
    margin-bottom:1rem;
}

.tool-card h3 { font-size:1.5rem;
    color:var(--accent);
    margin-bottom:0.5rem;
}

.tool-card p {
    color:#777;
    font-size:0.95rem;
    line-height:1.5;
}

.tool-badge { display:inline-block;
    background:var(--accent);
    color:#f5f5f5;padding:0.25rem 0.75rem;
    border-radius:20px;
    font-size:0.75rem;
    margin-top:1rem;font-weight:600;
}

.badge-interactive { 
    background:#2a8561;
}

footer { 
    background:var(--accent);
    color:#f5f5f5;
    text-align:center;
    padding:2rem;
    margin-top:4rem;
}

@media(max-width:768px) { 
    header h1{font-size:2rem;}
    header p{font-size:1rem;}
    .tools-grid{grid-template-columns:1fr;}
    .container{padding:2rem 1rem;}}