*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;color:#1a1a1a;background:#f2f2f7;line-height:1.6}

/* NAV */
.site-nav{max-width:100%;
  background:linear-gradient(135deg,#FF8C00 0%,#FFA500 100%);
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 2px 8px rgba(255,140,0,0.3);
  
}
.nav-brand{
  color:#fff;text-decoration:none;
  display:flex;align-items:center;gap:10px;
}
.nav-brand img{
  height:52px;width:52px;object-fit:contain;
  background:rgba(255,255,255,0.95);
  border-radius:12px;padding:4px;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
.nav-label{display:flex;flex-direction:column;line-height:1.2}
.nav-title{font-size:1.6rem;font-weight:800;letter-spacing:.3px;color:#fff}
.nav-sub{font-size:0.75rem;font-weight:500;color:rgba(255,255,255,0.85)}
.nav-links{display:flex;gap:14px;align-items:center}
.nav-links a{
  color:rgba(255,255,255,0.92);
  text-decoration:none;
  font-size:0.78rem;
  font-weight:600;
  white-space:nowrap;
}
.nav-links a:hover{color:#fff}
@media(max-width:520px){
  .nav-links{display:none}
}

/* LAYOUT */
.expert-landing{max-width:600px;margin:0 auto;padding:16px 12px 48px;text-align:left}

/* HERO CARD */
.hero{
  background:#fff;border-radius:16px;
  padding:20px;margin-bottom:14px;
  box-shadow:0 2px 8px rgba(0,0,0,0.07);
}
h1{font-size:1.35rem;font-weight:800;margin-bottom:10px;color:#1a1a1a;line-height:1.3}
.badge{
  display:inline-flex;align-items:center;
  background:linear-gradient(135deg,#FF8C00,#FFA500);
  color:#fff;font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:20px;margin-bottom:12px;letter-spacing:.3px;
}
.hero-lead{font-size:0.95rem;color:#555;margin-bottom:18px;line-height:1.6}
.ncr-note{font-size:13px;color:#888;margin-bottom:12px}

/* CTAs */
.cta-primary{
  display:block;
  background:linear-gradient(135deg,#5B3FA0,#7B2FF7);
  color:#fff;text-align:center;
  padding:15px;border-radius:12px;
  text-decoration:none;font-weight:700;
  margin-bottom:10px;font-size:0.97rem;
  box-shadow:0 6px 18px rgba(91,63,160,0.35);
  letter-spacing:.2px;
}
.cta-secondary{
  display:flex;align-items:center;gap:8px;
  background:#fff;border:2px solid #5B3FA0;
  color:#5B3FA0;text-align:center;
  padding:13px;border-radius:12px;
  text-decoration:none;font-weight:700;font-size:0.95rem;
}
.play-icon{flex-shrink:0}

/* SECTIONS */
.job-types,.about-trade,.why-biko24,.faq{
  background:#fff;border-radius:16px;
  padding:18px;margin-bottom:14px;
  box-shadow:0 2px 8px rgba(0,0,0,0.07);
}
.job-types h2,.why-biko24 h2,.faq h2{
  font-size:0.95rem;font-weight:700;
  margin-bottom:12px;color:#1a1a1a;
}
.job-type-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.job-chip{
  background:#fff7ed;color:#FF8C00;
  border:1px solid #FFD08A;
  padding:5px 12px;border-radius:20px;
  font-size:12px;font-weight:600;
}

/* BODY INTRO */
.body-intro{font-size:0.93rem;color:#444;line-height:1.75}

/* WHY POINTS */
.why-points{padding-left:0;list-style:none}
.why-points li{
  padding:9px 0 9px 26px;position:relative;
  font-size:0.92rem;color:#333;
  border-bottom:1px solid #f5f5f5;line-height:1.5;
}
.why-points li:last-child{border-bottom:none}
.why-points li::before{content:✓;position:absolute;left:0;color:#FF8C00;font-weight:800;font-size:1rem}
.trust-line{margin-top:14px;font-size:0.85rem;color:#888;font-style:italic;padding-top:12px;border-top:1px solid #f5f5f5}

/* FAQ */
.faq-item{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid #f5f5f5}
.faq-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.faq-item h3{font-size:0.92rem;font-weight:700;margin-bottom:5px;color:#1a1a1a}
.faq-item p{font-size:0.9rem;color:#555;line-height:1.6}

/* FOOTER */
.page-footer{text-align:left;font-size:12px;color:#aaa;padding-top:16px}

@media(max-width:480px){
  h1{font-size:1.2rem}
  .expert-landing{padding:12px 10px 40px}
}

/* Align nav brand with card column */
.nav-brand{flex:1;}
.site-nav{padding-left:0;padding-right:0;}

@media(max-width:520px){
  .nav-brand img{height:46px;width:46px;flex-shrink:0;}
  .nav-title{font-size:0.95rem;}
  .nav-sub{font-size:0.62rem;}
  .site-nav{padding:10px 12px;}
}

@media(max-width:520px){
}

@media(max-width:520px){
  .nav-title{font-size:1.6rem!important;}
  .nav-sub{font-size:0.75rem!important;}
}

.nav-app-btn{display:flex;align-items:center;gap:6px;background:#1a1a1a;color:#fff;text-decoration:none;font-size:0.82rem;font-weight:700;padding:9px 16px;border-radius:24px;white-space:nowrap;margin-left:auto;box-shadow:0 2px 8px rgba(0,0,0,0.2);}
.site-nav{padding:14px 20px!important;}
@media(max-width:520px){.nav-app-btn{font-size:0.75rem;padding:8px 12px;}}

.site-nav{padding-left:calc((100vw - 600px) / 2)!important;padding-right:16px!important;}
@media(max-width:640px){.site-nav{padding-left:12px!important;}}

.nav-app-btn{margin-right:calc((100vw - 600px) / 2)!important;}
@media(max-width:640px){.nav-app-btn{margin-right:12px!important;}}

.cta-secondary{justify-content:center!important;}