/* Homepage v2 — content-first discovery. Everything colours from the existing theme tokens (--bg-*, --border*,
   --text-*, --accent*, --accent-rgb), so all eight themes work without a single hard-coded colour. */
.hh{ overflow-x:clip; max-width:1200px; margin-inline:auto; padding-inline:28px; box-sizing:border-box; }
.hh *{ box-sizing:border-box; }

/* ---------------------------------------------------------------- welcome (compact on purpose) */
.hh-welcome{ position:relative; padding:34px 0 6px; text-align:center; }
.hh-welcome::before{ content:''; position:absolute; inset:-30px 0 auto; height:320px; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb),.16), transparent 62%); }
.hh-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(30px,4.6vw,46px); line-height:1.1; margin:0 0 8px; letter-spacing:.2px; color:var(--text-0); }
[dir="rtl"] .hh-title{ line-height:1.35; letter-spacing:0; }
.hh-sub{ color:var(--text-1); font-size:15px; line-height:1.6; max-width:640px; margin:0 auto 20px; }

/* ---------------------------------------------------------------- search */
.hh-search{ position:relative; max-width:760px; margin:0 auto; z-index:30; }
.hh-search-box{ display:flex; align-items:center; gap:12px; height:58px; padding-inline:18px; background:var(--bg-2); border:1px solid var(--border-hi); border-radius:16px;
  box-shadow:0 10px 36px rgba(0,0,0,.32); transition:border-color .24s ease, box-shadow .24s ease; }
.hh-search-box:focus-within{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14), 0 14px 46px rgba(0,0,0,.42); }
.hh-search-box svg{ flex:none; color:var(--text-2); }
.hh-search-box input{ flex:1; min-width:0; height:100%; background:none; border:0; outline:0; color:var(--text-0); font:500 16px var(--font-ui); }
.hh-search-box input::placeholder{ color:var(--text-2); }
.hh-search-clear{ background:none; border:0; color:var(--text-2); cursor:pointer; font-size:18px; padding:6px; line-height:1; border-radius:8px; display:none; }
.hh-search-clear:hover{ color:var(--text-0); }
.hh-search.has-text .hh-search-clear{ display:block; }
.hh-panel{ position:absolute; inset-inline:0; top:calc(100% + 8px); display:none; text-align:start; padding:10px; max-height:min(62vh,540px); overflow:auto;
  background:var(--bg-1); border:1px solid var(--border-hi); border-radius:14px; box-shadow:0 26px 70px rgba(0,0,0,.55); }
.hh-panel.open{ display:block; animation:hhPanel .2s cubic-bezier(.22,.8,.3,1); }
@keyframes hhPanel{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.hh-psec{ padding:6px 4px 8px; }
.hh-psec + .hh-psec{ border-top:1px solid var(--border); margin-top:4px; padding-top:10px; }
.hh-ptitle{ display:flex; align-items:center; justify-content:space-between; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); font-weight:700; padding:2px 8px 8px; }
.hh-ptitle button{ background:none; border:0; color:var(--accent); cursor:pointer; font:600 12px var(--font-ui); letter-spacing:0; text-transform:none; }
.hh-prow{ display:flex; align-items:center; gap:12px; padding:8px; border-radius:10px; text-decoration:none; color:var(--text-0); cursor:pointer; transition:background .15s ease; }
.hh-prow:hover, .hh-prow.is-active{ background:rgba(var(--accent-rgb),.10); }
.hh-prow img, .hh-prow .hh-noimg{ width:44px; height:30px; border-radius:6px; object-fit:cover; background:var(--bg-3); flex:none; }
.hh-prow .t{ font-weight:600; font-size:14px; line-height:1.25; }
.hh-prow .s{ display:block; font-size:12px; color:var(--text-2); margin-top:1px; }
.hh-prow .ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:rgba(var(--accent-rgb),.12); color:var(--accent); flex:none; }
.hh-pempty{ padding:14px 10px; color:var(--text-2); font-size:13.5px; }

