/* JOBTIME – extra styling for the new organized homepage.
   Works together with the existing styles.css. */

.home-hero{
  padding:78px 0 70px;
  background:
    radial-gradient(circle at 75% 25%,rgba(255,220,0,.08),transparent 34%),
    linear-gradient(180deg,#070707 0%,#0b0b0b 100%);
  border-bottom:1px solid #222;
}

.home-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);
  gap:54px;
  align-items:center;
}

.hero-copy h1{
  font-size:clamp(52px,6vw,86px);
  line-height:.94;
  letter-spacing:-3px;
  margin:14px 0 26px;
  max-width:800px;
}

.hero-copy h1 span{color:var(--yellow);}

.hero-copy .lead{
  max-width:760px;
  font-size:19px;
  line-height:1.65;
}

.btn-large{
  min-height:50px;
  padding:14px 20px;
  font-size:16px;
}

.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  margin-top:28px;
  color:#ddd;
  font-size:14px;
}

.trust-row span::first-letter{color:#22c55e;}

.home-hero-card{
  padding:22px;
  border:1px solid #292929;
  border-radius:20px;
  background:linear-gradient(145deg,#151515,#0b0b0b);
  box-shadow:0 25px 70px rgba(0,0,0,.35);
}

.live-panel{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:20px;
  border:1px solid #214a2b;
  border-radius:16px;
  background:#07140a;
}

.live-panel b{display:block;font-size:16px;}
.live-panel small{display:block;color:#aaa;margin-top:5px;}
.live-panel strong{font-size:40px;color:var(--yellow);letter-spacing:-1px;}

.live-dot{
  width:10px;height:10px;border-radius:50%;
  display:inline-block;background:#36d66b;
  margin-right:9px;vertical-align:middle;
  box-shadow:0 0 12px rgba(54,214,107,.5);
}

.feature-card{
  margin-top:12px;
  padding:24px;
  border:1px solid #292929;
  border-radius:16px;
  background:#111;
}

.feature-card h3{margin:14px 0 8px;font-size:20px;}
.feature-card p{color:#bbb;line-height:1.6;margin:0;}

.home-section{padding-top:68px;padding-bottom:68px;}
.compact-section{padding-top:20px;padding-bottom:34px;}

.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:25px;
  margin-bottom:22px;
}

.text-link{
  color:var(--yellow);
  text-decoration:none;
  font-weight:800;
  white-space:nowrap;
}

.category-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.home-category{
  min-height:145px;
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  padding:20px;
  border:1px solid #2a2a2a;
  border-radius:15px;
  background:linear-gradient(145deg,#111,#0a0a0a);
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}

.home-category:hover{
  transform:translateY(-3px);
  border-color:#555;
  background:#151515;
}

.cat-icon{
  font-size:35px;
  filter:saturate(.9);
}

.home-category h3{margin:0 0 7px;font-size:18px;}
.home-category p{margin:0;color:#aaa;line-height:1.45;font-size:14px;}
.home-category>span{font-size:30px;color:#777;}

.center-heading{text-align:center;margin-bottom:38px;}

.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  position:relative;
}

.step{
  text-align:center;
  position:relative;
  padding:20px 40px;
}

.step:not(:last-child)::after{
  content:"";
  position:absolute;
  top:51px;
  left:72%;
  width:56%;
  border-top:1px dashed #555;
}

.step-number{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 10px;
  border-radius:50%;
  background:var(--yellow);
  color:#050505;
  font-weight:900;
  position:relative;
  z-index:2;
}

.step-icon{
  width:72px;height:72px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 15px;
  border:1px solid #555;
  border-radius:50%;
  background:#111;
  font-size:31px;
}

.step h3{margin:0 0 8px;}
.step p{color:#aaa;line-height:1.55;margin:0 auto;max-width:280px;}

.more-link{text-align:center;margin-top:24px;}

.notification-banner{
  display:grid;
  grid-template-columns:120px 1.5fr 1fr;
  gap:25px;
  align-items:center;
  padding:28px;
  border:1px solid #333;
  border-radius:17px;
  background:linear-gradient(110deg,#111,#0a0a0a);
}

.bell{
  font-size:68px;
  text-align:center;
  filter:drop-shadow(0 0 14px rgba(255,220,0,.35));
}

.notification-copy h2{margin:6px 0 8px;}
.notification-copy p{margin:0;color:#aaa;line-height:1.55;}

.notification-items{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-left:1px solid #333;
}

.notification-items div{
  min-height:90px;
  padding:10px 14px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}

.notification-items div+div{border-left:1px solid #333;}
.notification-items strong{font-size:25px;}
.notification-items span{font-size:13px;color:#bbb;}

.audience-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.audience-card{
  min-height:300px;
  display:grid;
  grid-template-columns:1fr 160px;
  align-items:end;
  overflow:hidden;
  padding:30px;
  border:1px solid #2d2d2d;
  border-radius:17px;
  background:
    radial-gradient(circle at 80% 30%,rgba(255,220,0,.08),transparent 30%),
    linear-gradient(135deg,#151515,#090909);
}

.audience-card h2{font-size:31px;margin:12px 0 10px;}
.audience-card p{color:#aaa;line-height:1.55;max-width:440px;}
.audience-art{
  font-size:100px;
  text-align:center;
  opacity:.9;
  filter:grayscale(.2);
}

.home-verify{
  border-top:1px solid #292929;
  border-bottom:1px solid #292929;
  background:#0b0b0b;
}

.verify-row{
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:28px;
  color:#bbb;
  font-size:14px;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px 20px;
}

.footer-links a{color:#aaa;text-decoration:none;}
.footer-links a:hover{color:var(--yellow);}

@media(max-width:1000px){
  .home-hero-grid{grid-template-columns:1fr;}
  .category-grid{grid-template-columns:repeat(2,1fr);}
  .notification-banner{grid-template-columns:80px 1fr;}
  .notification-items{grid-column:1/-1;border-left:0;border-top:1px solid #333;margin-top:5px;padding-top:10px;}
}

@media(max-width:700px){
  .home-hero{padding:48px 0;}
  .hero-copy h1{font-size:52px;letter-spacing:-2px;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .trust-row{gap:10px 16px;}
  .category-grid,
  .audience-grid,
  .steps{grid-template-columns:1fr;}
  .step:not(:last-child)::after{display:none;}
  .step{padding:16px 20px 28px;}
  .notification-banner{grid-template-columns:1fr;text-align:center;}
  .notification-items{grid-template-columns:1fr 1fr 1fr;}
  .audience-card{grid-template-columns:1fr;min-height:0;}
  .audience-art{display:none;}
  .section-heading{align-items:flex-start;flex-direction:column;}
  .footer-links{justify-content:flex-start;margin-top:18px;}
}

@media(max-width:480px){
  .home-category{grid-template-columns:auto 1fr;}
  .home-category>span{display:none;}
  .notification-items div{padding:8px 4px;}
  .notification-items span{font-size:11px;}
}