/* service_hire_developers.html — extracted internal + inline styles */

.hd-page { --hd: #4054d6; --hd-2: #7c3aed; --hd-rgb: 64, 84, 214; }

.hd-eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 1rem; border-radius: 2rem;
    background: rgba(var(--hd-rgb), .10); color: var(--hd); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hd-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hd); box-shadow: 0 0 0 4px rgba(var(--hd-rgb), .16); }

.hd-trust { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.hd-trust .t { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: #45526b; font-size: .95rem; }
.hd-trust .t i { color: var(--hd); font-size: 1.15rem; }

/* ---- talent profile card (hero) ---- */
.hd-stack { position: relative; max-width: 440px; margin: 0 auto; }
.hd-ghost { position: absolute; inset: 0; border-radius: 1.4rem; background: #fff; border: 1px solid #eef1f6;
    transform: translate(20px, -20px) rotate(3deg); z-index: 1; box-shadow: 0 1rem 2.4rem rgba(30,34,40,.08);
    padding: 1.4rem; overflow: hidden; }
.hd-ghost .g-row { display: flex; align-items: center; gap: .7rem; opacity: .55; }
.hd-ghost .g-av { width: 40px; height: 40px; border-radius: 50%; background: #e6e9f2; }
.hd-ghost .g-bar { height: 9px; border-radius: 6px; background: #e9ecf3; }

.hd-profile { position: relative; z-index: 2; border-radius: 1.4rem; background: #fff; border: 1px solid #eef1f6;
    box-shadow: 0 1.8rem 3.6rem rgba(30, 34, 40, .18); overflow: hidden; }
.hd-profile__head { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.4rem 1rem; }
.hd-profile__av { position: relative; width: 62px; height: 62px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 1.35rem;
    background: linear-gradient(135deg, var(--hd), var(--hd-2)); }
.hd-profile__av .on { position: absolute; bottom: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%;
    background: #22c55e; border: 3px solid #fff; }
.hd-profile__head h3 { font-size: 1.15rem; font-weight: 800; margin: 0; }
.hd-profile__head .role { font-size: .82rem; color: #8a94a6; }
.hd-profile__head .rate { display: flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 700; color: #2a3242; margin-top: .2rem; }
.hd-profile__head .rate .s { color: #fab758; letter-spacing: 1px; }
.hd-profile__head .rate .tr { font-size: .64rem; font-weight: 700; text-transform: uppercase; color: var(--hd); background: rgba(var(--hd-rgb), .1); padding: .12rem .45rem; border-radius: 2rem; }
.hd-avail { margin-left: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 700;
    color: #16a34a; background: rgba(22, 163, 74, .1); padding: .28rem .6rem; border-radius: 2rem; }
.hd-avail .p { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }

.hd-skills { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1.4rem 1rem; }
.hd-skills span { font-size: .72rem; font-weight: 600; color: var(--hd); background: rgba(var(--hd-rgb), .08); padding: .28rem .7rem; border-radius: 2rem; }
.hd-pstats { display: flex; border-top: 1px solid #f0f2f6; }
.hd-pstats .st { flex: 1; text-align: center; padding: .9rem .4rem; border-right: 1px solid #f0f2f6; }
.hd-pstats .st:last-child { border-right: 0; }
.hd-pstats .st b { display: block; font-size: 1.1rem; font-weight: 800; color: #1e2531; }
.hd-pstats .st span { font-size: .72rem; color: #8a94a6; }
.hd-profile__foot { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.4rem; background: #f9fafc; }
.hd-profile__foot .when { font-size: .82rem; color: #64708a; }
.hd-profile__foot .when b { color: #2a3242; display: block; }
.hd-hire { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .92rem;
    color: #fff; background: linear-gradient(100deg, var(--hd), var(--hd-2)); padding: .6rem 1.3rem; border-radius: .7rem;
    box-shadow: 0 .7rem 1.6rem rgba(var(--hd-rgb), .32); }

/* ---- role cards ---- */
.hd-role { height: 100%; background: #fff; border: 1px solid #eef1f6; border-radius: 1.1rem; padding: 1.6rem 1.5rem;
    transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .3s; }
.hd-role:hover { transform: translateY(-8px); box-shadow: 0 1.4rem 3rem rgba(30,34,40,.12); border-color: rgba(var(--hd-rgb),.4); }
.hd-role .ic { width: 54px; height: 54px; border-radius: .9rem; background: rgba(var(--hd-rgb), .09); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.hd-role h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; }
.hd-role p { font-size: .88rem; color: #5c6a82; margin-bottom: .9rem; }
.hd-role .tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.hd-role .tags span { font-size: .68rem; font-weight: 600; color: var(--hd); background: rgba(var(--hd-rgb), .08); padding: .2rem .55rem; border-radius: 2rem; }

/* ---- hiring models strip ---- */
.hd-model { text-align: center; height: 100%; background: #fff; border: 1px solid #eef1f6; border-radius: 1rem; padding: 1.6rem 1.3rem;
    transition: transform .35s ease, box-shadow .35s ease; }
.hd-model:hover { transform: translateY(-5px); box-shadow: 0 1rem 2.2rem rgba(30,34,40,.1); }
.hd-model .ic { width: 52px; height: 52px; margin: 0 auto .9rem; border-radius: .9rem; background: rgba(var(--hd-rgb), .1); color: var(--hd);
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.hd-model h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: .3rem; }
.hd-model p { font-size: .86rem; color: #5c6a82; margin: 0; }

/* ---- tech chips ---- */
.hd-tech { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.hd-tech span { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.1rem; border-radius: 2rem;
    background: #fff; border: 1px solid #e7ebf2; font-weight: 700; font-size: .9rem; color: #45526b; transition: all .25s ease; }
.hd-tech span:hover { color: var(--hd); border-color: var(--hd); transform: translateY(-2px); }

/* ---- why-us cards ---- */
.hd-why { height: 100%; background: #fff; border: 1px solid #eef1f6; border-radius: 1.1rem; padding: 1.5rem 1.4rem;
    border-top: 4px solid var(--hd); transition: transform .35s ease, box-shadow .35s ease; }
.hd-why:hover { transform: translateY(-5px); box-shadow: 0 1.1rem 2.4rem rgba(30,34,40,.1); }
.hd-why i { font-size: 1.7rem; color: var(--hd); }
.hd-why h4 { font-size: 1.05rem; font-weight: 700; margin: .7rem 0 .35rem; }
.hd-why p { font-size: .88rem; color: #5c6a82; margin: 0; }

.hd-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.8rem; }
.hd-proof .p { text-align: center; }
.hd-proof .n { font-size: 2.5rem; font-weight: 800; line-height: 1; background: linear-gradient(120deg, var(--hd), var(--hd-2));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hd-proof span { font-size: .85rem; color: #8a94a6; }

/* ---- testimonials ---- */
.hd-quote { height: 100%; background: #fff; border: 1px solid #eef1f6; border-radius: 1.1rem; padding: 1.6rem 1.4rem;
    transition: transform .35s ease, box-shadow .35s ease; }
.hd-quote:hover { transform: translateY(-5px); box-shadow: 0 1.2rem 2.6rem rgba(30,34,40,.1); }
.hd-quote .stars { color: #fab758; letter-spacing: 1px; font-size: .85rem; margin-bottom: .6rem; }
.hd-quote p { font-size: .9rem; color: #3f4a5c; line-height: 1.65; }
.hd-quote .who { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; }
.hd-quote .av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff; font-size: .8rem; background: linear-gradient(135deg, var(--hd), var(--hd-2)); }

@media (prefers-reduced-motion: no-preference) {
    .reveal-up { animation: reveal-up .6s cubic-bezier(.22,.61,.36,1) both; }
    .reveal-up:nth-child(3n+2) { animation-delay: .08s; } .reveal-up:nth-child(3n+3) { animation-delay: .16s; }
}
@keyframes reveal-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---- generated classes for inline styles ---- */
.gen-1 { flex:1; }
.gen-2 { width:60%;margin-bottom:8px; }
.gen-3 { width:40%; }
.gen-4 { background:linear-gradient(150deg,var(--hd),var(--hd-2));border:0;color:#fff; }
.gen-5 { color:#ffd76a; }
.gen-6 { color:#fff;font-weight:600; }
.gen-7 { background:#fff;color:var(--hd);font-weight:700; }
.gen-8 { height: 130px; }