/* ---------------------------------------------------------------- explore hub */
.hh-explore-head{ display:flex; align-items:center; gap:14px; margin:30px 0 14px; }
.hh-eyebrow{ font-size:12px; letter-spacing:.16em; font-weight:700; color:var(--text-2); text-transform:uppercase; white-space:nowrap; margin:0; }
[dir="rtl"] .hh-eyebrow{ letter-spacing:0; font-size:13px; }
.hh-explore-head::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--border-hi), transparent); }
[dir="rtl"] .hh-explore-head::after{ background:linear-gradient(270deg, var(--border-hi), transparent); }
.hh-hub{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.hh-hub + .hh-hub{ margin-top:16px; }

.hh-card{ position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; gap:10px; min-height:196px; padding:22px; color:var(--text-0);
  background:linear-gradient(160deg, var(--bg-2), var(--bg-1)); border:1px solid var(--border); border-radius:18px;
  transition:transform .26s cubic-bezier(.22,.8,.3,1), border-color .26s ease, box-shadow .26s ease; }
.hh-card.lg{ min-height:236px; padding:26px; }
.hh-card::before{ content:''; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .28s ease;
  background:radial-gradient(420px circle at 78% 0%, rgba(var(--accent-rgb),.18), transparent 62%); }
[dir="rtl"] .hh-card::before{ background:radial-gradient(420px circle at 22% 0%, rgba(var(--accent-rgb),.18), transparent 62%); }
.hh-card::after{ content:''; position:absolute; inset:0; z-index:-1; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(var(--accent-rgb),.10) 1px, transparent 1.2px); background-size:18px 18px;
  -webkit-mask-image:linear-gradient(200deg, #000, transparent 55%); mask-image:linear-gradient(200deg, #000, transparent 55%); }
[dir="rtl"] .hh-card::after{ -webkit-mask-image:linear-gradient(160deg, #000, transparent 55%); mask-image:linear-gradient(160deg, #000, transparent 55%); }
.hh-card:hover{ transform:translateY(-5px); border-color:var(--accent); box-shadow:0 20px 46px rgba(0,0,0,.42), 0 0 0 1px rgba(var(--accent-rgb),.22); }
.hh-card:hover::before{ opacity:1; }
.hh-stretch{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
.hh-stretch:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

.hh-visual{ position:absolute; inset-inline-end:-10px; top:-12px; width:176px; height:176px; z-index:-1; color:rgba(var(--accent-rgb),.34); transition:transform .3s cubic-bezier(.22,.8,.3,1); pointer-events:none; }
.hh-card.lg .hh-visual{ width:210px; height:210px; }
.hh-card:hover .hh-visual{ transform:scale(1.025); }
[dir="rtl"] .hh-visual svg{ transform:scaleX(-1); }
.hh-icon{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; flex:none; color:var(--accent);
  background:rgba(var(--accent-rgb),.12); border:1px solid rgba(var(--accent-rgb),.28); }
.hh-card.lg .hh-icon{ width:54px; height:54px; border-radius:16px; }
.hh-name{ font-family:var(--font-display); font-weight:700; font-size:24px; line-height:1.15; margin:8px 0 0; }
.hh-card.lg .hh-name{ font-size:28px; }
[dir="rtl"] .hh-name{ line-height:1.4; }
.hh-desc{ color:var(--text-1); font-size:13.5px; line-height:1.55; max-width:36ch; margin:0; }
.hh-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:10px; }
.hh-cta{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; color:var(--accent); }
.hh-cta svg{ transition:transform .26s cubic-bezier(.22,.8,.3,1); }
.hh-card:hover .hh-cta svg{ transform:translateX(4px); }
[dir="rtl"] .hh-cta svg{ transform:scaleX(-1); }
[dir="rtl"] .hh-card:hover .hh-cta svg{ transform:scaleX(-1) translateX(4px); }
.hh-count{ font-size:12px; font-weight:600; color:var(--text-1); background:rgba(var(--accent-rgb),.08); border:1px solid rgba(var(--accent-rgb),.22); border-radius:999px; padding:3px 11px; white-space:nowrap; }
.hh-count:empty{ display:none; }
.hh-free{ position:absolute; top:20px; inset-inline-end:20px; z-index:2; font-weight:800; font-size:12px; letter-spacing:.14em; padding:5px 12px; border-radius:999px;
  background:var(--accent); color:var(--on-accent); box-shadow:0 6px 18px rgba(var(--accent-rgb),.35); }
[dir="rtl"] .hh-free{ letter-spacing:0; font-size:13px; }
.hh-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.hh-chip{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 8px; border-radius:10px; font-size:12px; font-weight:600; text-decoration:none; color:var(--text-0);
  background:rgba(255,255,255,.04); border:1px solid var(--border-hi); transition:border-color .2s ease, background .2s ease; }
.hh-chip:hover{ border-color:var(--accent); background:rgba(var(--accent-rgb),.10); }
.hh-chip svg{ width:15px; height:15px; color:var(--accent); }
.hh-avatars{ display:flex; }
.hh-avatars img{ width:30px; height:30px; border-radius:50%; object-fit:cover; border:2px solid var(--bg-2); margin-inline-start:-9px; background:var(--bg-3); }
.hh-avatars img:first-child{ margin-inline-start:0; }
.hh-card.sm{ min-height:168px; padding:20px; }
.hh-card.sm .hh-name{ font-size:21px; }

/* ---------------------------------------------------------------- entrance + scroll reveal */
.hh-in{ opacity:0; transform:translateY(10px); animation:hhIn .4s cubic-bezier(.22,.8,.3,1) forwards; animation-delay:var(--d,0ms); }
@keyframes hhIn{ to{ opacity:1; transform:none; } }
.hh-reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s cubic-bezier(.22,.8,.3,1); }
.hh-reveal.in{ opacity:1; transform:none; }

/* ---------------------------------------------------------------- content sections */
.hh-sec{ margin-top:46px; }
.hh-sec-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.hh-sec-head h2{ font-family:var(--font-display); font-size:26px; font-weight:700; margin:0; }
[dir="rtl"] .hh-sec-head h2{ line-height:1.4; }
.hh-more{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; color:var(--accent); text-decoration:none; white-space:nowrap; }
.hh-more svg{ transition:transform .24s ease; }
.hh-more:hover svg{ transform:translateX(4px); }
[dir="rtl"] .hh-more svg{ transform:scaleX(-1); }
[dir="rtl"] .hh-more:hover svg{ transform:scaleX(-1) translateX(4px); }
.hh-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.hh-sec-foot{ margin-top:18px; text-align:center; }
.hh-sec-foot .ghost-btn{ text-decoration:none; }
.hh-err{ padding:30px 20px; text-align:center; color:var(--text-2); border:1px dashed var(--border-hi); border-radius:14px; }
.hh-err button{ margin-top:10px; }

/* skeletons */
.hh-skel{ border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; background:var(--bg-2); }
.hh-skel i{ display:block; background:linear-gradient(100deg, var(--bg-2) 30%, var(--bg-3) 50%, var(--bg-2) 70%); background-size:220% 100%; animation:hhShim 1.4s linear infinite; }
.hh-skel i.img{ aspect-ratio:16/9; }
.hh-skel i.l1{ height:14px; width:70%; margin:14px 14px 8px; border-radius:6px; }
.hh-skel i.l2{ height:10px; width:45%; margin:0 14px 16px; border-radius:6px; }
.hh-skel.row{ display:flex; gap:12px; padding:10px; align-items:center; border-radius:14px; }
.hh-skel.row i.th{ width:84px; height:56px; border-radius:8px; flex:none; }
.hh-skel.row .tx{ flex:1; }
.hh-skel.row i.l1{ margin:0 0 8px; }
.hh-skel.row i.l2{ margin:0; }
.hh-skel.dev{ padding:18px; }
.hh-skel.dev i.av{ width:64px; height:64px; border-radius:50%; margin-bottom:12px; }
.hh-skel.dev i.l1{ margin:0 0 8px; }
.hh-skel.dev i.l2{ margin:0; }
@keyframes hhShim{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }

/* developers */
.hh-devs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.hh-dev{ position:relative; display:flex; flex-direction:column; gap:10px; padding:20px; border-radius:16px; color:var(--text-0); text-decoration:none;
  background:linear-gradient(160deg, var(--bg-2), var(--bg-1)); border:1px solid var(--border); transition:transform .26s cubic-bezier(.22,.8,.3,1), border-color .26s ease, box-shadow .26s ease; }
.hh-dev:hover{ transform:translateY(-4px); border-color:var(--accent); box-shadow:0 16px 38px rgba(0,0,0,.38); }
.hh-dev-top{ display:flex; align-items:center; gap:14px; }
.hh-dev-av{ width:60px; height:60px; border-radius:50%; flex:none; object-fit:cover; display:grid; place-items:center; font:700 24px var(--font-display); color:var(--on-accent);
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); border:2px solid rgba(var(--accent-rgb),.5); }
.hh-dev-name{ font-weight:700; font-size:17px; line-height:1.25; display:flex; align-items:center; gap:6px; }
.hh-vcheck{ width:18px; height:18px; flex:none; color:var(--accent); }
.hh-dev-meta{ font-size:12.5px; color:var(--text-2); margin-top:2px; }
.hh-dev-skills{ display:flex; flex-wrap:wrap; gap:6px; }
.hh-dev-skills span{ font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:999px; color:var(--text-1); border:1px solid var(--border-hi); }
.hh-rate{ color:var(--accent-2); font-weight:700; }

/* "new on" feed */
.hh-new{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; }
.hh-new-item{ min-width:0; display:flex; align-items:center; gap:14px; padding:10px 12px; border-radius:14px; text-decoration:none; color:var(--text-0); background:var(--bg-2); border:1px solid var(--border);
  transition:transform .24s cubic-bezier(.22,.8,.3,1), border-color .24s ease; }
.hh-new-item:hover{ transform:translateY(-3px); border-color:var(--accent); }
.hh-new-item img, .hh-new-item .hh-noimg{ width:88px; height:58px; border-radius:8px; object-fit:cover; background:var(--bg-3); flex:none; }
.hh-new-body{ min-width:0; flex:1; }
.hh-new-title{ font-weight:700; font-size:14.5px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:6px; }
.hh-new-sub{ font-size:12px; color:var(--text-2); margin-top:3px; }
.hh-new-price{ font-weight:800; font-size:14px; color:var(--accent-2); white-space:nowrap; }
.hh-type{ font-size:10px; font-weight:800; letter-spacing:.1em; padding:2px 8px; border-radius:6px; white-space:nowrap; flex:none; border:1px solid transparent; }
[dir="rtl"] .hh-type{ letter-spacing:0; font-size:11px; }
.hh-type.map{ color:var(--accent); background:rgba(var(--accent-rgb),.12); border-color:rgba(var(--accent-rgb),.3); }
.hh-type.code{ color:var(--text-0); background:rgba(255,255,255,.07); border-color:var(--border-hi); }
.hh-type.asset{ color:var(--on-accent); background:var(--accent); }

/* custom request strip + developer program */
.hh-strip, .hh-build{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 32px; border-radius:20px; border:1px solid var(--border-hi);
  background:radial-gradient(520px circle at 85% 0%, rgba(var(--accent-rgb),.13), transparent 60%), linear-gradient(160deg, var(--bg-2), var(--bg-1)); }
[dir="rtl"] .hh-strip, [dir="rtl"] .hh-build{ background:radial-gradient(520px circle at 15% 0%, rgba(var(--accent-rgb),.13), transparent 60%), linear-gradient(160deg, var(--bg-2), var(--bg-1)); }
.hh-strip h3, .hh-build h3{ font-family:var(--font-display); font-size:26px; margin:6px 0 6px; line-height:1.2; }
.hh-strip p, .hh-build p{ margin:0; color:var(--text-1); font-size:14px; line-height:1.55; }
.hh-strip .acts, .hh-build .acts{ display:flex; gap:12px; flex-wrap:wrap; flex:none; }
.hh-strip a, .hh-build a{ text-decoration:none; }
.hh-build .dp-note{ margin:8px 0 0; }

/* ---------------------------------------------------------------- developers page */
.dd-head{ padding:34px 0 8px; }
.dd-head h1{ font-family:var(--font-display); font-size:clamp(30px,4vw,40px); margin:0 0 8px; }
.dd-head p{ color:var(--text-1); font-size:15px; margin:0; max-width:620px; line-height:1.6; }
.dd-tools{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:20px 0 22px; }
.dd-tools input{ flex:1 1 260px; max-width:420px; height:46px; padding-inline:16px; border-radius:12px; background:var(--bg-2); border:1px solid var(--border-hi); color:var(--text-0); font:500 15px var(--font-ui); outline:0; }
.dd-tools input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14); }

