.hero{
background:var(--primary);
color:#fff;
padding:80px 0;
position:relative;
overflow:hidden
}
.hero::before{
content:'';
position:absolute;
top:0;
right:0;
bottom:0;
width:50%;
background:linear-gradient(135deg,transparent 0%,rgba(16,185,129,0.15) 50%,rgba(16,185,129,0.25) 100%);
clip-path:polygon(20% 0,100% 0,100% 100%,0% 100%)
}
.hero::after{
content:'';
position:absolute;
top:-100px;
right:-100px;
width:400px;
height:400px;
background:radial-gradient(circle,rgba(16,185,129,0.2) 0%,transparent 70%);
border-radius:50%
}
.hero .container{
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:space-between
}
.hero-content{
max-width:580px
}
.hero h1{
font-size:2.75rem;
font-weight:800;
margin-bottom:20px;
line-height:1.15;
letter-spacing:-0.02em
}
.hero p{
font-size:1.125rem;
color:rgba(255,255,255,0.85);
margin-bottom:32px;
line-height:1.7
}
.hero-buttons{
display:flex;
gap:16px;
flex-wrap:wrap
}
.hero .btn{
padding:14px 32px;
font-size:1rem;
font-weight:600
}
.hero .btn-primary{
background:var(--accent);
color:#fff;
box-shadow:0 4px 14px rgba(16,185,129,0.4)
}
.hero .btn-primary:hover{
background:var(--accent-dark);
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(16,185,129,0.5)
}
.hero .btn-secondary{
background:rgba(255,255,255,0.1);
color:#fff;
border:1px solid rgba(255,255,255,0.25);
backdrop-filter:blur(4px)
}
.hero .btn-secondary:hover{
background:rgba(255,255,255,0.2);
border-color:rgba(255,255,255,0.4)
}
.about-section{
padding:80px 0;
background:var(--bg)
}
.about-content{
max-width:800px;
margin:0 auto
}
.about-content h2{
font-size:2rem;
font-weight:700;
color:var(--primary);
margin-bottom:20px;
text-align:center
}
.about-content>p{
font-size:1.05rem;
line-height:1.8;
color:var(--text-light);
margin-bottom:16px;
text-align:center
}
.features{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
margin-top:48px
}
.feature-item{
background:var(--bg-alt);
padding:32px 28px;
border-radius:var(--radius-lg);
border:1px solid var(--border);
transition:var(--transition)
}
.feature-item:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-md);
border-color:var(--accent)
}
.feature-icon{
width:52px;
height:52px;
background:linear-gradient(135deg,var(--accent) 0%,var(--accent-dark) 100%);
border-radius:var(--radius-lg);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:20px;
color:#fff;
font-size:1.5rem
}
.feature-item h4{
font-size:1.1rem;
font-weight:600;
color:var(--primary);
margin-bottom:10px
}
.feature-item p{
font-size:0.95rem;
color:var(--text-light);
line-height:1.6
}
.tools-section{
padding:80px 0;
background:var(--bg-alt)
}
.section-header{
text-align:center;
margin-bottom:48px
}
.section-header h2{
font-size:2rem;
font-weight:700;
color:var(--primary);
margin-bottom:12px
}
.section-header p{
font-size:1.05rem;
color:var(--text-light)
}
.tools-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
gap:24px
}
.tool-card{
background:var(--bg);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:32px;
transition:var(--transition);
position:relative
}
.tool-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow-lg);
border-color:var(--accent)
}
.tool-card-icon{
width:56px;
height:56px;
background:linear-gradient(135deg,rgba(16,185,129,0.1) 0%,rgba(16,185,129,0.05) 100%);
border:1px solid rgba(16,185,129,0.2);
border-radius:var(--radius-lg);
display:flex;
align-items:center;
justify-content:center;
margin-bottom:20px;
font-size:1.5rem
}
.tool-card h3{
font-size:1.15rem;
font-weight:600;
color:var(--primary);
margin-bottom:12px
}
.tool-card p{
font-size:0.95rem;
color:var(--text-light);
line-height:1.65;
margin-bottom:24px
}
.tool-card-links{
display:flex;
gap:20px;
align-items:center;
padding-top:20px;
border-top:1px solid var(--border)
}
.tool-card-links a{
font-size:0.9rem;
font-weight:600;
display:inline-flex;
align-items:center;
gap:6px
}
.tool-card-links a:first-child{
color:var(--accent);
padding:8px 16px;
background:rgba(16,185,129,0.1);
border-radius:var(--radius)
}
.tool-card-links a:first-child:hover{
background:rgba(16,185,129,0.15)
}
.tool-card-links a:last-child{
color:var(--text-light)
}
.tool-card-links a:last-child:hover{
color:var(--primary)
}
@media (max-width:992px){
.features{grid-template-columns:repeat(2,1fr)}
.hero h1{font-size:2.25rem}
.hero p{font-size:1rem}
.tools-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}
@media (max-width:768px){
.features{grid-template-columns:1fr}
.hero{padding:60px 0}
.hero::before,.hero::after{display:none}
.hero h1{font-size:1.875rem}
.hero-buttons{flex-direction:column}
.hero .btn{width:100%;justify-content:center}
.tools-grid{grid-template-columns:1fr}
.about-section,.tools-section{padding:60px 0}
.section-header{margin-bottom:32px}
}