:root{
--blue:#1877f2;
--blue-dark:#0f5fc7;
--blue-soft:#edf5ff;
--green:#25d366;
--text:#172033;
--muted:#667085;
--bg:#f4f7fb;
--card:#fff;
--border:#e2e8f0;
--shadow:0 14px 38px rgba(31,50,81,.08);
}
*{
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
margin:0;
background:
radial-gradient(
circle at top right,
rgba(24,119,242,.08),
transparent 28%
),
var(--bg);
color:var(--text);
font-family:Tahoma,Arial,sans-serif;
line-height:1.8;
}
a{
color:inherit;
text-decoration:none;
}
.contact-page{
width:min(900px,calc(100% - 28px));
margin:0 auto;
padding:24px 0 60px;
}
.contact-hero{
position:relative;
overflow:hidden;
padding:36px;
border-radius:26px;
color:#fff;
background:
radial-gradient(
circle at 10% 10%,
rgba(255,255,255,.18),
transparent 28%
),
linear-gradient(
135deg,
#0d5dd5,
#1877f2 58%,
#66aaff
);
box-shadow:0 24px 55px rgba(24,119,242,.20);
}
.contact-hero::after{
content:"";
position:absolute;
width:240px;
height:240px;
left:-100px;
bottom:-150px;
border-radius:50%;
background:rgba(255,255,255,.08);
}
.hero-content{
position:relative;
z-index:2;
max-width:730px;
}
.hero-badge{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:13px;
padding:7px 12px;
border:1px solid rgba(255,255,255,.25);
border-radius:999px;
background:rgba(255,255,255,.13);
font-size:12px;
font-weight:900;
}
.contact-hero h1{
margin:0 0 10px;
font-size:clamp(28px,4vw,42px);
line-height:1.35;
font-weight:950;
}
.contact-hero p{
margin:0;
max-width:680px;
color:rgba(255,255,255,.91);
font-size:14px;
font-weight:700;
line-height:1.9;
}
.register-cta{
display:flex;
align-items:center;
gap:15px;
margin-top:18px;
padding:17px;
border:1px solid #cfe0f5;
border-radius:18px;
background:#fff;
box-shadow:var(--shadow);
}
.register-icon{
width:48px;
height:48px;
flex:0 0 48px;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
background:var(--blue-soft);
color:var(--blue);
font-size:20px;
}
.register-text{
flex:1;
}
.register-text strong{
display:block;
margin-bottom:3px;
font-size:14px;
font-weight:950;
}
.register-text span{
display:block;
color:var(--muted);
font-size:12px;
font-weight:700;
line-height:1.7;
}
.register-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
min-height:44px;
padding:10px 16px;
border-radius:12px;
background:linear-gradient(135deg,var(--blue),var(--blue-dark));
color:#fff;
font-size:12px;
font-weight:950;
white-space:nowrap;
box-shadow:0 8px 20px rgba(24,119,242,.16);
}
.contact-card{
margin-top:18px;
padding:24px;
border:1px solid var(--border);
border-radius:22px;
background:#fff;
box-shadow:var(--shadow);
}
.contact-title{
display:flex;
align-items:center;
gap:10px;
margin:0 0 6px;
font-size:20px;
font-weight:950;
}
.contact-title i{
color:var(--blue);
}
.contact-subtitle{
margin:0 0 20px;
color:var(--muted);
font-size:12px;
font-weight:700;
}
.contact-form{
display:grid;
gap:14px;
}
.two-cols{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.field label{
display:block;
margin-bottom:6px;
font-size:12px;
font-weight:900;
}
.field input,
.field select,
.field textarea{
width:100%;
border:1px solid #d8e0ea;
border-radius:13px;
background:#fff;
padding:12px 13px;
color:var(--text);
font:inherit;
font-size:14px;
outline:none;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
border-color:var(--blue);
box-shadow:0 0 0 4px rgba(24,119,242,.09);
}
.field textarea{
min-height:140px;
resize:vertical;
}
.submit-btn{
min-height:50px;
border:0;
border-radius:14px;
background:var(--green);
color:#fff;
font:inherit;
font-size:14px;
font-weight:950;
cursor:pointer;
box-shadow:0 9px 22px rgba(37,211,102,.17);
}
.form-note{
display:flex;
align-items:flex-start;
gap:8px;
margin-top:13px;
padding:12px;
border-radius:13px;
background:#f8fafc;
color:var(--muted);
font-size:11px;
font-weight:750;
}
.form-note i{
margin-top:3px;
color:var(--blue);
}
.direct-contact{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:16px;
padding:14px;
border:1px solid var(--border);
border-radius:15px;
background:#fbfcfe;
}
.direct-contact div{
display:flex;
align-items:center;
gap:9px;
}
.direct-contact i{
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
background:#eafaf0;
color:var(--green);
font-size:17px;
}
.direct-contact strong{
display:block;
font-size:12px;
font-weight:950;
}
.direct-contact span{
display:block;
color:var(--muted);
font-size:10px;
}
.direct-wa{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:8px 13px;
border-radius:11px;
background:var(--green);
color:#fff;
font-size:11px;
font-weight:950;
}
@media(max-width:700px){
.contact-page{
width:calc(100% - 14px);
padding-top:8px;
padding-bottom:35px;
}
.contact-hero{
padding:23px 17px;
border-radius:20px;
}
.contact-hero h1{
font-size:25px;
}
.contact-hero p{
font-size:12px;
}
.register-cta{
display:grid;
grid-template-columns:auto 1fr;
padding:14px;
border-radius:16px;
}
.register-btn{
grid-column:1/-1;
width:100%;
}
.contact-card{
padding:17px;
border-radius:19px;
}
.two-cols{
grid-template-columns:1fr;
}
.field input,
.field select,
.field textarea{
font-size:16px;
}
.direct-contact{
display:grid;
grid-template-columns:1fr;
}
.direct-wa{
width:100%;
}
}