:root{
--dark:#202329;
--accent:#b8e4b7;
--paper:#f8faf7;
--radius:2px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
background:var(--paper);
color:#25282d;
font-family:Arial,sans-serif;
line-height:1.65;
}
a{color:inherit}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:white;padding:12px;z-index:100}
header{background:var(--dark);color:white}
.header{
max-width:1250px;
margin:auto;
padding:20px 25px;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
}
.brand{
font-size:1.5rem;
font-weight:900;
letter-spacing:-.04em;
text-decoration:none;
}
nav{display:flex;gap:15px;flex-wrap:wrap}
nav a{font-size:.84rem;font-weight:700;text-decoration:none}
nav a:hover,nav a:focus{color:var(--accent)}
.hero{
background:linear-gradient(135deg,var(--dark),#171717);
color:white;
padding:clamp(70px,10vw,140px) 25px;
text-align:center;
}
.hero-inner{max-width:1100px;margin:auto}
.kicker{
color:var(--accent);
font-size:.83rem;
font-weight:900;
letter-spacing:.16em;
text-transform:uppercase;
}
h1{
font-size:clamp(3rem,7vw,6.5rem);
line-height:1.04;
letter-spacing:-.055em;
margin:18px 0;
}
.hero p{font-size:1.2rem;color:#e8e8e8}
.actions{
display:flex;
gap:14px;
flex-wrap:wrap;
justify-content:center;
margin-top:28px;
}
.button{
display:inline-block;
background:var(--accent);
color:#161616;
padding:14px 24px;
border-radius:var(--radius);
font-weight:850;
text-decoration:none;
border:0;
cursor:pointer;
font:inherit;
}
.button.secondary{
background:transparent;
color:white;
border:1px solid #ddd;
}
main section{max-width:1200px;margin:auto;padding:65px 25px}
h2{font-size:clamp(2rem,4vw,3.3rem);line-height:1.15}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:24px;
}
.card{
background:white;
padding:27px;
border-radius:var(--radius);
box-shadow:0 8px 28px #00000012;
border:1px solid #00000010;
}
.card h3{margin-top:0}
.tag{
display:inline-block;
background:var(--accent);
color:#161616;
padding:5px 12px;
font-size:.75rem;
font-weight:900;
}
.banner{
background:var(--dark);
color:white;
padding:35px;
margin-top:30px;
border-radius:var(--radius);
}
form{display:grid;gap:15px;max-width:650px}
label{font-weight:700}
input,select,textarea{
display:block;
width:100%;
padding:12px;
border:1px solid #a3a3a3;
border-radius:5px;
font:inherit;
}
.notice{
background:#fff0c8;
border-left:5px solid var(--accent);
padding:18px;
margin:20px 0;
}
footer{
background:var(--dark);
color:white;
text-align:center;
padding:38px 20px;
}
@media(max-width:850px){
.header{flex-direction:column}
nav{justify-content:center}
}
@media(max-width:500px){
.hero{padding:65px 18px}
main section{padding:45px 18px}
}