/* =========================================================
   Redesign — Work From Home Hiring Landing Page
   Fresh layout system (bento grid, stepper, split hero)
   Mobile-first. Built on top of Bootstrap grid/utilities.
   ========================================================= */

:root{
  --ink:#12161C;
  --paper:#FBF9F6;
  --paper-alt:#F1ECE3;
  --primary:#2F5D50;
  --primary-dark:#1E3F36;
  --primary-tint:#E7EFEC;
  --accent:#E8763C;
  --accent-dark:#C75F2B;
  --slate:#5B6470;
  --slate-light:#8A93A0;
  --line:rgba(18,22,28,0.10);
  --line-strong:rgba(18,22,28,0.16);
  --white:#ffffff;
  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 2px 10px rgba(18,22,28,0.06);
  --shadow-md:0 12px 32px rgba(18,22,28,0.10);
  --shadow-lg:0 24px 60px rgba(18,22,28,0.16);
}

/*****************************/
/*        00. Reset          */
/*****************************/
*,*::before,*::after{ box-sizing:border-box; }
html,body{ width:100%; height:100%; }
body{
  background:var(--paper);
  color:var(--slate);
  font:400 1rem/1.65 "Inter", sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; }
a{ color:var(--primary); text-decoration:none; transition:color .15s ease; }
a:hover{ color:var(--accent); text-decoration:none; }
h1,h2,h3,h4,h5,h6{
  color:var(--ink);
  font-family:"Outfit", sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0 0 .75rem;
}
h1{ font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.08; }
h2{ font-size:clamp(1.6rem,3.4vw,2.35rem); line-height:1.18; }
h3{ font-size:1.3rem; line-height:1.3; }
h4{ font-size:1.1rem; line-height:1.35; }
p{ margin:0 0 1rem; color:var(--slate); }
strong{ color:var(--ink); }
.container{ max-width:1200px; }
section{ padding:5.5rem 0; position:relative; }
@media(max-width:767px){ section{ padding:3.25rem 0; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font:600 .75rem/1 "Inter", sans-serif;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--primary);
  background:var(--primary-tint);
  padding:.5rem .9rem; border-radius:30px;
  margin-bottom:1.1rem;
}
.eyebrow.on-dark{ background:rgba(255,255,255,.1); color:#CFE3DB; }
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); }

.section-head{ max-width:640px; margin-bottom:2.75rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ font-size:1.05rem; }

