:root{
--fz-primary:#00BFFF;
--fz-primary-hover:#009FE3;
--fz-bg:#05070D;
--fz-sidebar:#090C14;
--fz-card:#0D111C;
--fz-input:#080B12;
--fz-text:#FFFFFF;
--fz-text-secondary:#A7B0C0;
--fz-text-muted:#7F8A9D;
--fz-border:#1B2230;
--fz-success:#22C55E;
--fz-warning:#F59E0B;
--fz-error:#EF4444;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
font-family:'Inter',sans-serif;
background:var(--fz-bg);
color:var(--fz-text);
line-height:1.5;
overflow-x:hidden;
}
a{
text-decoration:none;
color:inherit;
}
button{
font-family:inherit;
}
.site-header{
position:sticky;
top:0;
z-index:1000;
width:100%;
background:rgba(5,7,13,.94);
border-bottom:1px solid rgba(255,255,255,.06);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
}
.nav-container{
max-width:1200px;
height:74px;
margin:auto;
padding:0 25px;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
}
.brand{
display:flex;
align-items:center;
gap:11px;
min-width:max-content;
}
.brand img{
width:40px;
height:40px;
object-fit:contain;
}
.brand-text{
display:flex;
flex-direction:column;
line-height:1.05;
}
.brand-text strong{
font-size:16px;
font-weight:800;
letter-spacing:-.5px;
}
.brand-text strong span{
color:var(--fz-primary);
}
.brand-text small{
margin-top:4px;
color:var(--fz-text-muted);
font-size:8px;
font-weight:600;
letter-spacing:.7px;
text-transform:uppercase;
}
.desktop-nav{
display:flex;
align-items:center;
justify-content:center;
gap:30px;
flex:1;
}
.desktop-nav a{
color:var(--fz-text-secondary);
font-size:12px;
font-weight:600;
transition:.2s ease;
}
.desktop-nav a:hover{
color:var(--fz-primary);
}
.nav-actions{
display:flex;
align-items:center;
gap:9px;
}
.login-btn{
padding:9px 15px;
border:1px solid var(--fz-border);
border-radius:7px;
font-size:11px;
font-weight:700;
color:var(--fz-text-secondary);
transition:.2s ease;
}
.login-btn:hover{
border-color:var(--fz-primary);
color:var(--fz-primary);
}
.profile-btn{
padding:10px 15px;
border-radius:7px;
background:var(--fz-primary);
color:#001018;
font-size:11px;
font-weight:800;
transition:.2s ease;
}
.profile-btn:hover{
background:var(--fz-primary-hover);
transform:translateY(-1px);
}
.mobile-menu{
display:none;
border:0;
background:none;
color:var(--fz-text);
font-size:25px;
cursor:pointer;
}
.hero{
position:relative;
min-height:560px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:#05070D;
border-bottom:1px solid var(--fz-border);
}
.hero-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
background-size:55px 55px;
mask-image:linear-gradient(to bottom,black,transparent 90%);
-webkit-mask-image:linear-gradient(to bottom,black,transparent 90%);
}
.hero-glow{
position:absolute;
border-radius:50%;
filter:blur(90px);
pointer-events:none;
}
.glow-one{
width:300px;
height:300px;
left:-100px;
top:70px;
background:rgba(0,191,255,.10);
}
.glow-two{
width:350px;
height:350px;
right:-120px;
bottom:-120px;
background:rgba(0,191,255,.08);
}
.hero-content{
position:relative;
z-index:2;
width:100%;
max-width:900px;
padding:90px 25px;
text-align:center;
}
.hero-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:7px 12px;
margin-bottom:25px;
border:1px solid rgba(0,191,255,.18);
border-radius:30px;
background:rgba(0,191,255,.04);
color:var(--fz-text-secondary);
font-size:10px;
font-weight:600;
}
.hero-badge span{
width:6px;
height:6px;
border-radius:50%;
background:var(--fz-primary);
box-shadow:0 0 10px rgba(0,191,255,.8);
}
.hero h1{
font-size:68px;
font-weight:800;
line-height:1.02;
letter-spacing:-4px;
}
.hero h1 strong{
color:var(--fz-primary);
font-weight:800;
}
.hero-description{
max-width:600px;
margin:22px auto 30px;
color:var(--fz-text-secondary);
font-size:14px;
line-height:1.8;
}
.hero-explore-button{
display:inline-flex;
align-items:center;
gap:10px;
padding:13px 20px;
border-radius:8px;
background:var(--fz-primary);
color:#001018;
font-size:12px;
font-weight:800;
transition:.2s ease;
}
.hero-explore-button:hover{
background:var(--fz-primary-hover);
transform:translateY(-2px);
}
.hero-explore-button span{
font-size:15px;
}
.trust-strip{
border-bottom:1px solid var(--fz-border);
background:#070A11;
}
.trust-container{
max-width:1000px;
margin:auto;
min-height:95px;
padding:20px 25px;
display:flex;
align-items:center;
justify-content:center;
gap:55px;
}
.trust-item{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:4px;
}
.trust-item strong{
font-size:11px;
font-weight:700;
}
.trust-item span{
font-size:9px;
color:var(--fz-text-muted);
}
.trust-line{
width:1px;
height:30px;
background:var(--fz-border);
}
.jobs-section,
.companies-section,
.doubts-section,
.about-section{
padding:90px 25px;
background:var(--fz-bg);
}
.section-container{
max-width:1200px;
margin:auto;
}
.section-heading{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:30px;
margin-bottom:35px;
}
.section-heading.centered{
display:block;
text-align:center;
max-width:700px;
margin:0 auto 45px;
}
.section-kicker{
display:block;
margin-bottom:9px;
color:var(--fz-primary);
font-size:9px;
font-weight:800;
letter-spacing:1.7px;
}
.section-heading h2{
font-size:36px;
font-weight:800;
letter-spacing:-1.7px;
line-height:1.15;
}
.section-heading p{
margin-top:9px;
max-width:550px;
color:var(--fz-text-secondary);
font-size:12px;
line-height:1.7;
}
.view-all{
display:inline-flex;
align-items:center;
gap:7px;
color:var(--fz-primary);
font-size:11px;
font-weight:700;
white-space:nowrap;
}
.view-all span{
font-size:14px;
}
.jobs-slider{
width:100%;
overflow:hidden;
}
.jobs-track{
display:flex;
gap:16px;
transition:transform .55s ease;
will-change:transform;
}
.job-card{
flex:0 0 calc((100% - 80px)/6);
min-width:0;
padding:20px;
border:1px solid var(--fz-border);
border-radius:12px;
background:var(--fz-card);
transition:.25s ease;
}
.job-card:hover{
border-color:rgba(0,191,255,.4);
transform:translateY(-3px);
}
.job-top{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:18px;
}
.company-logo,
.featured-company-logo{
display:flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
border:1px solid rgba(0,191,255,.2);
border-radius:9px;
background:rgba(0,191,255,.06);
color:var(--fz-primary);
font-size:15px;
font-weight:800;
}
.new-badge{
padding:4px 7px;
border-radius:4px;
background:rgba(34,197,94,.1);
color:var(--fz-success);
font-size:7px;
font-weight:800;
letter-spacing:.7px;
}
.job-company{
margin-bottom:6px;
color:var(--fz-primary);
font-size:10px;
font-weight:700;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.job-card h3{
min-height:42px;
font-size:13px;
font-weight:700;
line-height:1.5;
}
.job-meta{
display:flex;
flex-wrap:wrap;
gap:5px;
margin-top:14px;
}
.job-meta span{
padding:4px 7px;
border:1px solid var(--fz-border);
border-radius:4px;
color:var(--fz-text-muted);
font-size:8px;
}
.job-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-top:22px;
padding-top:13px;
border-top:1px solid var(--fz-border);
}
.job-footer span{
color:var(--fz-text-muted);
font-size:8px;
}
.job-footer a{
color:var(--fz-primary);
font-size:9px;
font-weight:800;
white-space:nowrap;
}
.empty-jobs{
padding:55px 25px;
border:1px solid var(--fz-border);
border-radius:14px;
background:var(--fz-card);
text-align:center;
}
.empty-icon{
margin-bottom:12px;
color:var(--fz-primary);
font-size:30px;
}
.empty-jobs h3{
font-size:16px;
}
.empty-jobs p{
margin-top:7px;
color:var(--fz-text-muted);
font-size:11px;
}
.companies-section{
background:#070A11;
border-top:1px solid var(--fz-border);
border-bottom:1px solid var(--fz-border);
}
.companies-slider{
width:100%;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
-ms-overflow-style:none;
-webkit-overflow-scrolling:touch;
touch-action:pan-x;
cursor:grab;
}
.companies-slider::-webkit-scrollbar{
display:none;
}
.companies-track{
display:flex;
gap:16px;
width:max-content;
}
.company-card{
flex:0 0 270px;
padding:25px;
border:1px solid var(--fz-border);
border-radius:13px;
background:var(--fz-card);
transition:.25s ease;
}
.company-card:hover{
border-color:rgba(0,191,255,.35);
transform:translateY(-2px);
}
.company-card .featured-company-logo{
margin-bottom:20px;
width:45px;
height:45px;
}
.company-card h3{
font-size:17px;
font-weight:800;
}
.company-card strong{
display:block;
margin-top:6px;
color:var(--fz-primary);
font-size:10px;
line-height:1.5;
}
.company-card p{
margin-top:12px;
color:var(--fz-text-secondary);
font-size:10px;
line-height:1.7;
}
.doubts-section{
background:var(--fz-bg);
}
.faq-list{
max-width:850px;
margin:auto;
border-top:1px solid var(--fz-border);
}
.faq-item{
border-bottom:1px solid var(--fz-border);
}
.faq-question{
width:100%;
padding:21px 0;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
border:0;
background:none;
color:var(--fz-text);
font-size:12px;
font-weight:700;
text-align:left;
cursor:pointer;
}
.faq-icon{
display:flex;
align-items:center;
justify-content:center;
width:24px;
height:24px;
border:1px solid var(--fz-border);
border-radius:50%;
color:var(--fz-primary);
font-size:15px;
flex-shrink:0;
transition:.2s ease;
}
.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height .3s ease;
}
.faq-answer p{
padding:0 40px 20px 0;
color:var(--fz-text-secondary);
font-size:11px;
line-height:1.8;
}
.faq-item.active .faq-icon{
background:rgba(0,191,255,.08);
border-color:rgba(0,191,255,.35);
}
.about-section{
background:#070A11;
border-top:1px solid var(--fz-border);
}
.about-container{
display:grid;
grid-template-columns:1.4fr .8fr;
gap:90px;
align-items:center;
}
.about-content h2{
font-size:40px;
font-weight:800;
letter-spacing:-2px;
line-height:1.15;
}
.about-content p{
max-width:650px;
margin-top:17px;
color:var(--fz-text-secondary);
font-size:12px;
line-height:1.85;
}
.about-highlight{
padding:45px 30px;
border:1px solid rgba(0,191,255,.2);
border-radius:16px;
background:
radial-gradient(circle at 50% 0,rgba(0,191,255,.12),transparent 45%),
var(--fz-card);
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}
.about-highlight img{
width:85px;
height:85px;
object-fit:contain;
margin-bottom:18px;
}
.about-highlight strong{
font-size:20px;
font-weight:800;
}
.about-highlight span{
margin-top:5px;
color:var(--fz-primary);
font-size:9px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
}
.about-highlight p{
margin-top:18px;
color:var(--fz-text-secondary);
font-size:10px;
}
.recruiter-section{
padding:90px 25px;
background:#070A11;
border-top:1px solid var(--fz-border);
}
.recruiter-container{
max-width:1200px;
margin:auto;
border:1px solid rgba(0,191,255,.18);
border-radius:18px;
background:
radial-gradient(circle at 80% 50%,rgba(0,191,255,.09),transparent 35%),
#090D16;
padding:65px;
overflow:hidden;
}
.recruiter-content{
max-width:550px;
margin-bottom:50px;
}
.recruiter-content h2{
font-size:42px;
letter-spacing:-2px;
line-height:1.1;
}
.recruiter-content p{
max-width:480px;
margin:12px 0 25px;
color:var(--fz-text-secondary);
font-size:14px;
line-height:1.7;
}
.recruiter-button{
display:inline-flex;
align-items:center;
gap:10px;
padding:13px 19px;
border-radius:8px;
background:var(--fz-primary);
color:#001018;
font-size:12px;
font-weight:800;
transition:.2s;
}
.recruiter-button:hover{
background:var(--fz-primary-hover);
transform:translateY(-1px);
}
.recruiter-workflow-wrapper{
width:100%;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
-ms-overflow-style:none;
-webkit-overflow-scrolling:touch;
touch-action:pan-x;
cursor:grab;
}
.recruiter-workflow-wrapper::-webkit-scrollbar{
display:none;
}
.recruiter-workflow-wrapper.dragging{
cursor:grabbing;
}
.recruiter-workflow{
position:relative;
width:max-content;
min-width:100%;
display:flex;
align-items:flex-start;
gap:0;
padding:30px 0 20px;
overflow:visible;
user-select:none;
}
.workflow-line{
position:absolute;
top:35px;
left:90px;
right:90px;
height:1px;
background:var(--fz-primary);
opacity:.5;
pointer-events:none;
}
.workflow-step{
position:relative;
z-index:2;
flex:0 0 180px;
width:180px;
text-align:center;
}
.workflow-dot{
display:block;
width:11px;
height:11px;
margin:0 auto 17px;
border-radius:50%;
background:var(--fz-primary);
box-shadow:0 0 14px rgba(0,191,255,.65);
}
.workflow-number{
display:block;
margin-bottom:6px;
color:var(--fz-text);
font-size:10px;
font-weight:800;
}
.workflow-step strong{
display:block;
padding:0 8px;
color:var(--fz-text-secondary);
font-size:9px;
line-height:1.45;
font-weight:600;
}
.site-footer{
padding:65px 25px 25px;
background:#05070D;
border-top:1px solid var(--fz-border);
}
.footer-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:1fr 1.5fr;
gap:80px;
}
.footer-brand>a{
display:inline-flex;
align-items:center;
gap:11px;
}
.footer-brand img{
width:42px;
height:42px;
object-fit:contain;
}
.footer-brand-text{
display:flex;
flex-direction:column;
line-height:1.05;
}
.footer-brand-text strong{
font-size:16px;
font-weight:800;
}
.footer-brand-text strong span{
color:var(--fz-primary);
}
.footer-brand-text small{
margin-top:4px;
color:var(--fz-text-muted);
font-size:8px;
font-weight:600;
letter-spacing:.7px;
text-transform:uppercase;
}
.footer-brand>p{
max-width:280px;
margin-top:18px;
color:var(--fz-text-muted);
font-size:10px;
line-height:1.7;
}
.footer-links{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
}
.footer-links>div{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:10px;
}
.footer-links strong{
margin-bottom:5px;
color:var(--fz-text);
font-size:8px;
letter-spacing:1.2px;
}
.footer-links a{
color:var(--fz-text-muted);
font-size:9px;
transition:.2s ease;
}
.footer-links a:hover{
color:var(--fz-primary);
}
.footer-bottom{
max-width:1200px;
margin:55px auto 0;
padding-top:20px;
border-top:1px solid var(--fz-border);
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
color:var(--fz-text-muted);
font-size:8px;
}
@media(max-width:1100px){
.nav-container{
padding:0 20px;
}
.desktop-nav{
gap:20px;
}
.job-card{
flex:0 0 calc((100% - 48px)/4);
}
.recruiter-container{
padding:55px;
}
}
@media(max-width:900px){
.desktop-nav{
display:none;
}
.nav-actions{
display:none;
}
.mobile-menu{
display:block;
}
.job-card{
flex:0 0 calc((100% - 16px)/2);
}
.about-container{
grid-template-columns:1fr;
gap:45px;
}
.about-highlight{
max-width:500px;
margin:auto;
width:100%;
}
.footer-container{
grid-template-columns:1fr;
gap:50px;
}
}
@media(max-width:650px){
.nav-container{
height:68px;
padding:0 16px;
}
.brand img{
width:36px;
height:36px;
}
.brand-text strong{
font-size:14px;
}
.hero{
min-height:520px;
}
.hero-content{
padding:75px 20px;
}
.hero h1{
font-size:46px;
letter-spacing:-2.8px;
}
.hero-description{
font-size:12px;
line-height:1.75;
}
.trust-container{
min-height:auto;
padding:22px 15px;
gap:20px;
}
.trust-item strong{
font-size:9px;
}
.trust-item span{
font-size:7px;
}
.trust-line{
height:25px;
}
.jobs-section,
.companies-section,
.doubts-section,
.about-section,
.recruiter-section{
padding:65px 18px;
}
.section-heading{
align-items:flex-start;
flex-direction:column;
gap:18px;
margin-bottom:28px;
}
.section-heading h2{
font-size:30px;
}
.section-heading p{
font-size:11px;
}
.job-card{
flex:0 0 calc(100% - 8px);
padding:18px;
}
.company-card{
flex:0 0 245px;
}
.about-content h2{
font-size:32px;
}
.about-content p{
font-size:11px;
}
.recruiter-container{
padding:35px 20px;
}
.recruiter-content{
margin-bottom:35px;
}
.recruiter-content h2{
font-size:32px;
}
.recruiter-content p{
font-size:12px;
}
.recruiter-workflow-wrapper{
margin:0 -2px;
}
.recruiter-workflow{
padding:30px 0 20px;
}
.workflow-step{
flex:0 0 155px;
width:155px;
}
.workflow-line{
top:35px;
left:77.5px;
right:77.5px;
}
.faq-question{
padding:18px 0;
font-size:11px;
}
.faq-answer p{
font-size:10px;
}
.footer-links{
grid-template-columns:1fr 1fr;
gap:30px 20px;
}
.footer-bottom{
margin-top:40px;
flex-direction:column;
align-items:flex-start;
gap:7px;
}
}
@media(max-width:400px){
.hero h1{
font-size:40px;
}
.hero-description{
font-size:11px;
}
.trust-container{
gap:12px;
}
.trust-item strong{
font-size:8px;
}
.company-card{
flex-basis:230px;
}
.footer-links{
grid-template-columns:1fr;
}
}