/* ===== WorkersFromNepal.com — homepage accent layer =====
   Additive only: layered on top of style.css, loaded on index.html alone.
   Adds colour variety, icon-badge gradients, a dot-grid texture and hover
   motion to the existing "Himalayan Slate Blue / Workforce Teal / Marigold"
   system. Touches no shared classes' layout, no JS-hooked selectors, no
   other page. Two new accent hues (coral, sky) extend the existing palette
   for card-to-card variety without replacing it. */

:root{
  --coral:#D9694A; --coral-d:#B84F34;
  --sky:#2E6FA8;   --sky-d:#22557F;
}

/* ---- Dot-grid texture, layered behind the hero alongside the existing
   topographic pattern (additive background, not a replacement) ---- */
.hero{position:relative;}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(18,48,71,.08) 1.2px, transparent 1.2px);
  background-size:20px 20px;
  -webkit-mask-image:radial-gradient(560px 420px at 78% 15%, #000, transparent 72%);
  mask-image:radial-gradient(560px 420px at 78% 15%, #000, transparent 72%);
}
.hero-grid{position:relative;z-index:1;}

/* ---- Icon-badge colour cycle for every 4-across card grid (Introduction,
   Workforce Solutions, Why Nepal all reuse .grid-4 .card .ci) ---- */
.grid-4 .card:nth-child(4n+1) .ci{background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff;}
.grid-4 .card:nth-child(4n+2) .ci{background:linear-gradient(135deg,var(--sky),var(--sky-d));color:#fff;}
.grid-4 .card:nth-child(4n+3) .ci{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:var(--slate-d);}
.grid-4 .card:nth-child(4n+4) .ci{background:linear-gradient(135deg,var(--coral),var(--coral-d));color:#fff;}
.grid-4 .card:nth-child(4n+1) .ci svg{stroke:#fff;}
.grid-4 .card:nth-child(4n+2) .ci svg{stroke:#fff;}
.grid-4 .card:nth-child(4n+3) .ci svg{stroke:var(--slate-d);}
.grid-4 .card:nth-child(4n+4) .ci svg{stroke:#fff;}
.grid-4 .card:nth-child(4n+1):hover{box-shadow:0 16px 34px rgba(31,96,98,.22);}
.grid-4 .card:nth-child(4n+2):hover{box-shadow:0 16px 34px rgba(34,85,127,.22);}
.grid-4 .card:nth-child(4n+3):hover{box-shadow:0 16px 34px rgba(197,129,31,.22);}
.grid-4 .card:nth-child(4n+4):hover{box-shadow:0 16px 34px rgba(184,79,52,.22);}

/* ---- Industry cards: vary the top band per card instead of one uniform
   teal-to-gold gradient repeated six times ---- */
.icard:nth-child(6n+1) .iband{background:linear-gradient(90deg,var(--teal),var(--sky));}
.icard:nth-child(6n+2) .iband{background:linear-gradient(90deg,var(--sky),var(--slate));}
.icard:nth-child(6n+3) .iband{background:linear-gradient(90deg,var(--gold),var(--coral));}
.icard:nth-child(6n+4) .iband{background:linear-gradient(90deg,var(--coral),var(--gold-d));}
.icard:nth-child(6n+5) .iband{background:linear-gradient(90deg,var(--teal),var(--gold));}
.icard:nth-child(6n+6) .iband{background:linear-gradient(90deg,var(--sky),var(--teal-d));}

/* ---- Hiring-process step numbers: colour cycle instead of uniform gold ---- */
.pgrid .pstep:nth-child(6n+1) .pn{color:#7fd6cf;}
.pgrid .pstep:nth-child(6n+2) .pn{color:#8fb9e6;}
.pgrid .pstep:nth-child(6n+3) .pn{color:var(--gold-soft);}
.pgrid .pstep:nth-child(6n+4) .pn{color:#f0a888;}
.pgrid .pstep:nth-child(6n+5) .pn{color:#7fd6cf;}
.pgrid .pstep:nth-child(6n+6) .pn{color:#8fb9e6;}

/* ---- "Who we work with" numbered circles: same treatment, smaller scale ---- */
.wholist .who:nth-child(5n+1) .wi{background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff;}
.wholist .who:nth-child(5n+2) .wi{background:linear-gradient(135deg,var(--sky),var(--sky-d));color:#fff;}
.wholist .who:nth-child(5n+3) .wi{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:var(--slate-d);}
.wholist .who:nth-child(5n+4) .wi{background:linear-gradient(135deg,var(--coral),var(--coral-d));color:#fff;}
.wholist .who:nth-child(5n+5) .wi{background:linear-gradient(135deg,var(--slate),var(--slate-l));color:#fff;}

/* ---- Hero flow numbers (the 4-step "from requirement to deployment" list) ---- */
.flow .fitem:nth-child(4n+1) .fnum{background:var(--teal);color:#fff;}
.flow .fitem:nth-child(4n+2) .fnum{background:var(--sky);color:#fff;}
.flow .fitem:nth-child(4n+3) .fnum{background:var(--gold);color:var(--slate-d);}
.flow .fitem:nth-child(4n+4) .fnum{background:var(--coral);color:#fff;}

/* ---- Slightly richer, warmer glow behind the enquiry form card ---- */
.form-card{position:relative;}
.form-card::after{
  content:"";position:absolute;inset:-1px;z-index:-1;border-radius:calc(var(--radius) + 1px);
  background:linear-gradient(120deg,rgba(40,124,126,.16),rgba(231,161,61,.16));
  filter:blur(14px);opacity:.7;pointer-events:none;
}

@media(prefers-reduced-motion:reduce){
  .hero::before{display:none;}
}