/* ---------------------------------------------------------------- responsive */
@media (max-width:1000px){
  .hh-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hh-hub{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hh-strip, .hh-build{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:720px){
  .hh-grid{ grid-template-columns:1fr; gap:16px; }
  .hh{ padding-inline:18px; }
  .hh-welcome{ padding-top:22px; }
  .hh-sub{ font-size:14px; margin-bottom:16px; }
  .hh-search-box{ height:52px; }
  .hh-hub.top{ grid-template-columns:1fr; gap:12px; }
  .hh-hub.second{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .hh-card, .hh-card.lg, .hh-card.sm{ min-height:0; padding:16px; gap:8px; border-radius:16px; }
  .hh-hub.top .hh-card{ flex-direction:row; align-items:center; gap:14px; }
  .hh-hub.top .hh-card .hh-body{ flex:1; min-width:0; }
  .hh-name, .hh-card.lg .hh-name, .hh-card.sm .hh-name{ font-size:19px; margin-top:0; }
  .hh-desc{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12.5px; }
  .hh-hub.second .hh-desc, .hh-hub.second .hh-chips{ display:none; }
  .hh-visual{ display:none; }
  .hh-foot{ padding-top:2px; margin-top:0; }
  .hh-hub.top .hh-foot{ margin:0; padding:0; flex:none; }
  .hh-hub.top .hh-cta span{ display:none; }
  .hh-count{ display:none; }
  .hh-free{ top:6px; inset-inline-end:12px; font-size:10px; padding:2px 8px; }
  .hh-hub.second .hh-card:last-child{ grid-column:1 / -1; }
  .hh-sec{ margin-top:36px; }
  .hh-sec-head h2{ font-size:22px; }
  .hh-new{ grid-template-columns:minmax(0,1fr); }
  .hh-strip, .hh-build{ padding:22px 20px; }
}
@media (prefers-reduced-motion:reduce){
  .hh-in{ animation:none; opacity:1; transform:none; }
  .hh-reveal{ opacity:1; transform:none; transition:none; }
  .hh-card, .hh-dev, .hh-new-item, .hh-visual, .hh-cta svg, .hh-more svg{ transition:none; }
  .hh-skel i{ animation:none; }
  .hh-panel.open{ animation:none; }
}

/* the coupon strip, when it sits inside the page content instead of above the nav */
.jo-offer.jo-offer-inline{ border:1px solid rgba(var(--accent-rgb),.35); border-radius:14px; }