/*****************************/
/*      01. Buttons          */
/*****************************/
.btn-primary-lg{
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--accent); color:#fff;
  font:600 .95rem/1 "Inter", sans-serif;
  padding:1rem 1.7rem; border-radius:12px;
  box-shadow:0 10px 24px rgba(232,118,60,0.35);
  border:none; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary-lg:hover{ color:#fff; background:var(--accent-dark); transform:translateY(-2px); box-shadow:0 14px 30px rgba(232,118,60,0.42); }
.btn-outline-lg{
  display:inline-flex; align-items:center; gap:.6rem;
  background:transparent; color:var(--ink);
  font:600 .95rem/1 "Inter", sans-serif;
  padding:1rem 1.7rem; border-radius:12px;
  border:1.5px solid var(--line-strong);
  transition:border-color .18s ease, background .18s ease;
}
.btn-outline-lg:hover{ color:var(--ink); border-color:var(--ink); background:rgba(18,22,28,0.03); }
.btn-outline-lg.on-dark{ color:#fff; border-color:rgba(255,255,255,.35); }
.btn-outline-lg.on-dark:hover{ background:rgba(255,255,255,.08); border-color:#fff; color:#fff; }

/*****************************/
/*      02. Preloader        */
/*****************************/
.spinner-wrapper{ position:fixed; inset:0; background:var(--paper); z-index:9999; display:flex; align-items:center; justify-content:center; }
.spinner{ display:flex; gap:.4rem; }
.spinner div{ width:12px; height:12px; border-radius:50%; background:var(--primary); animation:bounce 1.2s infinite ease-in-out; }
.spinner .bounce2{ animation-delay:.15s; background:var(--accent); }
.spinner .bounce3{ animation-delay:.3s; background:var(--primary-dark); }
@keyframes bounce{ 0%,80%,100%{ transform:scale(0.4); opacity:.5; } 40%{ transform:scale(1); opacity:1; } }

/*****************************/
/*      03. Navbar            */
/*****************************/
.navbar-custom{
  padding:1.15rem 0;
  background:transparent;
  transition:background .25s ease, box-shadow .25s ease, padding .25s ease;
}
.navbar-custom.top-nav-collapse{
  background:rgba(251,249,246,0.92);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
  padding:.7rem 0;
}
.navbar-custom .container{ display:flex; align-items:center; justify-content:space-between; }
.logo-image{ display:flex !important; align-items:center; gap:.6rem; }
.logo-image img{ height:34px; width:auto; border-radius:8px; }
.logo-text-name{
  font:700 1.15rem/1 "Outfit", sans-serif;
  color:var(--white);
  transition:color .25s ease;
}
.top-nav-collapse .logo-text-name{ color:var(--ink); }
.navbar-toggler{ border:none; padding:.3rem; }
.navbar-toggler-awesome{ color:#fff; font-size:1.3rem; }
.top-nav-collapse .navbar-toggler-awesome{ color:var(--ink); }
.navbar-toggler .fa-times{ display:none; }
.navbar-toggler[aria-expanded="true"] .fa-bars{ display:none; }
.navbar-toggler[aria-expanded="true"] .fa-times{ display:inline-block; }

.navbar-nav{ align-items:center; gap:.15rem; }
.nav-link{
  font:600 .85rem/1 "Inter", sans-serif;
  letter-spacing:.02em;
  color:rgba(255,255,255,.85) !important;
  padding:.55rem .9rem !important;
  border-radius:8px;
  transition:color .2s ease, background .2s ease;
}
.top-nav-collapse .nav-link{ color:var(--ink) !important; }
.nav-link:hover{ background:rgba(255,255,255,.12); color:#fff !important; }
.top-nav-collapse .nav-link:hover{ background:var(--primary-tint); color:var(--primary) !important; }
.nav-cta{
  margin-left:.5rem;
  background:var(--accent) !important; color:#fff !important;
  padding:.6rem 1.2rem !important; border-radius:10px;
}
.nav-cta:hover{ background:var(--accent-dark) !important; }

@media(max-width:991px){
  .navbar-custom{ background:rgba(251,249,246,0.97); padding:.85rem 0; }
  .logo-text-name{ color:var(--ink); }
  .navbar-toggler-awesome{ color:var(--ink); }
  .navbar-collapse{ background:#fff; border-radius:14px; margin-top:.85rem; padding:.6rem; box-shadow:var(--shadow-md); border:1px solid var(--line); }
  .nav-link{ color:var(--ink) !important; padding:.75rem 1rem !important; }
  .nav-cta{ margin:.4rem .25rem 0; text-align:center; justify-content:center; display:flex; }
}

/*****************************/
/*      04. Hero              */
/*****************************/
.hero{
  position:relative;
  padding:9rem 0 6rem;
  background:linear-gradient(180deg, rgba(18,22,28,.86), rgba(18,22,28,.78)), url('../workimages/header-background.jpg') center/cover no-repeat;
  color:#fff;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; right:-10%; top:-20%;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,118,60,.25), transparent 70%);
  pointer-events:none;
}
.hero-grid{ display:flex; flex-wrap:wrap; align-items:center; gap:3rem; }
.hero-copy{ flex:1 1 480px; position:relative; z-index:2; }
.hero h1{ color:#fff; }
.hero h1 #js-rotating{ color:var(--accent); }
.hero-sub{ color:rgba(255,255,255,.78); font-size:1.1rem; max-width:520px; margin-bottom:2rem; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:2.2rem; }
.hero-trust{ display:flex; align-items:center; gap:.6rem; font-size:.85rem; color:rgba(255,255,255,.7); }
.hero-trust .stars{ color:var(--accent); letter-spacing:1px; }

.hero-panel{ flex:1 1 380px; position:relative; z-index:2; }
.status-card{
  background:#fff; border-radius:18px; padding:1.6rem;
  box-shadow:var(--shadow-lg);
  max-width:400px; margin-left:auto;
}
.status-card .head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; padding-bottom:.9rem; border-bottom:1px solid var(--line); }
.status-card .head strong{ font-family:"Outfit",sans-serif; font-size:.95rem; }
.status-card .head span{ font-size:.75rem; color:var(--slate-light); }
.status-row{ display:flex; align-items:center; gap:.75rem; padding:.55rem 0; }
.status-row .check{ width:22px; height:22px; border-radius:6px; background:var(--primary-tint); color:var(--primary); display:grid; place-items:center; font-size:.7rem; flex:0 0 auto; }
.status-row .label{ font-size:.85rem; color:var(--ink); flex:1; }
.status-row .val{ font-size:.78rem; color:var(--primary); font-weight:600; }
.status-card .foot{ margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.status-card .foot .label{ font-size:.78rem; color:var(--slate-light); }
.status-card .foot .amt{ font-family:"Outfit",sans-serif; font-weight:700; font-size:1.35rem; color:var(--ink); }
.floating-chip{
  position:absolute; background:#fff; border-radius:12px; padding:.7rem 1rem;
  box-shadow:var(--shadow-md); display:flex; align-items:center; gap:.6rem;
  font:600 .8rem "Inter",sans-serif; color:var(--ink);
}
.floating-chip i{ color:var(--primary); }
.floating-chip.chip-1{ top:-1.2rem; left:-1rem; }
.floating-chip.chip-2{ bottom:-1.4rem; right:1rem; }
@media(max-width:575px){ .floating-chip{ display:none; } }

/*****************************/
/*    05. Trust Strip         */
/*****************************/
.trust-strip{ background:var(--ink); padding:1.6rem 0; }
.trust-strip .row-flex{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.4rem; text-align:center; }
.trust-strip .stat{ flex:1 1 130px; }
.trust-strip .stat .num{ font-family:"Outfit",sans-serif; font-weight:700; font-size:1.6rem; color:#fff; }
.trust-strip .stat .lbl{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-top:.2rem; }

/*****************************/
/*   06. Bento Roles Grid     */
/*****************************/
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.25rem; }
.bento-card{
  grid-column:span 3;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem; position:relative; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.bento-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:transparent; }
.bento-card.wide{ grid-column:span 4; }
.bento-card.narrow{ grid-column:span 2; }
.bento-card .icon-box{
  width:48px; height:48px; border-radius:12px; background:var(--primary-tint);
  color:var(--primary); display:grid; place-items:center; font-size:1.25rem; margin-bottom:1.25rem;
}
.bento-card .tag{
  position:absolute; top:1.5rem; right:1.5rem;
  font:600 .68rem "Inter",sans-serif; letter-spacing:.04em; text-transform:uppercase;
  color:var(--primary); background:var(--primary-tint); padding:.3rem .6rem; border-radius:20px;
}
.bento-card ul{ list-style:none; padding:0; margin:1rem 0 0; }
.bento-card ul li{ display:flex; align-items:center; gap:.55rem; font-size:.85rem; color:var(--slate); margin-bottom:.45rem; }
.bento-card ul li i{ color:var(--primary); font-size:.7rem; }
.bento-card .role-link{ display:inline-flex; align-items:center; gap:.4rem; font:600 .85rem "Inter",sans-serif; color:var(--ink); margin-top:1.4rem; }
.bento-card .role-link i{ font-size:.75rem; transition:transform .2s ease; }
.bento-card:hover .role-link i{ transform:translateX(4px); }

@media(max-width:767px){
  .bento{ grid-template-columns:1fr; }
  .bento-card, .bento-card.wide, .bento-card.narrow{ grid-column:span 1; }
}

/*****************************/
/*    07. Process Stepper     */
/*****************************/
.stepper-section{ background:var(--paper-alt); }
.stepper{ display:flex; flex-wrap:wrap; gap:2rem; counter-reset:step; position:relative; }
.stepper::before{
  content:""; position:absolute; top:26px; left:8%; right:8%; height:2px;
  background:repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 16px);
  z-index:0;
}
.step{ flex:1 1 220px; position:relative; z-index:1; }
.step .num{
  width:54px; height:54px; border-radius:50%; background:#fff; border:2px solid var(--primary);
  color:var(--primary); font-family:"Outfit",sans-serif; font-weight:700; font-size:1.15rem;
  display:grid; place-items:center; margin-bottom:1.1rem;
}
.step h4{ margin-bottom:.5rem; }
.step p{ font-size:.9rem; }
@media(max-width:767px){ .stepper::before{ display:none; } }

/*****************************/
/*    08. Benefits Tabs       */
/*****************************/
.benefits-wrap{ display:flex; gap:3rem; flex-wrap:wrap; align-items:flex-start; }
.benefits-nav{ flex:0 0 240px; display:flex; flex-direction:row; lg-flex-direction:column; gap:.5rem; }
.benefits-nav .nav-link{
  display:flex; align-items:center; gap:.6rem;
  padding:.9rem 1.1rem !important; border-radius:12px;
  color:var(--slate) !important; font:600 .9rem "Inter",sans-serif !important;
  border:1px solid transparent;
}
.benefits-nav .nav-link.active{ background:#fff; color:var(--ink) !important; border-color:var(--line); box-shadow:var(--shadow-sm); }
.benefits-nav .nav-link.active i{ color:var(--accent); }
.benefits-content{ flex:1 1 420px; }
.benefit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.benefit-item{ display:flex; gap:.9rem; }
.benefit-item .bullet{ width:30px; height:30px; border-radius:8px; background:var(--primary-tint); color:var(--primary); display:grid; place-items:center; font-family:"Outfit",sans-serif; font-weight:700; font-size:.85rem; flex:0 0 auto; }
.benefit-item p{ font-size:.88rem; margin:0; }
@media(max-width:767px){
  .benefits-wrap{ flex-direction:column; }
  .benefits-nav{ flex-direction:row; overflow-x:auto; flex:none; width:100%; }
  .benefit-grid{ grid-template-columns:1fr; }
}

/* progress bars reused inside benefits */
.progress-track{ margin-top:2rem; }
.progress-row{ margin-bottom:1.1rem; }
.progress-row .title{ display:flex; justify-content:space-between; font:600 .82rem "Inter",sans-serif; color:var(--ink); margin-bottom:.4rem; }
.progress-outer{ height:8px; border-radius:20px; background:var(--paper-alt); overflow:hidden; }
.progress-inner{ height:100%; border-radius:20px; background:linear-gradient(90deg,var(--primary),var(--accent)); }

/*****************************/
/*    09. FAQ Accordion       */
/*****************************/
.faq-list{ max-width:820px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item button.faq-q{
  width:100%; text-align:left; background:none; border:none;
  padding:1.4rem 0; display:flex; justify-content:space-between; align-items:center;
  font:700 1rem "Outfit",sans-serif; color:var(--ink); cursor:pointer;
}
.faq-item button.faq-q .plus{ font-size:1.3rem; color:var(--accent); transition:transform .2s ease; }
.faq-item button.faq-q[aria-expanded="true"] .plus{ transform:rotate(45deg); }
.faq-a{ padding-bottom:1.4rem; font-size:.92rem; max-width:640px; }

/*****************************/
/*    10. Stats Band          */
/*****************************/
.stats-band{ background:var(--primary-dark); color:#fff; text-align:center; }
.stats-band .row-flex{ display:flex; flex-wrap:wrap; justify-content:center; gap:3rem; }
.stats-band .stat-big .num{ font-family:"Outfit",sans-serif; font-weight:700; font-size:2.6rem; color:#fff; }
.stats-band .stat-big .lbl{ font-size:.85rem; color:rgba(255,255,255,.65); margin-top:.3rem; }

/*****************************/
/*    11. Contact Split       */
/*****************************/
.contact-section{ background:var(--ink); color:#fff; overflow:hidden; }
.contact-grid{ display:flex; flex-wrap:wrap; gap:3rem; align-items:flex-start; }
.contact-info{ flex:1 1 340px; }
.contact-info h2{ color:#fff; }
.contact-info p{ color:rgba(255,255,255,.65); }
.contact-list{ list-style:none; padding:0; margin-top:1.8rem; }
.contact-list li{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.1rem; font-size:.92rem; color:rgba(255,255,255,.85); }
.contact-list li i{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); color:var(--accent); display:grid; place-items:center; flex:0 0 auto; }

.contact-form-card{ flex:1 1 420px; background:#fff; border-radius:var(--radius); padding:2rem; box-shadow:var(--shadow-lg); color:var(--ink); }
.form-group{ position:relative; margin-bottom:1.35rem; }
.form-control-input, .form-control-textarea{
  width:100%; border:none; border-bottom:1.5px solid var(--line-strong);
  padding:.6rem .1rem; font:500 .95rem "Inter",sans-serif; color:var(--ink); background:transparent;
}
.form-control-input:focus, .form-control-textarea:focus{ outline:none; border-color:var(--primary); }
.form-control-textarea{ resize:vertical; min-height:90px; }
.label-control{ position:absolute; left:0; top:.65rem; color:var(--slate-light); font-size:.95rem; pointer-events:none; transition:all .15s ease; }
.form-control-input:focus ~ .label-control,
.form-control-input.notEmpty ~ .label-control,
.form-control-textarea:focus ~ .label-control,
.form-control-textarea.notEmpty ~ .label-control{
  top:-.8rem; font-size:.72rem; color:var(--primary); font-weight:600;
}
.form-group.checkbox{ display:flex; align-items:flex-start; gap:.6rem; font-size:.82rem; color:var(--slate); }
.form-group.checkbox input{ margin-top:.25rem; }
.form-control-submit-button{
  width:100%; background:var(--accent); color:#fff; border:none; border-radius:10px;
  padding:.95rem; font:600 .95rem "Inter",sans-serif; cursor:pointer;
  transition:background .2s ease;
}
.form-control-submit-button:hover{ background:var(--accent-dark); }
.help-block.with-errors{ color:#e05555; font-size:.75rem; margin-top:.25rem; }
#cmsgSubmit.hidden{ display:none; }
.form-message{ margin-top:1rem; }

/* shake animation (used by JS on validation error) */
.shake{ animation:shakeAnim .5s; }
@keyframes shakeAnim{
  10%,90%{ transform:translateX(-1px); }
  20%,80%{ transform:translateX(2px); }
  30%,50%,70%{ transform:translateX(-4px); }
  40%,60%{ transform:translateX(4px); }
}

/*****************************/
/*    12. Footer               */
/*****************************/
.site-footer{ background:var(--ink); color:rgba(255,255,255,.6); padding-top:2rem; border-top:1px solid rgba(255,255,255,.08); }
.footer-grid{ display:flex; flex-wrap:wrap; gap:2.5rem; justify-content:space-between; }
.footer-col h4{ color:#fff; font-size:1rem; margin-bottom:1rem; }
.footer-col p{ color:rgba(255,255,255,.55); font-size:.88rem; max-width:320px; }
.footer-links{ list-style:none; padding:0; }
.footer-links li{ margin-bottom:.6rem; }
.footer-links a{ color:rgba(255,255,255,.6); font-size:.88rem; }
.footer-links a:hover{ color:#fff; }
.copyright-bar{ margin-top:2.5rem; padding:1.4rem 0; border-top:1px solid rgba(255,255,255,.08); text-align:center; font-size:.78rem; color:rgba(255,255,255,.4); }

/*****************************/
/*  13. Back to Top button    */
/*****************************/
a.back-to-top{
  display:none; position:fixed; right:1.4rem; bottom:1.4rem; z-index:60;
  width:46px; height:46px; border-radius:50%; background:var(--ink); color:#fff;
  text-align:center; line-height:46px; font-size:0; box-shadow:var(--shadow-md);
}
a.back-to-top::before{ content:"\2191"; font-size:1.2rem; line-height:46px; }

/*****************************/
/*   14. Misc / Utilities     */
/*****************************/
.text-center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
::selection{ background:var(--accent); color:#fff; }